Summary
In this section we will cover:
- What is "Semantic" markup
- Elements that have been added
- Elements that have been changed
- Elements that have been deprecated
New Semantic Markup
The DOCTYPE declaration for HTML5 is very simple:
<!DOCTYPE html>
Structural Elements
A complete list of structural elements are available at:
<!DOCTYPE html>
Structural Elements
A complete list of structural elements are available at:
A few important ones to review are:
<header> - Defines a header for the document or a section
<footer> - Defines a footer for the document or a section
<article> - Defines an article in the document
<section> - Defines a section in the document
<aside> - Defines content aside from the page content
<nav> - Defines navigation links in the document
<header>
Header typically is the first element on page
Header can be in sections as well
Code snippet:
<header>
<h1>The Matrix</h1>
<h2>Beyond Science Fiction</h2>
</header>
Header can be in sections as well
Code snippet:
<header>
<h1>The Matrix</h1>
<h2>Beyond Science Fiction</h2>
</header>
<header> & <footer>
Nearest ancestor sectioning content
Can be more than one per page
Contains:
Nearest ancestor sectioning content
Can be more than one per page
Contains:
- Info about the section
- Who wrote it
- Copyright
- etc.
<article>
Self-contained document,page etc
In theory, could be independently distributed
Self-contained document,page etc
In theory, could be independently distributed
Used for:
- Forum post
- Blog post
- Article
- Individual email
- Comments
<section>
Sections page into subject areas
Sections an article
Does not create a standalone document
Code Snippet
Sections page into subject areas
Sections an article
Does not create a standalone document
Code Snippet
<article>
<h1>The Matrix</h1>
<section>
<h2>The story</h2>
<p>a man discovers...</p>
</section>
<section>
<h2>The philosophy</h2>
<p>The underlying theory of the matrix is...</p>
</section>
<h1>The Matrix</h1>
<section>
<h2>The story</h2>
<p>a man discovers...</p>
</section>
<section>
<h2>The philosophy</h2>
<p>The underlying theory of the matrix is...</p>
</section>
</article>
<aside>
It is way of saying this is related-to but not part of the main flow
It is way of saying this is related-to but not part of the main flow
Used for
- Sidebars
- Nav sections
- Pull quotes
<nav>
Used to mark navigation sections
Used to mark navigation sections
"Primarily intended for sections that consist of major
navigation links"
Not used to mark:
- every link
- List of sponsored links
- search results
Additional Elements
<mark>
<mark>
used to highlight a section of text
"When used in the main prose of a document, indicates a part of the document that has been highlighted due to its likely relevance to the user's current activity"
<time>
used to provide unambiguous date/time in UTC format
Changed Elements
"When used in the main prose of a document, indicates a part of the document that has been highlighted due to its likely relevance to the user's current activity"
<time>
used to provide unambiguous date/time in UTC format
Changed Elements
We review few of the changed elements
- <address>
- <cite>
- <dl>
- <em>
- <hr>
- <ol>
- <s>
- <small>
- <strong>
- <u>
<address>
For contact details of the author not for postal addresses
New: multiple elements can be in one document - one for each <article>
Can be email,postal, or any other address
Code snippet
For contact details of the author not for postal addresses
New: multiple elements can be in one document - one for each <article>
Can be email,postal, or any other address
Code snippet
<address>
Jesse Liberty<br/>
@JesseLiberty<br/>
jesseliberty@gmail.com<br/>
</address>
<cite>
Technically,no longer used to mark up a name of speaker
Although its usage remains somewhat controversial
The<cite>Rev.Dr.MartinLutherKing,Jr.</cite>said,
"I have a dream"
Jesse Liberty<br/>
@JesseLiberty<br/>
jesseliberty@gmail.com<br/>
</address>
<cite>
Technically,no longer used to mark up a name of speaker
Although its usage remains somewhat controversial
The<cite>Rev.Dr.MartinLutherKing,Jr.</cite>said,
"I have a dream"
<dl>
Now expended to cover any name/value groups
<dl>
<dt>John Doe</dt>
<dd>Eric Maes</dd>
<dt>Frank Schwan</dt>
<dd>Liberty Manchesco</dd>
</dl>
<em> & <i>
Use <em> when you are subtly changing the meaning of a statement
Use <i> when you want a technical term, a ship name, a thought
or some other prose "whose typical typographic presentation is italicized"
"No, my <em>name</em> is "Liberty" but that is a <i>Liberty ship</i>
<hr>
Used to indicate a paragraph level thematic break
Used to create a horizontal rule
<ol>
You can now use start in the ol header
<ol start=5>
Reversed reverses the count
Note: Not yet implemented in any browser
<s>
Was used to indicate a strike through
Still used to indicate content that is:
Now expended to cover any name/value groups
<dl>
<dt>John Doe</dt>
<dd>Eric Maes</dd>
<dt>Frank Schwan</dt>
<dd>Liberty Manchesco</dd>
</dl>
<em> & <i>
Use <em> when you are subtly changing the meaning of a statement
Use <i> when you want a technical term, a ship name, a thought
or some other prose "whose typical typographic presentation is italicized"
"No, my <em>name</em> is "Liberty" but that is a <i>Liberty ship</i>
<hr>
Used to indicate a paragraph level thematic break
Used to create a horizontal rule
<ol>
You can now use start in the ol header
<ol start=5>
Reversed reverses the count
Note: Not yet implemented in any browser
<s>
Was used to indicate a strike through
Still used to indicate content that is:
- no longer accurate
- no longer relevant
<small>
no longer means make the print small
now used for "small print" in legal documents
<strong>
<strong> indicates importance
<b> indicates bold without indicating importance
no longer means make the print small
now used for "small print" in legal documents
<strong>
<strong> indicates importance
<b> indicates bold without indicating importance
