Brenton Strine

Brenton Strine

Text-Level Semantics

Slide Duration:

Table of Contents

Section 1: HTML
Your First Web Page

17m 1s

Intro
0:00
World Wide Web
0:23
Introduction to HTML
0:25
Looking at Source Code
0:53
HTML5
1:58
HTML5 Specification
1:59
Creating a Web Page
4:10
What You Will Need to Create a Web Page
4:11
Example: Basic Web Page
4:40
Example: Creating a Web Page
5:46
HTML Elements
6:33
Adding a Title
7:08
Main Body
7:48
First Level Heading
8:23
Adding an Image
8:42
Paragraph
9:09
Adding a List and URLs
11:13
Footer
14:09
CSS: Styling
16:02
Web Basics and Web History

32m 23s

Intro
0:00
The Web
0:56
Overview of the Web
0:58
The Web Page
2:39
Overview of the Web Page
2:40
Web Technologies
4:45
Overview of Web Technologies
4:46
The Web Today
9:22
The Web Today
9:23
What is HTML
11:22
HyperText Markup Language
11:23
The Creation of the Internet
12:40
History of the Internet
12:41
Developments in HTML
14:10
The Birth of HTML
14:11
Early Problems
15:35
Early Browsers
16:24
History of Early Browsers
16:25
NCSA Mosaic
17:55
NCSA Mosaic
17:56
The Browser Wars Begin
19:39
History of the Browser Wars
19:40
Casualties of War
22:27
Results of the Browser Wars
22:28
HTML 4 Stabilization
25:31
History and Overview of HTML4
25:32
Modern Browser Developments
27:27
Modern Browsers
27:29
HTML5
30:57
Overview of HTML5
30:58
Web Development Tools

26m 28s

Intro
0:00
Browsers
0:17
Introduction to Browsers
0:18
Example: Browsers
2:35
Firefox Add-ons
3:14
Firefox Browser
3:15
Example: Firebug Add-ons
3:54
Example: Web Developer Toolbar and ColorZilla
7:51
Domain Names and Hosting
10:23
Overview of Domain Names and Hosting
10:24
Your Own Domain
11:03
Installing a Local Web Server
12:42
Installing a Local Web Server
12:43
Apache Web
13:29
WYSIWYG Editors
15:56
Introduction to WYSIWYG Editors
15:57
Content Management System
18:31
How Content Management System Works
18:32
Example: WordPress
20:00
File Transfer Protocol
22:26
File Transfer Protocol
22:27
HTML Elements and Attributes

21m 50s

Intro
0:00
Proper use of Elements and Attributes
0:14
Elements and Attributes
0:16
Example
1:06
Normal HTML Elements
2:00
Start Tag, Content, and End Tag
2:02
Example: Warning!
2:34
Void HTML Elements
3:23
Self-Closing Tags
3:24
List of Void Elements
4:04
Example: Line Break
5:00
HTML Comments
6:13
Purpose of Comment Tags
6:14
Example: Comment Tags
6:50
Attributes
7:25
Properties of Attributes
7:27
Example: Attributes
7:39
Example: Whitespace
10:22
HTML Character Codes
12:05
Character References
12:07
Example: Registered Trademark Symbol
12:35
Example: Using Character References
13:23
Example: Start Tag and End Tag
15:57
Example: Self-Closing Tag
16:37
Example: Attributes
17:37
Example: Proper use of Elements and Attributes
19:02
Example: Comment
20:09
Example: Whitespace
20:46
Essential Tags Part 1

41m 42s

Intro
0:00
Document Structure Tags
1:13
Document Structure Tags and Example
1:14
Layout Tags
3:24
Layout Tags
3:26
Example: Layout Tags
7:48
Example: Layout Tags
11:28
Example: Layout Tags
13:17
Example: Layout Tags
14:22
Text Level Tags
17:22
Text Level Tags
17:23
Example: Text Level Tags
17:48
Grouping Content Tags
24:23
Grouping Content Tags
24:24
<p> Tag
24:45
<hr> Tag
25:31
<figure>, <figcaption>, and <blockquote> Tag
26:14
<div> Tag
26:58
Example: Grouping Content Tags
27:28
Embedded Content Tags
33:12
Embedded Content Tags
33:13
Example: Embedded Content Tags
35:39
Essential Tags Part 2

24m 20s

Intro
0:00
Simple Tables
0:17
Simple Tables
0:19
Example: Simple Tables
2:31
Semantic Tables
5:11
Semantic Tables
5:14
Example: Semantic Tables
6:24
Simple Lists
8:14
Simple Lists
8:18
Unordered List
8:36
Ordered List
8:42
Example: Simple Lists
9:37
Definition Lists
14:08
Definition Lists
14:09
Example: Definition Lists
15:21
Forms
17:11
Forms
17:12
Example: Forms
17:52
Markup Language

