Webwork
/
Other Structural Elements
HTML5_Logo_128

HTML 5 is the newest version of HTML. It is still being refined and older browsers do not support it but nothing stays old very long on the Internet so it is rapidly coming into wide use.

HTML 5 is an attempt to update and clean up the hodgepodge of codes and conventions that have evolved over the years for delivery of content via the Web. It's authors worked to arrive at a single markup language that:

Semantic Elements

One of the most significant changes in HTML 5 is the introduction of new content-specific elements, like <article>, <footer>, <header>, <nav>, and <section>. These are called semantic elements because their names indicate their function.

HTML 4 Structural Elements:
<div>
<span>
HTML 5 Semantic Structural Elements:
<header>
<nav>
<article>
<figure>
<figcaption>
<section>
<footer>
+
<div>
<span>
<header> Used for the header of a document or section - should be used as a container for introductory content or navigational links. You can have several <header> elements in one HTML document.
<nav> Defines a set of navigation links - intended only for major block of navigation links.
<article> Used for independent, self-contained content which should make sense on its own and it should be possible to distribute it independently from the rest of the site such as a blog post or news story.
<figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. - its position is independent of the main flow, and if removed it should not affect the flow of the document.
<figcaption> Defines a caption for a <figure> element.
<section> Defines sections in a document, such as chapters, headers, footers.
<aside> Defines content that is related to but aside from the main content. Aside content usually appears in a sidebar on the page.
<footer> Defines a footer for a document or section. Typically contains the author of the document, copyright information, links to terms of use, contact information, etc. You can have several <footer> elements in one document.

Styling Semantic Elements

The semantic elements can be styled in the same way that <div> tags are styled:

Source Style Code:
<style type="text/css" media="screen">

header {
background: #fee;
padding: 10px;
margin: 10px 0 0 10px;
width: 600px;
border: #999 solid 1px;
}

nav {
background: #efe;
padding: 10px;
margin: 10px 0 0 10px;
width: 600px;
border: #999 solid 1px;
}

article {
background: #eef;
padding: 10px;
margin: 10px 0 0 10px;
width: 600px;
}

footer {
background: #ffe;
padding: 10px;
margin: 10px 0 0 10px;
width: 600px;
border: #999 solid 1px;
}

</style>
Source HTML Code:
<header>This is the header element.</header>

<nav>This is the nav element.</nav>

<article>
<p>
These two paragraphs are in the article element. All of these elements (new in HTML 5) are called semantic elements because, unlike the div element, their names indicate their function.</p>
<p>
The advantage of semantic naming of HTML elements is that browser apps, search engines, and human beings can more easily determine their purpose in the page.</p>
</article>

<footer>This is the <footer> element.</footer>
Web page:
This is the header element.

These two paragraphs are in the article element. All of these elements (new in HTML 5) are called semantic elements because, unlike the div element, their names indicate their function.

The advantage of semantic naming of HTML elements is that browser apps, search engines, and human beings can more easily determine their purpose in the page.

This is the footer element.
< Previous     Webwork Table of Contents     Next >
photographs:

Semblance Portrait Project
The Built World
Greece
Hungary/Czech Republic
Poland
Graffiti
Simple Truths
Israel


Paris
Puebla, Mexico
Spain
Along the Mississippi
Italy
Santa Fe
The Reliance Building
Providence
archive:

Webwork
The Web Page from Hell
The Portals Project
Transition
Insights
Internet Spelling Guide
Ape Silverback (Primate Ruminations)
Revenge of the Movie Poster
GIFs 4 Us
The Web Rules
Webpix
Backgrounds 4 Us
Webpaper
Digital Sketches
Fonts
Sounds
© Jay Boersma