Welcome!

Think Labs is an ongoing effort by Seven2 to provide research and educational opportunities in the web development and mobile field. To see what we’ve been cookin’ up, check out our blog postings.

Created by
Seven2 Login

Categories
Tags
Team Think Labs | HTML5 Semantics: Code more better!
1555
single,single-post,postid-1555,single-format-standard,ajax_fade,page_not_loaded,,,wpb-js-composer js-comp-ver-4.2.3,vc_responsive
html5semantics

HTML5 Semantics: Code more better!

HTML5 is changing the landscape of the web by introducing new specifications that will change the way we work. While not finalized yet there are things that you can use in your sites and applications today. However, we wouldn’t want you to use them incorrectly. So let’s get to demystifying how this stuff works.

  1. HTML5 has new tags for us to use.
  2. These new tags are meant to improve the ‘meaning’ of your code making them more easily readable by search engines AND humans too.
  3. <divs> are not bad. They’re still around. Continue to use them.

If you’re writing things like:

<div id=”header”> … </div>
<div class=”nav”> … </div>
<div class=”section”> … </div>

You can use these new tags to do much the same thing:

<header> … </header>
<nav> … </nav>
<section> … </section>

 

First and foremost. <divs> are for styling. They’re not semantic, they provide no meaning in your code. These new elements are meant to make your HTML code more logical and readable ( by humans and search engines ) and NOT as complete replacements for <divs>.

 

<divs>
This element still exists. It’s not bad. Use it. It should be used for content for styling and things you need generic containers for. It’s has no semantic meaning.

 

<section>
The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a heading. – From the W3C

A <section> is another generic element. It typically has a heading / title to it but can go with out it. Some good uses for a section would be defining a portion of a long article or major part of a page like a tabbed interface. Sections can contain sections within them. Section Inception!

 

<article>
The article element represents a self-contained composition in a page, application, or site and that is independently distributable or reusable, e.g. in syndication. – From the W3C

Appropriate uses would be something like a blog post, news article, or anything that could be syndicated. This section should be stand alone. You should be able to rip it out of the web page, give it to your grandma, and she should completely understand it with out context of the rest of the page. What does syndication mean? Something that can be redistributed across the internet. Blog articles, news articles, content that can be distributed should be wrapped in an article tag. The contact page on your website should not. <article> tags can contain <section> and <header> tags as well.

 

When do I use these confusing things?
 To decide which of these three elements is appropriate, choose the first suitable option:

  1. Would the enclosed content would make sense on it’s own in a feed reader? If so use <article>
  2. Is the enclosed content related to its parent. If so use <section>
  3. Finally if there’s no semantic relationship use <div>

Some other somewhat more self explanatory semantic elements.

 

<header>
a group of introductory or navigational aids. A header element typically contains the section’s heading (an h1–h6 element or an hgroup element), but can also contain other content, such as a table of contents, a search form, or any relevant logos. – From the W3C

Use a <header> when you need to define the heading of a page / article / section etc. It should support the content around it.

 

<nav>
Used for site navigation or ‘major navigation blocks’. You wouldn’t use this in your page content to list out a list of external links on your site. You can use this element in your <header> tags.

 

<aside>
A sectioning element that contains information tangentially related to, but separate from the surrounding content. Content that can help with, but is non-essential to understanding the main content. You would use this for a pull quote, or sidebar within some content that contains related content, but not vital information.

 

<figure>
This content IS essential in understanding the copy around it but the placement of the data inside of the figure ( images, diagrams, tables ) is not. So if you have a supporting graphic, or some data that supports your article, throw it in a <figure>. You can also include a <figcaption> element in your figure to provide a description of what you’re showing.

 

<footer>
Another sectioning element that would contain footnotes style data, such as a list of supporting links or copyright data.

 

<!DOCTYPE html>
<html lang=\\\\\\"en\\\\\\">
	<head>
		<title>Example!</title>
	</head>
	<body>

		<header>
			<h1>Transportation</h1>
			<nav>
				<ul>
					<li><a href=\\\\\\"#motorcars\\\\\\">Motorcars</a></li>
					<li><a href=\\\\\\"#flying-machines\\\\\\">Flying Machines</a></li>
					<li><a href=\\\\\\"#teleportation\\\\\\">Teleportation</a></li>
				</ul>
			</nav>
		</header>

		<section id=\\\\\\"main\\\\\\">

			<article id=\\\\\\"motorcars\\\\\\">
				<header>
					<h1>Motorcars</h1>
					<img src=\\\\\\"motorcars.jpg\\\\\\" alt=\\\\\\"A motorcar.\\\\\\" />
				</header>
				<p>The first working steam-powered motorcar was … </p>
				<aside>
					<h2>Types of Motorcars</h2>
					<ul>
						<li>Fancy</li>
						<li>Snazzy</li>
						<li>Good</li>
						<li>Cheap</li>
					</ul>
				</aside>
				<p>Most motorcars are designed … </p>
			</article>

			<article id=\\\\\\"flying-machines\\\\\\">
				<h1>Flying Machines</h1>
				<p>Fly in the air by magic … </p>
				<figure>
					<table>
						<thead>
							<tr>
								<td>Magic Used</td>
								<td>Effectiveness</td>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>Black Magic</td>
								<td>Good.</td>
							</tr>
							<tr>
								<td>Sorcery</td>
								<td>Better.</td>
							</tr>
							<tr>
								<td>Unicorn Magic</td>
								<td>Best.</td>
							</tr>
							<tr>
								<td>Harry Potter Spells</td>
								<td>Do not work.</td>
							</tr>
						</tbody>
					</table>
					<figcaption>
						Types of magic and effectiveness used in flying machines.
					</figcaption>
				</figure>
			</article>

			<article id=\\\\\\"teleportation\\\\\\">
				<h1>Teleporting!</h1>
				<p>Does not exist. Don\\\\\\'t be ridiculous.</p>
			</article>

		</section>

		<aside class=\\\\\\"sidebar\\\\\\">
			<section>
				<h2>Links</h2>
			</section>

			<section>
				<h2>Gallery</h2>
			</section>
		</aside>

		<footer>
			Copyright Information / Footer Data
		</footer>

	</body>
</html>