29m 38s

Intro
0:00
HTML 1 Through 3.2
0:13
Period of Rapid Growth of HTML
0:14
Tag Soup
2:03
Definition of Tag Soup
2:04
Example: Tag Soup
3:00
Example: Tag Soup and Valid Doctype
4:45
HTML 4.01
5:26
Overview of HTML 4.01
5:27
Three Flavors of HTML 4.01: Strict, Transitional, and Frameset
6:05
XHTML 1
7:19
Overview of XHTML 1
7:20
Example: XHTML 1
9:20
XHTML1 Syntax
11:48
Lower Case Rule
11:49
Closed Elements Rule
12:25
Encased in Quotes Rule
14:18
Boolean Attributes May Not Be Minimized
14:35
Correct Nesting is Enforced
15:29
The Problem with XHTML
16:15
Problem with XHTML
16:16
XHTML 2
19:22
Overview of XHTML 2
19:23
HTML 5
20:43
Overview of HTML 5
20:44
Validating
22:44
Validators
22:45
Example: W3C Markup Validation Service
25:26
Page Structure and Meta-data Elements

32m 50s

Intro
0:00
The Doctype
0:12
Doctype
0:13
Example: Doctype
1:25
The Root Element
1:57
Root Element
1:58
Example: Root Element
2:45
The Head Element
3:38
Head Element and Body Element
3:39
Example: Head Element and Body Element
5:06
The Head Element
5:42
Head Element vs. Header Element
5:47
The Title Element
6:51
Title Element
6:52
Example: Title Element
7:54
The Base Element
9:00
Base Element
9:03
Example: Base Element
9:42
The Link Element
14:07
Link Element: rel, type, and href
14:08
Example: Link Element
15:13
The Meta Element
17:54
Meta Element: charset, name, and http-equiv
17:55
Example: Meta Element
21:00
The Style Element
23:35
Style Element
23:37
Example: Style Element
24:40
Text-Level Semantics

30m 13s

Intro
0:00
Text Level Semantics
0:06
Paragraph Level
0:07
The <a> Element
2:23
Definition of the <a> Element
2:25
The <em> Element
3:25
Definition of the <em> Element
3:26
The <strong> Element
6:50
The <strong> Element
6:51
The <small> Element
8:35
The <small> Element
8:36
Example of <small> Element
10:19
The <cite> Element
10:55
The <cite> Element
10:56
Example of <cite> Element
12:32
The <q> Element
12:45
The <q> Element
12:46
Example of <q> Element
13:34
The <abbr> Element
15:35
The <abbr> Element
15:36
Example of <abbr> Element
16:41
The <dfn> Element
17:03
The <dfn> Element
17:04
Example of <dfn> Element
18:01
The <time> Element
19:11
The <time> Element and Example
19:12
The <code> Element
21:18
The <code> Element
21:19
Example of <code> Element
23:00
The <sub> and <sup> Elements
23:31
The <sub> and <sup> Elements
23:32
Example of <sub> and <sup> Elements
23:50
The <i> Element
24:51
The <i> Element and Example
24:52
The <b> Element
27:16
The <b> Element
27:17
Example of <b> Element
29:07
Heading and Sectioning

23m 39s

Intro
0:00
Heading Elements
0:06
Heading Tags
0:07
Heading Rules
1:13
Heading Rules and Example
1:35
Sectioning Roots
5:39
Sectioning Roots
5:41
Sectioning Contents
6:25
Sectioning Content Elements
6:27
Section Wrapping
7:40
Section Wrapping
7:41
Example: Section Wrapping
10:10
Real World Example 1
15:36
Forms

47m 51s

Intro
0:00
Form Terminology
0:23
Form
0:24
Control
0:43
Control Name and Control Label
1:09
Input Type and State
1:52
Form Controls
2:20
Button: Submit and Reset
2:32
Radio
3:37
Checkbox
4:00
Select Menu
4:05
Textarea
4:28
Various Input Types
4:38
Example: Basic Controls of Form Element
7:05
Example: Buttons
18:20
Example: Additional Controls
20:56
Example: Special Input Types
27:55
Example: Date and Time Control
33:40
Example: Create Your Own Control
37:32
Example: Placeholder Text
39:10
Example: Datalist
41:43
Example: Sizing and Input Containment
42:16
Example: Select Modification
42:51
Example: Required Attribute
44:41
Links

36m 41s

