Simple & Useful - HTML5 element and structure

HTML5 elements and structure

Here is the Basic document which is used in this outline and its source.

The two tables below outline the structure and parts of a web page which is designed to work on all platforms and be accessible to all users. The first is of the whole document, the second is of what the reader will see on the web page - the <body> of the document.

HTML document
Document type
Metadata
Viewport
Style Sheet
Body
Closing tags

Body
Header
Navigation
Article
Section
Section	Aside
Figure
Section
Footer

Document type

This tell what kind of a document it is, HTML5, and what language it uses, English, so a screen reader can correctly pronounce the words.

<!DOCTYPE HTML> <html lang=en>

Metadata

This indicates what Unicode character set can be used.

<meta charset="utf-8" />

Viewport

This allows for the screen to scale depending on which device it is viewed.

<meta name="viewport"content="width=device-width,user-scalable=yes"/>

Style Sheet

Cascading style sheets (CSS) give the structured information in the document its shape.

In the process of creating this page, I touch on CSS3, which is required to properly render HTML5 pages. CSS3 is essential for the styling, navigation, and general feel of the HTML5 page.

Before you begin the page construction, however, you need to learn about a few of the new HTML5 tags.

The example header area contains the page title and subtitle. You use the <header> tag to create the content for the header area of the page. The <header> tag can contain the opening information about a <section> and an <article> in addition to the web page itself. The web page created here has a Header area for the page, which is shown in the high-level design, as well as a header area inside the article and section areas. Here is <header> tag markup example.

<header> <hgroup> <h1>Title</h1> <h2>Author</h2> <h3><time datetime="2012-01-15">January 15, 2012</time></h3> </hgroup> <h4><nav><a href="#lorem">Lorem</a> ·<a href="#sed"> Praesent venenatis </a>· <a href="#at">At vero</a></nav></h4> </header>

The <header> tag can also contain an <hgroup> tag. The <hgroup> tag groups headings together, using the <h1> to <h6> heading levels shown here with a main heading and a sub-heading.

<hgroup> <h1>Title</h1> <h2>Author</h2> <h3><time datetime="2013-01-15">January 15, 2013</time></h3> </hgroup>

You create the Navigation area of the page using the <nav> tag. The <nav> element defines an area specifically intended for navigation. The <nav> tag should be used for the main site navigation, not to hold links contained in other areas of the page. The navigation area can contain code like that shown below.

<h4><nav><a href="#lorem">Lorem</a> ·<a href="#sed"> Praesent venenatis </a> · <a href="#at">At vero</a></nav></h4>

Article and Section

The page you are designing contains one Article section, which holds the actual content of the page. You use the <article> tag to create this area, and the tag defines content that can be used independently of the other content found on the page. The <article> tag marks content that can be removed and placed in another context and be completely understandable.

The Article area in basic document contains three Section areas. You create these areas using the <section> tag. A<section> contains related component areas of web content. The <section> tag - and the <article> tag, as well - can contain headers, footers, or any other components required to complete the section. The <section> tag is for grouping content. The content for both the <section> tag and the <article> tag usually starts with a <header> and ends with a <footer>, with the content for the tag in between.

The <section> tag can also contain <article> tags, just as the <article> tag can contain the <section> tag. The<section> tag should be used to group similar information, and the <article> tag should be used for information such as an article or a blog that can be removed and placed in a new context without affecting the meaning of the content. The <article> tag, as its name implies, provides a complete packet of information. In contrast, the <section> tag contains related information, but the information cannot be placed in a different context by itself, because its meaning would be lost.

<article> <section>Content</section> <section>Content</section> </article> <section> <article>Content</article> <article>Content</article> </section>

Image elements

Both the <section> and the <article> tags as well as the <header> and <footer> tags can contain the <figure> tag. You use this tag to include images, diagrams, and photos.

The <figure> tag can contain the <figcaption>, which in turn contains the caption for the figure contained in the <figure>tag, allowing you to enter a description that can tie the figure more closely to the content. Here is an example of the <figure> and <figcaption> tag structure.

<figure> <img src="thistlestimothy.jpg"alt="Thistles and timothy, 2010"> <figcaption>Thistles and timothy, 2010</figcaption> </figure>

Aside

An aside area in the basic document was created by using the <aside> tag. Think of this tag as holding supplementary content that is not part of the flow of the article it supplements. In magazines, asides are frequently used to highlight a point that was made in the article itself. The <aside> tag contains content that can be removed without affecting the information conveyed by the article, section, or page that contains it.

An example of the <aside> tag's usage is in the basic document -
This is a common fill text. It is in Latin and comes from Cicero.

<aside> <p>This is a common fill text. It is in Latin and comes from Cicero.</p> </aside>

The <footer> element contains information about a page, article, or section, such as the author or date of the article. It may also show the source for content included in the site.

<footer> Source: <a href="http://www.lipsum.com/"> http://www.lipsum.com/</a> </footer>