Part Four: New HTML5 Semantic/Structural Elements
HTML5 has made what are known as “sectioning elements” available. Sectioning elements are supposed to help improve page structure, but they can get confusing. So let’s just learn the basics here, then glance at the content marked as side notes, and move on. The side notes will show that there is much more to learn, but you don’t need to understand them to get started using HTML5.
Let’s learn 6 Basic HTML5 Elements:
1) header element
<header>…</header>
Header is a new HTML5 element. It has a different purpose than the <head> tag you learned in Part One. Don’t confuse the two tags.
The header element is at the top of almost every HTML5 page (in the body section). Header is where you’ll likely name your business and store a logo for your web page. In the past, we often wrote <div id=”header”>. Now we can just write <header>.
2) nav element
<nav>…</nav>
Nav is a new HTML5 element with a clear purpose. Nav is used for the navigation bar and is where you’ll store links to other web pages.
3) aside element
<aside>…</aside>
The aside element – Aside is another new HTML5 element that can be used for sidebars, for groups of nav elements and for other content that is considered separate from the main content of the page. In the past, we often wrote <div id=”sidebar”>. Now we can just write <aside>.
4) footer element
<footer>…</footer>
The footer element is also new. It is where you should store contact information, copyright information and perhaps a couple of links. In the old days, designers used to write <div id=”footer”>. Now we can write <footer> instead.
5) section element
<section></section>
The section element lets you define a generic section of content. The section element should have a heading element in it – Example: <h1>All About Speed Skating</h1>.
6) article element
<article></article>
The article element should contain things like blog posts and news stories. This element and its contents should be able to be detached from the rest of the page with the page remaining coherent. An article element typically has a heading and sometimes a footer.
Now you’ve seen 6 HTML5 Elements. You can use the new HTML5 elements with the old HTML elements in your page. But you can’t position these elements as you see in the example without the help of CSS.
A Close Look at One Popular HTML Element
The “Good Old” div element
<div>…</div>
The HTML div element is an element that has been used, and perhaps overused, as a container for other HTML elements for a long time.
The div element is used to identify any particular part of a web page. It can include an entire web page, or just the first line of a paragraph. The div element has no special meaning. It is not semantic. When used together with CSS, the div element can be used to style blocks of content.
<div id=”wrapper”>
Here we created a <div> with an id of “wrapper.” ID is the attribute and “wrapper” is the value.
We can use the attribute and value to style the look of the page with the help of the linked CSS document. It may not look exciting right now. But HTML5 and CSS3 are pretty amazing together.
Many people like to use the div element as top-level container for styling the entire site. This is an appropriate use of div element, as a site wrapper has no purpose other than to aid styling. The use of <div> will continue to decline in the future in favor of the new semantic elements.
HTML Block Elements and Inline Elements
Most HTML elements “used to” be defined as block-level elements or inline elements. Block-level elements act as “containers” for other elements. In other words, you put other elements inside block elements. An inline element is an element that defined text or data in the document. <strong> for example is an element that makes the enclosed text strongly emphasized. It used to be considered an inline element.
Inline elements are ones without widths or heights. (NOTE: The paragraph is the only block element that can only contain inline elements.) So why am I explaining this if everything has changed in HTML5? Well, it seems that we commonly still think of elements in these terms.
Return to Top