HTML5 Semantics
This sections discusses HTML5's elements semantic meaning and structure as well as the document outline and minor related side topics.HTML5 Start Off
Unlike HTML4, HTML5 can read documents without being case sensitive. Concluding that HTML4 is a little girl. ALthough HTML5 has balls, doing this does not follow best practices and makes for sloppy code.Another thing HTML5 does to show its balls is that it can read many elements without having a closing tag.
 |
| Mind Blown |
Empty elements, which are elements without content, also do not need to be closed. The '/' is totally optional. It is noted that if you want to really make sure that your document can be read by XML parsers, its probably safer to self close it with your friendly slanted line, but in HTML, it is pretty much redundant. Poor little break line tag :'(
Ok, some good news. HTML5 has a pretty damn simple doctype declaration (as follows):
<!doctype html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Why did I try to learn XHTML's doctypes.... Something wrong with me man (or girl? :O )..
The meta tag is another thing that HTML5 decided to help make my life better with.
HTML5's super happy friendly meta tag with its ultra sexy new attribute 'charset' to easily define character sets:
<meta charset="utf-8">against the grumpy long miserable HTML4's meta
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
The Content Model
 |
| Content Model Diagram |
The web specifications has a system called the content model that attempts to get developers to put the right content in its intentionally corresponding element. Aint nobody wanna see a paragraph of text in a <video> element O.o
Metadata Content
The metadata content contains information of relative documents and the presentation of the document.Flow Content
The flow content basically contains elements that fit within the normal flow of the document. This means that most of the elements that are placed within the body are part of the flow content. Although of course it is up to the developer to give the end result of how each element is displayed through CSS.Sectioning Content
Sectioning content defines the scope of the headers, footers and sections within a document. These are the elements that create the sections and give more semantic value to what is inside your mum the section.
Heading Content
Elements within the heading content pretty much define the headers in the document. These headers are the title type headers. Not the big graphical thingy at the top of the page and nothing to do with the header element.
Phrasing Content
Phrasing content contains the text of the document and other text related elements.
Embedded Content
Embedded content imports resources into a document. Plain and simps.
Interactive Content
Interactive content contains elements that the end user can interactive. Sometimes elements can be interactive depending on if certain attributes are present. So some elements are on the fence about whether they wanna join the interactive contents possy or not.
Sections
The following elements make new block level sections just as divs did, but these elements now have meaning. Most of them are within the sectioning content apart from the header, footer and div which are from the flow content.
Its up to the developer (or some other guy?) to decide which elements to use. It often goes down to a matter of opinion and you just judge it on your instinct and how you are feeling at that particular moment.
<Header>
Used for headers of element and the page itself. Its the big block thingy at the top that tells you what you are about to start looking at with a title or heading and some times a logo or a nav bar etc.<Nav>
Used for a fairly large list of links or navigation related stuff. If you can say to someone "oh thats just a part of the navigation", then it can go in here!<Section>
Used to group related content together. Making that content become a group of content. Yep...<Article>
Used for grouping independent yet related content, that can be re-distributed and make sense on its own. This is a big judgment call on your end. You will get sleepless nights with this if you are like me and spend 52 years trying to decide what to get for your meal deal. An example is a blog entry or a recipe on a website. Can be put anywhere and still be useful in some way.<Aside>
Used for content partially related to the content around it. It's commonly used as a side bar, but is not restricted to such a definition. It could also be used for a glossary of definitions or terminology used in an article or blog post. It's not directly about the content but it is related to it in some way.<Footer>
Used for the footer of the page. I know, didn't see that one coming O.oTypically contains author details, copyright information and related documents.
Document Outline
Browsers now parse documents differently, and the document outline is a big deal now a days. Its like web swag. its not... just thought I'd big it up a little..
The document outline is basically an appendix or contents page of your document. If the document outline can be read like an appendix of your page in the way you want, you have successfully created a well structured page!
The parsing algorithm starts with the body tag, outlining the section root. It then goes down element by element and looks for anything that will make a section in the outline. Heres the catch though bro, not only the sectioning elements make a section in the outline. Mind blown again? just scroll up and look at fin. I'm not putting another picture in -_-
The heading tags (h1 to h6) also create sections within the document outline. It's not actually creating a section but the document outline aint gonna listen. uh uh, no way!
But the headings are not our enemy here! They are just misunderstood.. When a heading tag is nested within a sectioning element, the document outline uses that heading as a name for that section. Heading are our best buddies now eh?! BUT! what if you have 2 best buddies?? a h1 and h2 in the body? Right lets do some case studies
<body>
<h1>Im the oldest heading</h1>
<h2>Im a slightly younger heading</h2>
<h2>Im the same age is you!</h2>
<h3>Im dislexic</h3>
<section>
<h4>Im the first child h4</h4>
<h2>Im older than the first child somehow</h2>
<h4>the 3rd h4</h4>
<h3>the 4th h3</h3>
</section>
</body>
- Im the oldest heading
- Im a slightly younger heading
- Im the same age is you!
- Im dislexic
- Im the first child h4
- Im older than the first child somehow
- the 3rd h4
- the 4th h3
In this case the first heading element the parser comes across wins and names the parent element (the body).
<body>
<h1>Im the oldest heading</h1>
<h2>Im a slightly younger heading</h2>
<h2>Im the same age is you!</h2>
<h3>Im dislexic</h3>
<section>
<h4>Im the first child h4</h4>
<h2>Im older than the first child somehow</h2>
<h4>the 3rd h4</h4>
<h3>the 4th h3</h3>
</section>
</body>
The first h2 then creates a subsection (because its not grouped, but we will get to that later) and nests itself as a new section.
<body>
<h1>Im the oldest heading</h1>
<h2>Im a slightly younger heading</h2>
<h2>Im the same age is you!</h2>
<h3>Im dislexic</h3>
<section>
<h4>Im the first child h4</h4>
<h2>Im older than the first child somehow</h2>
<h4>the 3rd h4</h4>
<h3>the 4th h3</h3>
</section>
</body>
The second h2 nests itself as a new section too, but on the same level as the first h2, because it has the same ranking.
<body>
<h1>Im the oldest heading</h1>
<h2>Im a slightly younger heading</h2>
<h2>Im the same age is you!</h2>
<h3>Im dislexic</h3>
<section>
<h4>Im the first child h4</h4>
<h2>Im older than the first child somehow</h2>
<h4>the 3rd h4</h4>
<h3>the 4th h3</h3>
</section>
</body>
The h3 nests itself as a 3rd ranking element because its
<body>
<h1>Im the oldest heading</h1>
<h2>Im a slightly younger heading</h2>
<h2>Im the same age is you!</h2>
<h3>Im dislexic</h3>
<section>
<h4>Im the first child h4</h4>
<h2>Im older than the first child somehow</h2>
<h4>the 3rd h4</h4>
<h3>the 4th h3</h3>
</section>
</body>
A new section is created using a sectioning element. The next heading element will name that section. This is the first h4 in the new section.
<body>
<h1>Im the oldest heading</h1>
<h2>Im a slightly younger heading</h2>
<h2>Im the same age is you!</h2>
<h3>Im dislexic</h3>
<section>
<h4>Im the first child h4</h4>
<h2>Im older than the first child somehow</h2>
<h4>the 3rd h4</h4>
<h3>the 4th h3</h3>
</section>
</body>
The second h2 in the section element is higher ranking than the heading of the section ("Im the first child h4"), therefore it gains an equal rank within the document outline. An equivalent (h4) or higher ranking element would also gain an equal rank in the outline. A lower ranking heading would have created a nested section in the outline.
<body>
<h1>Im the oldest heading</h1>
<h2>Im a slightly younger heading</h2>
<h2>Im the same age is you!</h2>
<h3>Im dislexic</h3>
<section>
<h4>Im the first child h4</h4>
<h2>Im older than the first child somehow</h2>
<h4>the 3rd h4</h4>
<h3>the 4th h3</h3>
</section>
</body>
Now the h2 is in consideration. Anything lower than a h2 is going to create a nested section in the outline. And therefore the h4 does just that.
<body>
<h1>Im the oldest heading</h1>
<h2>Im a slightly younger heading</h2>
<h2>Im the same age is you!</h2>
<h3>Im dislexic</h3>
<section>
<h4>Im the first child h4</h4>
<h2>Im older than the first child somehow</h2>
<h4>the 3rd h4</h4>
<h3>the 4th h3</h3>
</section>
</body>
The last h3 element follows the same rule as the second element in the section (the h2) and creates an equal level section.
<body>
<h1>Im the oldest heading</h1>
<h2>Im a slightly younger heading</h2>
<h2>Im the same age is you!</h2>
<h3>Im dislexic</h3>
<section>
<h4>Im the first child h4</h4>
<h2>Im older than the first child somehow</h2>
<h4>the 3rd h4</h4>
<h3>the 4th h3</h3>
</section>
</body>
The sectioning rules within the document outline can get confusing. If you are wondering what would happen if you nested a nest inside a nested nest and that chicken came back and was like "dude, what the hell are you doing to my nest?", you can check it out for yourself using this great document out lining tool. Just type your code in and see how the outline works.
<Hgroup>
Hgroup groups heading tags together. It does this so that things like taglines or a sub-heading or sub-title can be used, without creating another section within the document.If there are quite a few heading elements with different rankings in your group, the highest ranking heading will win when it comes to naming a section. This is regardless of the order they are in, as seen bellow.
<body>
<hgroup>
<h6>wow! I'm like... devolved!</h6>
<h1>I am the title!!</h1>
</hgroup>
<section><h1>And I am a subsection!</h1></section>
</body>
- I am the title!!
- And I am a subsection!
<Div>
Remember divs? of course you do! They are like the knife to a... knife guy!! But the horrible truth is. Divs have no meaning at all :'(
BUT! divs are still useful for maaaaany reason. Yeh they are semantically and socially inept, and you could think of them as a poor lonely element. OR you can see them as invisible ninjas! They can be used for stylistic purposes and in conjunction with scripts! And they cant be seen in the document outline. They don't create sections in the outline but they do group things together into a sort of section. Ninja elements I tell ya!!!
Summery
When creating sections and headings, these are the basic rules that you are expected to follow:
- Section Content elements are intended to make new sections.
- The first heading element will name the new section. It is encouraged that a h1 is used to name every new section.
- A h1 would name the body and other headings follow due to their importance.
- When a new section is created, a h1 should be used to name it and the hierarchy restarts within that section. like its isolated from the rest of the page.
- Another option widely used is to use the corresponding heading to the level of the nested section. For an example; a h1 for the body. For sections nested in the body, you use a h2. For sections nested within a section that is nested within the body, use a h3 etc.
- headings used after the header that names the section will create nested sections due to their rankings. It is better to wrap them in a sectioning element to clearly state its a section or group the headings together using a hgroup tag depending on what your aim is.
- Use sectioning root elements, when appropriate, to keep heading elements out of the document outline.
New Elements in Old Browser Fix
Usually, browsers that dont know certain elements will just ignore them and happily glide through the rest of your code. But this is not true to many older browsers, that stop and yell at things they don't understand in this modern world.
How does this effect your website. In HTML 4.01 there was inline and block level. This was your black and white content model. In HTML5, Block Level corresponds to Flow Content and Inline Corresponds to Phrasing Content. The block level elements, by default, clear everything and start on a new line in normal document flow. Now imagine placing a new element that should start on a new line, but then some old browser ignores it! and then all your other stuff below it is screwed. Everything is over lapping, your text is off the page somehow, your girlfriend leaves you and your images are touching. TOUCHING!!!! So lets stop these things from happening
Note: this fix may not patch things up with your girl friend depending on her hardware.
- In CSS, make a list of selectors for all the new elements you wish to use
- change the display to block as seen below.
section, article, nav, header, footer {display: block;}
Now thats simple enough. But good ol' internet explorer 9 (and below), being the hipster browser that it is, aint gonna compute that shiz. It see's an unknown element and gets pregnant about it. doesn't want to acknowledge it. Not even in CSS. It has no idea what you are trying to style. So what do we do to talk internet explorer into accepting that these new elements do exist? We force it! With Javascript! Simply create the elements in javascript in the header. Tricking IE into thinking you created these DOM elements lets you then style them to be block level elements ;)
document.createElement('elements_name_you_want_to_use')
Another option is to link to a hosted .js file (or download it and host it yourself) by adding a conditional comment to your html document
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
For a more detailed explanation on how to use this check out CSS Tricks Blog
Browser Support
Sometimes its good to know what browsers can do what. What features they support and what they are not up to scratch on yet. You can use these helpful websites to do just that.
- Find Me By IP
- Comparison of Layout Engines
- Can I Use (Browser Support Search Engine)
- HTML5 Test (Current Browser Tester)
HTML5 Update Notes
- The <figure> tag is for information, pictures, diagrams and data, relevant to certain content.
- A <figcaption> is for the caption of the what is inside the corresponding figure element. It can be placed above or below the figure element.
- The <ol> tags have taken back the start attribute. You use an integer as the value to state where the list starts from.
- The <ol> tag has the boolean attribute 'reversed' that puts the list in descending order.
- The <cite> tag should be used for a created pieces name, not a persons name. It should not be used for things such as the creator of the piece. It did not say so in html 4 so many people have been citing authors names with this tag. Because of this, some say to ignore the new specification because browsers may continue to acknowledge human names so that its backwards compatible with old sites, but this is not what the html5 specification is saying.
- The <address> is not for a humans postal addresses. It is for any contact related information.
- The <small> element is used for fine print or small print such as legal statements. It not used for extensive text.
- The new <mark> element is used as a highlighting type of tag. It brings focus on something that may not have intended to have focus, but now needs focus for some reason. An example is highlighting something within a quote or highlighting words a user has searched for. It is to be styled in any desired way and not at all limited to looking like a highlighter.
- The <time> tag is used for computer readable times and dates. Not something like "five days after valentines day". The bool pubdate attribute is to show the date is when the related content was published. The attribute datetime uses its value as the computer readable time/date and then the content represents that time.
- The rel attribute must be used with link tags but is also optional for many other elements. There is a wide selection of values for the rel attribute to describe its relation to the document
More info on new HTML5 elements can be found on w3schools of course!
If this was helpful in anyway please leave a comment and let me know. Did a lot of finger movements so knowing it made someone out there happy would be real nice ^^