Intro
0:00
URIs and URLs
0:23
Definitions of URL and URI
0:36
Differences Between URL and URI
0:42
Example: URI and URL
1:14
Typical URI Construction
2:33
Domain and Subdomain
2:34
Protocol
4:18
IP Address
5:05
Typical URI Construction
5:32
Second Level Domain
5:33
Port
6:07
Foldernames
6:46
Typical URI Construction
8:06
Filename and File Extension
8:08
Typical URI Construction
10:38
Name/ Value Pairs
10:40
Internal Anchors
11:45
Typical URI Construction
12:30
Example: URI Construction
12:31
Relative and Absolute URIs
14:20
Relative and Absolute URIs
14:22
Example: Relative and Absolute URIs
18:32
Link States
24:15
Link States
24:16
Example: Link States
25:18
Block Level Links
27:02
Example: Block Level Links
27:03
Bookmark Links
29:18
Bookmark Links
29:20
Example: Bookmark Links
30:15
Attributes
32:06
href and target
32:20
rel, media, hreflang, and type
33:18
Embedded Content

46m 5s

Intro
0:00
Embedding Image
0:22
Embedding an Image
0:25
Image File Formats
3:38
Image Format: Jpg
3:42
Image Format: Png
4:13
Image Format: Gif
4:40
Compression
6:05
Image Format: Precise Lines and Fewer Colors
8:38
Animated Gif
10:49
Alpha Transparency Png
11:09
Embedding Audio
12:52
Old Way of Embedding Audio
13:00
New Way of Embedding Audio
14:54
Example: Adding Buttons
20:04
Message for Users
26:36
Audio Attributes
27:46
Control
28:29
Autoplay
28:44
Loop
29:36
Preload
30:40
Embedding Video
32:00
Embedding Video
32:11
Controls
34:22
Poster Attributes
36:01
Video Formats
37:36
Solving Formatting Problem
39:26
The Canvas Element

19m 25s

Intro
0:00
Creating the Element
0:38
What is the Canvas Element?
0:39
HTML and Canvas Element
1:48
Example: Canvas Element
3:23
Creating the Canvas in JavaScript
5:13
getContext() Method
5:17
Checking Browser Support with the getContext() Method
6:00
Example: Creating the Canvas in JavaScript
7:31
Drawing in the Canvas
10:13
Methods for Drawing in the Canvas
10:14
2d Context
10:58
Example: Creating Drawing in the Canvas
11:39
Example: Adding an Image and Texts
15:30
Example: Advance Canvas Element
17:31
Content Models

29m 8s

Intro
0:00
The HTML 4.01 Content Model
0:16
Block Elements and Inline Elements
0:18
Example: Block Elements and Inline Elements
1:18
W3C Markup Validation Service
3:28
The HTML5 Content Model
6:21
Overview of HTML5 New Content Categories
6:22
Flow Content
8:02
Specification for Content Models
8:05
Flow Content
9:41
Example: Flow Content Elements
10:40
List of Flow Content
11:35
BlockQuote Element
11:50
Sectioning Content
13:19
Introduction to Sectioning Content
13:20
Heading Content
14:06
Heading Content and hgroup Element
14:07
Phrasing Content
16:56
Attributes of Phrasing Content
16:57
Anchor Element in Phrasing Content
17:28
Embedded Content
19:33
Attributes of Embedded Content
19:34
No Content
19:53
Transparent Content
20:38
Source Elements and Param Elements
21:15
Interactive Content
24:16
Interactive Content Elements
24:17
Button Element
25:57
The DOM

13m 10s

Intro
0:00
The DOM
0:26
Document Object Model
0:27
The DOM Tree
0:55
DOM Trees
0:56
Example: DOM Tree
1:31
Vocabulary: Tree, Node,Branch, Parent, Child
2:15
Exploring the DOM
3:13
Example: Built-in Browser Inspection and Firebug
3:15
Example: Manually Exploring the DOM
6:01
JavaScript
7:28
DOM Navigation Techniques
7:55
DOM Navigation Techniques
7:56
Favicons

13m 14s

Intro
0:00
Favorite Icons
0:08
Function of Favorite Icons
0:09
Bowser Support
1:10
Browser Support
1:13
Location in Browsers
1:46
Implementation Methods
2:04
Implementation Methods for Favorite Icons
2:05
Favicon and Apple Mobile Devices
4:51
Creating the Icon
6:13
How to Create the Icon
6:14
Favicon Resources
9:10
Websites for Icon Creation and Conversion
9:11
Programs for Icon Creation and Conversion
11:50
Embedding Flash and Other Objects

15m 7s

Intro
0:00
Flash and other Plug-ins
0:41
Main Problems with Flash
0:44
Benefits of Flash
2:02
Embedding Flash: the Old Way
2:57
The Old Way to Embed Flash
2:58
Embedding Flash: the Satay Method
6:42
Satay Method
6:43
Embedding Flash: HTML5
9:28
How to Embed Flash in HTML5
9:29
Embedding Flash Directly in <video>
11:39
Embedding Flash Directly in Video Element
11:40
Review of Embedding
13:24
Image Elements
13:39
Video, Audio, and Canvas Elements
13:44
Embed Elements
13:53
Object Elements
14:04
Offline Cache

