Notes from Code School's Front End Formation: Level 2
Section
The section element represents a generic document or application section. - W3C SpecificationThe definition of a section looks like the definition of a div: a generic container that conveys no meaning.
Section vs. Div
A div has no semantic meaning, but the section element does. Its used for grouping together thematically related content, or a grouping of related content that contains a natural heading.You might want to replace some of your div elements with section elements, but remember to always ask yourself, is all of the content related? - Jeremy Keith in "HTML for Web Designers"
 |
| A grouping of related content should use the <section> element instead of a generic <div> |
How to use section element:
<section>
<h2>The Gallery</h2>
<!-- ... -->
</section>
The Document Outline
The document outline produces an outline summary of an HTML document based on how it is marked up. The following elements have their own self-contained outline:
- article
- aside
- nav
- section
Example:
<h1>Title of a Page</h1>
<section>
<h2>Title of Sub-section</h2>
</section>
For the above code, the outline would look like this:
1. Title of a Page
1.1 Title of Sub-section
Because the document outline is self-contained within a section element, you can use the h1 tag inside the section and the overall document outline remains the same.
<h1>Title of a Page</h1>
<section>
<h1>Title of Sub-section</h1>
</section>
And the outline looks the same:
1. Title of a Page
1.1 Title of Sub-section
Note: how this affects SEO, I'm not sure. The usual is to expect only one h1 tag per page.
Header
A group of introductory or navigational aids - W3C SpecificationThere can be many different headers on the page, not just one at the top. The header usually appears at the top of a document or section, but is defined by its content rather than its position.
Example 1:
<header>
<!-- .... -->
</header>
Example 2:
<section>
<header>
<h1>Heading of Section</h1>
<p>Content of section</p>
</header>
<p>More content of section</p>
</section>
Footer
The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element - W3C SpecLike the header element, the footer element is not position-dependent. It should describe the content contained within.
Example 1:
<footer>
<!-- ... -->
</footer>
Example 2:
<section>
<header>
<h1>Heading of Section</h1>
<p>Content of section</p>
</header>
<p>More content of section</p>
<footer>
<p>by "Author Name"</p>
</footer>
</section>
Aside
Defined by the HTML5 Spec as being "tangentially related to the content surrounding it". It is not directly related to, but expands upon the content surrounding it. The aside now covers various contexts:
- When used within an article element, the aside contents should be related to that particular article it is contained within.
- When used outside an article element, the aside contents should be specifically related to the site. (closely resembles the definition of a sidebar of a site).
As aside element is appropriate when it is used to represent content that is not the primary focus of an article or page, but it is still related to that article or page.
 |
| a section of secondary content related to the whole is a good candidate for an aside |
Example 1:
<aside>
<!-- ... -->
</aside>
Example 2:
<section>
<header>
<h1>Heading of Section</h1>
<p> Content of header</p>
</header>
<p>Info inside of section</p>
<aside>
<p>Some secondary info.</p>
</aside>
<footer>
<p>By: "Author Name"</p>
</footer>
</section>
Nav
The nav element represents a section of a page that links to other pages or to parts within a page: the section with navigation links. - W3C SpecThe nav element is intended for major navigation.
Prior to HTML5, you might do this:
<ul class="nav">
<!-- ... -->
</ul>
HTML5:
<nav>
<ul>
<!-- ... -->
</ul>
</nav>
This makes it more meaningful and easy to read.
Article
The article element represents a complete or self-contained composition in a document, page, application, or site and that is in principle, independently distributable or reusable, e.g. in syndication. - W3C SpecThe article element is another type of section, it is used for self-contained and related content. To determine whether a particular section is "self-contained", ask yourself if you would syndicate the content in an RSS or Atom feed. Some uses for the article include:
- a blog post
- a news story
- a comment on a post
- a review
 |
| syndicated content like this gallery item is a good candidate for the article tag |
<div class="article">
<!-- ... -->
</div>
Example HTML5:
<article>
<!-- ... -->
</article>
Main
The main element represents the main content of the body of a document or application - W3C Spec- DO NOT include more than one <main> element on a document
- DO NOT include the <main> element inside of an article, aside, footer, header, or nav element.
 |
| main content of the document |
<div class="main">
<!-- ... -->
</div>
HTML5:
<main>
<!-- ... -->
</main>
Figure
The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be [removed] without affecting the documents meaning. - W3C SpecA common use case for figure is for an image within an article.
<figure>
<img src="image.jpg" alt="" />
</figure>
Fig[ure] Caption
The figcaption element represents a caption or legend for a figure -W3C Spec<figure>
<img src="image.jpg" alt="" />
<figcaption>This is a caption for the picture.</figcaption>
</figure>
Time
The time element represents either a time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time-zone offset. -W3C Spece.g.
<time>2013-09-16</time>
If you want to change the format to mm/dd/yyyy, use the datetime format to set the desired format:
<time datetime="2013-09-16">09/16/2013</time>
Without the datetime attribute, content must be a valid date, time, or precise datetime.
No comments:
Post a Comment