If you missed first part of this tutorial, you can find it here.
Hands on improving template – HTML5 fundamentals
Today I am going to show you some new html5 elements. Here is an html5 template but there are some tags that can be replaced for more semantic html5 elements. I want you to notice id=”container”, id=”header”, id=”main” and id=”footer” and this is something that is not considered a good practice today.
<!doctype html> <html lang="en"> <head> <title>Website title</title> <meta charset="utf-8"> </head> <body> <div id="container"> <div id="header"> <h1>My website</h1> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">My work</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div id="main"> <p>This is a main content paragraph</p> </div> <div id="footer"> <p>Copyright information</p> </div> </div> </body> </html>
Main thing about this is because when we are using id and when we are working with CSS there’s a certain weight, because you must go deeper to override some CSS rule. Simple example would be body #container #header h1 and if we use classes it would be like this .header h1 , see, it is much lighter. Although this article is not related to CSS consider using classes instead of ids whenever you can. And first thing in improving this template would be replacing all ids with classes.
<!doctype html> <html lang="en"> <head> <title>Website title</title> <meta charset="utf-8"> </head> <body> <div class="container"> <div class="header"> <h1>My website</h1> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">My work</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div class="main"> <p>This is a main content paragraph</p> </div> <div class="footer"> <p>Copyright information</p> </div> </div> </body> </html>
Try getting in habit of using classes instead of ids.
HTML5 header, main, footer and nav elemnts
Surveys about most used classes and ids used in templates were: header and footer. So what they decided to do was creating more semanting and descriptiv new html5 elements. You may be thinking is there a main element for main section, and you are right, with little note from W3C: Authors are advised to use ARIA role=”main” attribute on the main element until user agents implement the required role mapping. Now we are going to use those new elements in our template.
Note: while we are using header and footer elements as the page header and footer, and main element for main content they are not limited to one usage.
Think about blog posting. You have things like blog title, some social links and then content posting, and you have blog author, category, meta tags, all of this can be placed under header, main and footer elements respectively.
Next let’s take a look at the unordered list and this is obviously the navigation and her comes another html5 element nav and although nav accepts list items, nav still needs to wrap ul and now our template will look like this:
<!doctype html> <html lang="en"> <head> <title>Website title</title> <meta charset="utf-8"> </head> <body> <div class="container"> <header> <h1>My website</h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">My work</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <main role="main"> <p>This is a main content paragraph</p> </main> <footer> <p>Copyright information</p> </footer> </div> </body> </html>
If you take a closer look on the main element you’ll see that I described main navigation with role=”main”. With this, two things are achieved:
- accessibility and description of website is improved
- we can use that as a hook in our CSS like
main[role=main] { color: blue;}
And here we can declare the end of this part of tutorial because I don’t want to flood you with informations, see you soon.
Eager to learn more? Continue on reading with last part of this tutorial series with Learning HTML5 Fundamentals – part 3 where we are going to cover article, section and aside elements.
Leave a Reply