19m 53s

Intro
0:00
Purpose
0:47
Purpose of Offline Cache
0:48
The Appache
2:06
Attributes of Appcache
2:07
The Manifest File
3:22
Manifest File
3:23
Example of Manifest
3:32
Section Headers: Cache, Fallback, and Network
4:21
Server-Side Considerations
5:17
text/cache-manifest MIME-type
5:18
Other Server-Side Considerations
5:41
ExpiresActive On and ExpiresDefault 'access'
6:07
Example: Offline Cache 1
7:44
Example: Overwriting Files
11:09
Example: Wild Cards for Network
14:58
Example: Offline Cache 2
16:06
Web Development Principles

26m 47s

Intro
0:00
Interoperability
0:36
Interoperability of Web Development
0:37
Interoperable Websites Should Work
3:05
Qualities of Interoperable Websites
3:06
Backward Compatibility
5:52
Compatibility With Older Technology
5:53
Example: Meta Tag
9:07
Forward Compatibility
9:33
Advancement in Technology
9:34
Accessibility
10:11
Accessibility of Content
10:12
Semantic Code
11:43
Example: Where Will This Link Take You?
13:56
Graceful Degradation
14:59
Graceful Degradation or Fault Tolerance
15:00
Types of Degradation
16:35
Progressive Enhancement
18:36
Progressive Enhancement
18:37
Future Detection and Browser Sniffing
21:05
Future Detection Versus Browser Sniffing
21:06
Example: Email Input Type
23:39
Tim Berners-Lee's Quote
26:20
Loading...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of HTML
Bookmark & Share Embed

Share this knowledge with your friends!

Copy & Paste this embed code into your website’s HTML

Please ensure that your website editor is in text mode when you paste the code.
(In Wordpress, the mode button is on the top right corner.)
  ×
  • - Allow users to view the embedded video in full-size.
Since this lesson is not free, only the preview will appear on your website.
  • Discussion

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Services

Lecture Comments (4)

0 answers

Post by hannah rafiq on October 22, 2012

why you didnot render it ;(

2 answers

Last reply by: Jorge Guerrero
Sat Mar 17, 2012 3:06 PM

Post by Chad Reeves on January 11, 2012

Dostoyevsky did not write "war and Peace." Leo Tolstoy did:)

Text-Level Semantics

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Text Level Semantics 0:06
    • Paragraph Level
  • The <a> Element 2:23
    • Definition of the <a> Element
  • The <em> Element 3:25
    • Definition of the <em> Element
  • The <strong> Element 6:50
    • The <strong> Element
  • The <small> Element 8:35
    • The <small> Element
    • Example of <small> Element
  • The <cite> Element 10:55
    • The <cite> Element
    • Example of <cite> Element
  • The <q> Element 12:45
    • The <q> Element
    • Example of <q> Element
  • The <abbr> Element 15:35
    • The <abbr> Element
    • Example of <abbr> Element
  • The <dfn> Element 17:03
    • The <dfn> Element
    • Example of <dfn> Element
  • The <time> Element 19:11
    • The <time> Element and Example
  • The <code> Element 21:18
    • The <code> Element
    • Example of <code> Element
  • The <sub> and <sup> Elements 23:31
    • The <sub> and <sup> Elements
    • Example of <sub> and <sup> Elements
  • The <i> Element 24:51
    • The <i> Element and Example
  • The <b> Element 27:16
    • The <b> Element
    • Example of <b> Element

Transcription: Text-Level Semantics

Welcome back to Educator.com.0000

We are going to look, in this lesson, at the text-level semantics.0002

The text-level semantics are basically the HTML elements that you have on the paragraph level.0008

This is very similar to what you might be doing if you are working with a very basic word processor, like Microsoft Word,0016

or even something more simple, like WordPad on Windows, and you are marking up italics and bold and things like that.0024

However, the difference is that HTML is a semantic markup language, not a presentational markup language.0033

In a word processor, the primary importance is the way that it looks.0041

You are taking the content of your word processor document, and making it look (with line breaks and bolds and italics and all these different things)...0047

And then, you are usually just going to print it, or send the file to someone who is going to open it up and view it.0058

With HTML, you have pages that are going out into the Internet, and they are being read by a lot of different applications--0064

yes, some people, but also some programs--web crawlers and people using different browsers, user agents...0073

There are a lot of different things that need to be able to understand it, and so the semantics become very important,0081

because the computer software can't understand what the text is, unless it is semantically marked up properly.0088

