HTML5 structural elements
HTML4 already has a lot of semantic elements to allow you to clearly define the different features of a web page, like forms, lists, paragraphs, tables, etc. However, it does have its shortcomings. We still rely heavily on <div> and <span> elements with different id and class attributes to define various other features, such as navigation menus, headers, footers, main content, alert boxes, sidebars, etc. Something like <div id="header"> works in terms of developers and designers knowing what it is for, and being able to use CSS and JavaScript to apply custom styles and behaviour to make it understandable to end users.
The new HTML5 elements that can address this are:
<header>: Used to contain the header of a site.<footer>: Contains the footer of a site.<nav>: Contains the navigation functionality for the page.<article>: Contains a standalone piece of content that would make sense if syndicated as an RSS item, for example a news item.<section>: Used to either group different articles into different purposes or subjects, or to define the different sections of a single article.<time>: Used for marking up times and dates.<aside>: Defines a block of content that is related to the main content around it, but not central to the flow of it.<hgroup>: Used to wrap more than one heading if you only want it to count as a single heading in the page’s heading structure.As well as several other that you can check in this post- html5 tage list
Why isn’t there a <content> element?
While this may seem like a glaring omission, it really isn’t. The main content will be the top level block of content that isn’t the <header>, <nav> or <footer>, and depending on your particular circumstance, it might make more sense to mark the content up using an <article>, a <section>, or even a <div>.
Presenting an example HTML5 page
Some meta-differences
The first thing you’ll notice is that the doctype is much simpler than in older versions of HTML:
<!DOCTYPE html>the creators of HTML5 chose the shortest possible doctype string for this purpose — after all, why should you, the developer, be expected to remember a huge great long string containing multiple URLs, when in reality the doctype is only there to put the browser into standards mode (as opposed to quirks mode)?
Next, I want to draw your attention to HTML5’s apparent “lax syntax requirements”. I have included quotes round all my attribute values, and written all the elements in lower case, but that’s because I am used to writing using XHTML rules. But it may come as a surprise to you to discover that in HTML5, you can ignore these rules if you want. In fact, you don’t even have to bother including the <head>, <body>, or <html>elements, and it will still validate!
Note: this is not true if you switch to using XHTML (HTML served with the XHTML doctype — application/xhtml+xml)
This is because such elements are assumed by the browser anyway. If you create a sample HTML5 page without these elements, load it into a browser, and view the source of the loaded page, you will see them inserted automatically by the browser.
Note: Ok, so in fact you can also get HTML4 documents to validate if you don’t include <head>, <body>, or <html>, but it is still worth mentioning here.
Another thing to mention is that the HTML5 spec strictly defines how to handle badly-formed markup (for example wrongly nested elements, or unclosed elements), defining a parsing algorithm for the first time. This means that even if you do get some of your markup wrong, the DOM will be consistent across HTML5-supporting browsers.
So does this mean we don’t need to worry about validation and best practices any more? HECK NO! validation is still a very useful tool for making your pages as good as they can be.
To validate HTML5 documents, you can use the W3C validator, which can validate HTML5, as well as a wide range of other markup language flavours. Or for a dedicated HTML5 (+ WAI-ARIA and MathML) validator, go to validator.nu.
Last of all in this section, I want to draw your attention to this line:
<meta charset="utf-8" />
You need to declare the character set of your document within the first 512 bytes, to protect against a serious security risk. Unless you have a really good reason not to, you should use UTF-8.
Basic HTML5 template
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> hello </title>
</head>
<body>
</body>
</html>
Below we have the new html5 elements which go within the body tag
<header>
The document’s header looks like this:
<header>
<hgroup>
<h1>My main heading</h1>
<h2>a sub heading </h2>
</hgroup>
</header>the purpose of the <header> element is to wrap the section of content that forms the header of the page, usually containing a company logo/graphic, main page title, etc.
<hgroup>
You’ll notice that in the above code, the only contents of my header are an <hgroup> element, wrapping two headings. What I want to do here is specify the document’s top level heading, plus a subtitle/tag line. I only want the top level heading to count in the document heading hierarchy, and that’s exactly what <hgroup>does — it causes a group of headings to only count as a single heading for the purposes of the document structure.I must admit personally I don’t use the <hgroup> element very much- oops!!
<footer>
At the bottom of document or if you have multiple articles or sections then at the bottom of each you should have a <footer>:
<footer>
Copyright © 2017
</footer><footer> should be used to contain your site’s footer content — if you look at the bottom of a number of your favourite sites, you’ll see that footers are used to contain a variety of things, from copyright notices and contact details, to accessibility statements, licensing information and various other secondary links.
Note: You are not restricted to one header and footer per page — you could have a page containing multiple articles, and have a header and footer per article.
<nav>
Further up the document again, you’ll come across this structure:
<nav>
<h2>Contents</h2>
<ul>
<li><a href="#link1">link1</a></li>
<li><a href="#Hlink2">link2</a></li>
<!-- other navigation links... -->
</ul>
</nav>The <nav> element is for marking up the navigation links or other constructs (eg a search form) that will take you to different pages of the current site, or different areas of the current page. You can of course include headings and other structuring elements inside the <nav>, or you could include your <nav> in your <header> its really up to you.
<aside>
Usually within a section or perhaps an article you will see the <aside> element:
<aside>
<!-- lots of quick facts inside here related to the article or section-->
</aside>Other suitable candidates for <aside> elements include lists of links to external related content, background information, pull quotes, and sidebars.
<time>
The <time> element allows you to define an unambiguous date and time value that is both human and machine readable. For example, I’ve marked up the release dates of the poppies’ singles like so:
<time datetime="2017-01-13">2017<span "></time>The text in between the opening and closing tags can be anything you want, as appropriate for the people reading your site. If you wanted, you could also put it like this:
<time datetime="2017-01-13">13th January 2017</time>
<time datetime="2017-01-13">January 13 2017</time>
<article> and <section>
Now we turn our attentions to probably the two most misunderstood elements in HTML5 — <article> and <section>. When you first meet them, the difference might appear unclear, but it really isn’t so bad.
Basically, the <article> element is for standalone pieces of content that would make sense outside the context of the current page, and could be syndicated nicely. Such pieces of content include blog posts, a video and it’s transcript, a news story, or a single part of a serial story.
The <section> element, on the other hand is for breaking the content of a page into different functions or subjects areas, or breaking an article or story up into different sections. Below are two perfectly fine examples of the use of articles and sections:
<article>
<section id="Intro">
<h2>Introduction</h2>
</section>
<section id="Classes">
<h2>Classes</h2>
</section>
<section id="Teachers">
<h2>Teachers</h2>
</section>
</article>But you could also have a structure like this:
<section id="business">
<h2>Business Units</h2>
<!-- multiple article elements could go in here for each unit-->
</section>
<section id="html">
<h2>html and CSS Units</h2>
<!-- multiple article elements could go in here for each unit -->
</section>
<section id="Design">
<h2>DEsign units</h2>
<!-- multiple article elements could go in here for each unit -->
</section>Where does that leave <div>?
So, with all these great new elements to use on our pages, the days of the humble <div> are numbered, surely? NO. In fact, the <div> still has a perfectly valid use. You should use it when there is no other more suitable element available for grouping an area of content, which will often be when you are purely using an element to group content together for styling/visual purposes. An eample is <div id="wrapper"> wrapped around the whole of the content. It is used here is so that you could use CSS to center the content in the browser:
#wrapper {
background-color: #00f;
width: 800px;
margin: 0 auto;
}
With that overview we are ready for this weeks exercises click here to download it
Post sources and references:
https://dev.opera.com/articles/new-structural-elements-in-html5/
You must be logged in to post a comment.