The most important part of HTML5 is descriptive markup. New structure-related elements help you organize your web pages and provide semantic meaning to each section. In HTML4, you used <div> or <span> tags to divide sections in a document by specifying the “id” or “name” attributes. This method works but it is not elegant. HTML5 promises a lot regarding this structuring of documents.
1. New Elements for Structure
- <header> : a header for a page, a section, an article, or an aside
- <footer> : a footer for other elements (body, section, article, aside)
- <nav> : navigation menus – can be part of a header or a footer or can be independent
- <section> : a genetic area – the main content of a page, usually includes articles
- <article> : the part for self-contained content – an individual entry, especially for blogs
- <aside> : supporting content for a page
- <figure> : images, audios, and videos that are imbedded in a page
- <dialog> : replace the <dl> element to contain conversational transcripts
Sections and articles can be confusing. Just think of a newspaper. There’s a sports section or an economics section. Inside of a section, there are several articles.
[Note] It is also argued that an article can include multiple sections. For example, there is an article “Top 5 movies this week!” which can include 5 sections for each movie. Yes, it is quite confusing and you are not the only one out there. Articles and sections can nest each other. Just use them in a way that makes sense.
2. Html 5 Document Structure
Let’s see how a typical HTML5 document might look like.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Html 5</title> <link rel="stylesheet" href="default.css" /> <script src="default.js"></script> </head> <body> <header> <h1>Html 5</h1> </header> <nav> <ul>...</ul> </nav> <section> <header>Entertainment</header> <article> <header>Music</header> <section> <header>Singer 1</header> </section> <section> <header>Singer 2</header> </section> </article> <article> <header>Movie</header> </article> </section> <aside> <p>Gossip</p> </aside> <footer> <p> © me </p> </footer> </body> </html>