When I am going through these text-level semantic elements, you won't hear me, very often, saying something like,0101

"This tag makes it look this way," unless I slip up, just out of a bad habit.0109

What you will hear me saying is, instead, "This tag denotes that this content means this."0113

And that is the important thing to keep in mind for all of HTML, but especially going through this,0121

because the temptation is to use a tag that makes it look the way you want it to.0127

That is what CSS is for; the text-level HTML semantics are to mark up the content to indicate what it means, properly.0131

OK, the first semantic text-level element is the anchor element, the a element.0146

And I am not going to go too much in detail on this, because there is a whole lesson that goes more in-depth.0153

But this is, word-for-word, the definition in the HTML5 specification:0158

"If the a element has an href attribute, then it represents a hyperlink;0166

and if it has no href attribute, then the element represents a placeholder0171

where a link might otherwise have been placed, if it had not been relevant."0175

The anchor element has two meanings, based on whether or not it has this attribute here.0180

And it basically just either means that it is a link, or it indicates that a link could go there, even if there is not one.0188

And I will let you look at the anchor lesson if you are wanting to learn more about links.0196

The em element--I will just read the w3 specification definition.0207

"The em element represents stress emphasis of its contents," so it just means it is emphasized, basically.0215

And this emphasis is different than just italics or strong, because the em tag actually changes the meaning of the sentence, based on where it is placed.0225

If you have a sentence, and you emphasize the first word, and then you emphasize the last word--0242

so "I am looking at you" or "I am looking at you"--they have slightly different meanings, based on how you emphasize it.0246

This becomes very important for, say, a screen reader where a blind person is listening to this text be read out.0254

If you are using the em tag properly, they will be able to understand the meaning of the sentences better.0261

You can nest multiple em elements in order to make the stress more and more emphasized.0268

This is especially useful if you have, say, a paragraph where maybe a whole sentence is emphasized;0275

and then, within that sentence, you have a word that is particularly emphasized.0281

Because they can nest, you can use a second set of em tags--put another em element inside the first one and emphasize that word.0286

And it will be doubly emphasized; and you can keep doing that.0295

One thing to note about the em element is that some people have the idea that the old way of doing things was to use the i tag,0300

which people thought of as the italics tag; and the new way of doing things is the em tag, which is the emphasize tag.0309

That is actually not correct: the i tag used to mean italics, and that was just bad semantics, because it is presentational instead of semantic.0315

And the em tag is semantic--so in that sense, yes, the em tag is good and the i tag was bad.0328

However, if you just go through and replace all of your i tags with em tags, you are kind of missing the point.0334

And you are still using it not-semantically-correctly, because the em tag only needs to be used0340

in places where you are emphasizing, not just in places where you are italicizing.0346

So, if you use an em tag like an italics tag, then your text is not semantically marked up.0351

Now, also, the italics tag is not the italics tag; it is the i tag.0359

But people who have learned it the old way think of it as the italics tag.0366

But the i tag has been redefined in the HTML5 specification to have a more semantic meaning; and we will get to that later.0369

For example, WordPress, if you type the i tag in, when it saves it and presents it, will automatically convert it to the em tag.0379

That is not correct, because sometimes the i tag actually is the appropriate semantic tag to use.0388

And if you just automatically change it over to the em tag, then you don't have semantic markup.0394

But actually, it is probably good that WordPress does this, because for the most part, when people use the i tag, they usually mean "emphasized."0400

OK, the strong element--I will read the w3c specification definition--this is it, word-for-word.0411

"The strong element represents strong importance for its content.0418

The strong element does not change the meaning of its contents, as opposed to the em tag, which does."0422

And lastly, you can nest strong elements, just like you can nest em.0427

An example of this might be if you have something that says, "Danger: do not click on this link," or something like that0436

where the word "Danger" is important; it is not emphasized--it needs to stand out, but it is not going to change the meaning of the sentence.0443

If the strong tag is not there, it still means the same thing; it just doesn't get marked up as important if you don't have the strong tag there.0456

If you put the strong tag somewhere else, it is a different word that is important.0464

And I am not going to show you this in a browser, because I want you to be thinking about it semantically, not presentationally.0467

So, I could open up a browser and put a strong tag around some text and show you what it does;0475

but then, you might be thinking in your head, "strong element makes things bold."0479

And that is not what the strong element does.0484

A strong element is not a replacement for the bold tag.0487

And we have a similar thing going on between strong and bold as what I described between the em tag and the i tag.0491

The strong tag is not the new semantic version of the bold tag.0500

It has its own semantic meaning, and the bold tag (I should say the b tag, because that doesn't mean bold)0503

has its own new semantic meaning that they have recently defined.0511

OK, and the small element represents side comments, such as small print.0516

So, this is like fine-print types of stuff.0521

Some examples would be legal disclaimers, caveats, legal restrictions, copyrights, attribution,0526

or if you need to satisfy some licensing requirement--maybe even something like putting a little trademark,0531

or something that is not the main point of what you are trying to convey in the content, but it needs to be there.0537

It is less important--well, it is not necessarily less important; it is just sort of tangential, and it is off-to-the-side to the main thing that you are writing about.0546

So, what that means is that it is really only appropriate for small sections of text.0558

You might think, "OK, small means fine print, so if I have a document that is a big legal document that we need to read--0567

that is the fine print; just use the small tag and mark up the whole page as small."0576

That is not quite the right use there, because the whole page is the main point.0581

If that is the main thing on that page, then it is not an aside; that is the whole thing.0587

Or say you have something like, at the bottom of your page, a lot of footers;0594

you have contact information for how to contact the person that maintains the website and is responsible for the content there.0598

It is kind of a fine-print sort of thing, but better tags to use for that would be the footer tag and the aside tag, because small is really only for an aside.0606

So, here is an example here: I have a paragraph, "Educator.com is the best website on the Internet!"0619

And then, because I am being honest, I am going to give a full disclosure here that Educator paid me to say that.0625

I might be influenced by the fact that I got paid a little bit, right?0634

So, this is what the small element would be used for.0638

It is kind of a legal disclaimer that goes right after something, and it is not...0642

again, it doesn't mean that it is smaller; it is not a presentational thing--it is a meaning thing.0648

The cite element is pretty easily confused, actually, because it sounds like what you would write in an academic paper for your citation.0656

But the real meaning of it for HTML is actually this: the cite element represents the title of a work0666

that is either being quoted or referenced in detail, or mentioned in passing.0673

So, this is the key part right here--"the title of a work."0676

The cite element is not a citation, and it is not that you have quoted something, and then you are putting the name of the person that said it.0683

In fact, the specification clearly states that a person's name is not a work.0693

So, you can't use the cite element to put a person's name, if you are quoting them.0697

But you will use the cite element in a lot of other random cases.0704

Here are a bunch of examples: a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture,0710

a painting, theater production, play, opera, musical, exhibition, legal case report...a lot of things.0719

Sculpture stands out in my mind as a good example, because, say, you have Michelangelo's David.0728

Is it Michelangelo that made that, or was it someone else?0735

But the title of this work is David, right? And it is a sculpture.0739

You wouldn't put the name of the guy who built it; you would put the title of the work.0745

So, here is a little example: "Have you read <cite>War and Peace</cite> by Dostoyevsky?"0752

Notice, his name is not in the cite tag, but the title of the work is.0756

The q element (q would be short for quotation) represents some phrasing content quoted from another source.0767

And on the Internet, that is often going to mean you are quoting from another web page.0775

But it can mean just any other source.0781

Now, there was a bit of debate, earlier on, whether or not the browser should be required to add the quotation marks in for a q tag.0784

And they ended up resolving that argument; now, the browser will put quotation marks in.0794

So, when using the q element, do not put quotes in manually; the q element will put the quotes in for you.0800

And this is a typo here; ignore that--that is from the previous slide.0808

Here is an example--a bit convoluted, but it is important that I have done it this way, because I am talking about the text-level semantics page.0815

So, I am using the cite tag, because I am talking about the title of a work.0826

The work is this page in the w3 website.0832

And I am saying, "This page defines the q element as" and then this is the quotation: <q>some phrasing content quoted from another source</q>.0838

That is actually word-for-word from up here, which is from this page, right?0845

And I have this cite attribute in the q element, which is the reference to where you can find this quote.0851

OK, so it is very convenient when it is a web page, because you are quoting this text from this web page;0862

and you can put the cite right here and cite the exact location.0868

And then, it is different than the cite element right here, which is the title of the work.0873

But in the q element, the cite element means the location of where the quote is coming from.0880

And then, this is just a code element, which I will talk about in a slide or two.0890

When this gets rendered, the browser is going to put quotes in, and you will just see...0897

Probably, actually, it won't even necessarily change the look of this or this too much.0901

Maybe it will make this look italic or something.0908

But again, that depends on the browser; if it is being spoken by a screen reader, it might it say it in a different way,0911

or put a little bit of a "note: a header" behind this.0920

But again, don't put little quotes in here, like this.0926

You might be tempted to put quotes in, because it is a quote; but the q element will do that for you.0929

The abbr element, for abbreviation: this is another one of those elements that is the resolution to a long-standing debate about...0937

There is the abbr element for abbreviations, and then the other type is acronyms.0949

And there is a difference between an abbreviation and an acronym.0962

And there used to be an acronym tag; and so, there was a lot of debate about things that fell in between both of them,0965

and whether or not you should use both the abbreviation tag and the acronym tag,0972

and whether you could just use one or the other.0976

And they ended up solving the debate by just saying, "OK, all acronyms are also abbreviations."0978

"So, get rid of the acronym tag, and just use the abbreviation element."0983

So, we don't have an acronym tag anymore; we just have the abbreviation element.0987

And if you have an acronym or abbreviation, always use this element.0991

The abbreviation element represents an abbreviation or acronym, optionally with its expansion.0995

So, this is how you would do the expansion: you give it a title, and then you expand the abbreviation or acronym.1001

In this case, it is an acronym and abbreviation, and you have the expansion--the full thing.1008

If I have a word that is just shortened, I can put the full word in here.1014

And that is that.1020

The dfn element is for definitions, and the dfn element represents the defining instance of a term.1024

So, this is usually when you are...say, you have a manual of some kind; and the first time...1032

You will see this if you ever read contracts, too.1040

It will define its terms before it continues on.1044

And then, after it has defined the term, it will use those terms again, throughout the rest of the document.1047

And it is understood that it has already been defined at the beginning, and it is using that same definition for that word.1052

So, they will say something like...say if you are getting hired at a company, it might say,1058

"The name of the company" (long official name), and then it will say "hereafter 'us'" or "'the company'" or whatever.1066

And then, whenever you see "the company," you know that it means that whole, long, official-sounding title,1073

with Incorporated and all of the other legal stuff that is needed in there.1079

And you can do that sort of thing with the definition element, because you have the defining instance of the term.1082

The first time that you are defining it, you use this dfn element around the term that is being defined.1089

And then, in that same sentence, you need to define it.1097

So, you can't just use the word the first time, and use the dfn element, and then not define it right there.1100

You have to define it right there.1105

And then, you can give it a title, which has the definition in there, as well.1107

But then, you can give it a name; and later on, in the web page, you can have terms that link back up to this definition and the defining element.1115

So, if you didn't necessarily read the first defining instance of the term, and you are going through and you come across that word,1127

you can hover over it, or (depending on how the browser is implemented) it will either maybe just pop it up right there,1133

as a float tip, or send you back up to the top so you can read it.1139

And it is also semantic; so there are a lot of different ways that it can be implemented, depending on the user agent.1142

The time element is important, because it is very difficult to get a computer to understand the way that normal people talk about time.1152

I might say something like "October 20th," and if I need a computer or an application or a program to understand1165

what I mean by that, it is going to take a lot of processing power to compute what this really means,1173

because computers use a specific way of arranging it: it is usually yyyy/mm/dd, etc.1182

So, the time element represents either a time on a 24-hour clock or a precise date in the Gregorian calendar.1192

We have to specify, because again, this is the Internet, and it is going to apply to the entire world.1201

There are people that are potentially using different calendars.1208

And it optionally has a time and a time zone offset; this example doesn't have a time zone.1212

But it is just the time tag here; and you surround the actual time or date that you are talking about.1219

Don't let time confuse you, so that you just only think it applies to times (like hours and minutes).1227

It applies to all dates, basically, because the way computers think about time is the number of (I think) milliseconds since this moment in 1971 or 1970.1232

And it just counts them up that way; so this actually makes sense for the way computers think about time,1245

because it is just the number of seconds since this time in the 1970's.1251

And this will put it in a format that it can really understand.1256

You have October 20th, and then you actually have the computer understanding laid out here,1261

so that, if your website needs to interact with this time, it can do so very easily, without having to parse through all this.1265

datetime is the attribute where you put that in, and it is pretty simple.1274

OK, the code element is very useful, especially if you are describing code on a website,1280

which happens quite frequently, especially in teaching websites--but also just any time you are referencing code--any kind of code.1287

The code element represents a fragment of computer code.1296

It could be an XML element name, a file name, a computer program, or any other string that a computer would recognize.1299

A string just means if you string together a bunch of characters.1305

It is really a variable type (that is where it comes from), as opposed to a number or some other type of variable.1312

It just means that a string of text characters, like all of this--this is a string--1321

so, any string of computer code that a computer would recognize.1328

And it is nice, because it usually will render it in a monospaced font, so that it aligns properly, with indentation and all that.1335

But it also makes it stand out.1347

For example, this word right here--in the slide, I have prepared it so that it has a different font, and it is blue.1349

And I had to do that manually; but if this was HTML, I could have used the code element,1358

and then taken CSS to make it look the way I wanted it to,1363

because then it is clear, as you are reading this, that this is not just me talking about using the word code;1367

but I am talking about a piece of code--an actual fragment of computer code.1374

And so, here is a little example: strong is a tag we talked about a bit earlier.1382

And if we didn't mark it out as code, we might be a little bit confused about what this sentence is saying.1388

The strong element? Why is this element strong, and what are the weak elements?1396

That is confusing; but because it is marked as code, it is clear that it is the element--the actual computer code element, strong.1400

The sub and sup elements, for subscript and superscript, are easily just subscript and superscript; that is it.1413

It is kind of presentational-sounding, but there is some semantic meaning there, as well.1426

And it is important, for example, to indicate, in something like a date like this, like the 10th of May:1435

you have the th; the computer needs to know that that is this special way of writing it.1442

And it is going to render it smaller and up a little bit.1452

And then, it is going to be able to deal with it the right way.1455

And it may actually even help computers in trying to process the meaning of it.1457

When it sees a number, and then a superscripted th right after it, that is going to indicate to it that it is probably meaning tenth, right?1461

So, computers can still use this data semantically.1470

And then, this is another typo; this should be sub, with a b, like that; erase that...there.1473

Don't spill the H2O; the 2 is down below--simple.1486

OK, and finally, we get to the i element, which does have a place.1492

It is not deprecated; it is not removed from the HTML5 specification.1498

It has a new semantic meaning from in the HTML4.01 specification, and this is it.1504

The i element represents a span of text in an alternate voice or mood, or otherwise offset from normal prose.1508

Very vague, but it took a lot of time to come up with this definition, because there is a need for the i element.1517

And so, first of all, it is a span of text: so, it is just a string, you could say.1527

It is a piece of text; and you could have other elements inside of it, of course.1534

But it is in an alternate voice or mood.1539

It is always helpful to think of semantics when you are imagining a browser for the blind that will read it.1543

An alternate voice or mood is going to be read differently than just normal.1552

It doesn't necessarily mean something specific, but there is a difference that needs to be communicated.1558

And there are a lot of examples here: a taxonomic designation, a technical term, an idiomatic phrase from another language1567

(like a priori, a philosophy term), a thought, a ship name, or some other prose whose typical typographic presentation is italicized.1575

It is kind of a hodgepodge of different things joined together.1584

But there are a lot of random, disconnected places where you need italics.1588

This is going to take some thought as you are marking things up semantically.1596

The ship name is probably the simplest one.1600

You might be tempted to use the cite tag for a ship name, because it is kind of like the title of a work (the 'title' of a boat).1604

But a boat is not a work, really (unless it is submitted at an art exhibit).1612

But here, it has the italics; when you see it in print, it is usually marked up in italics.1618

That is a good hint that it will be italicized here--but again, not if it is italicized because it is emphasized.1626

And the b element used to be, really, the bold element.1637

It is not the bold element anymore; it is more of, say, the keywords element.1642

But we still have the b, for historical reasons.1647

The b element represents a span of text to be stylistically offset from the normal prose, without conveying any extra importance.1651

The important part of this definition is that it is stylistically offset from the normal prose.1659

and that it doesn't convey..."without conveying any extra importance."1665

So, this is kind of presentational, but it does have a semantic meaning, again,1672

because "stylistically offset" sounds presentational, but it is still something that needs to show up differently--1676

and you don't really have any other elements that would work well for that.1683

When you are considering using a b or an i tag, first think through all of the other text-level semantic elements1692

and see if any of those fit; and if it still doesn't fit into any of those, then you may be a good candidate for the b or the i tag.1701

Some examples for use of the b tag would be keywords in a document abstract1711

(you will see it in a lot of textbooks--the important terms are bolded); product names in review;1717

other spans of text whose typical typographic presentation is boldened.1724

They are using this catch-all language again, of just kind of allowing anything that would normally be bolded,1728

just because of what it is--not based on its emphasis, but because of what it is.1734

That is the sort of thing that you would bold.1741

It is very vague, but put some thought into it, and you will be able to use it appropriately.1742

Here is a little example: this is from if you had one of those old-school text games,1748

where you type what to do and it tells you where you are--describes it.1755

And then, it might say something like, "You enter a small room. Your sword glows brighter. A rat scurries past the corner wall."1761

And in the game, sword and rat would typically be typographically boldened,1768

because you need to know that these are items that you can use in the game.1778

So, you can say something like "use sword" or whatever.1784

So, that is a good candidate for the bold...or, sorry, the b tag.1788

None of the other semantic elements would work in this case; it is more of a keyword sort of thing.1795

That is all of the really important semantic elements that you will be using most of the time.1800

And that is also the end of this lesson.1809

Thanks a lot for watching Educator.com.1811

Educator®

Please sign in to participate in this lecture discussion.

Resetting Your Password?
OR

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Membership Overview

  • Available 24/7. Unlimited Access to Our Entire Library.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lecture slides for taking notes.
  • Track your course viewing progress.
  • Accessible anytime, anywhere with our Android and iOS apps.