HTML5 LAYOUT CONTAINER

Creating HTML5 layout container

 HTML <header> Element

Definition and Usage

• The <header> element represents a container for
introductory content or a set of navigational links.
• A <header> element typically contains:
• one or more heading elements (<h1> - <h6> and
<hgroup>)
• logo or icon
• authorship information
• You can have several <header> elements in one
document.
Example of <header> element
Output
 <hgroup> Element

Definition and Usage

• The <hgroup> tag is used to group heading
elements.
• The <hgroup> element is used to group a set
of <h1> to <h6> elements, when a heading
has multiple levels (subheadings).
Example of hgroup element
Output of hgroup element
 <footer> Element

Definition and Usage

• The <footer> tag defines a footer for a document or section.
• A <footer> element should contain information about its
containing element.
• A <footer> element typically contains:
•  authorship information
• copyright information
• contact information
• sitemap
• back to top links
• related documents
• You can have several <footer> elements in one document.
Example of <footer> element
 <nav> Element

Definition and Usage

• The <nav> tag defines a set of navigation links.
• Notice that NOT all links of a document should
be inside a <nav> element.
• The <nav> element is intended only for major
block of navigation links.
• Menus are most common candidates for the
<nav> elements
Example of <nav> element
Output of <nav> element
 <aside> Element

Definition and Usage

• The <aside> tag defines some content aside from the content it
is placed in. The aside content should be related to the
surrounding content.
• It goes on to state that <aside> “can be used for effects like
sidebars, for advertising, for groups of nav elements, and for
other content that is considered separate from the main content
of the page.”
• The most common uses of <aside> are for links to external
websites, for advertising, and for "About Us" or "Contact Us"
sidebars.
• An <aside> can be nested within an <article> if its content
applies specifically to that article.
 Using the <aside> Element
We've added an <aside> box inside our article and inserted an image and external links:
<aside>
<img src="images/html5-logo.png"
alt="HTML5 Logo">
<h3>External Resources:</h3>
<ul>
<li>
<a href="http://dev.w3.org...">
HTML5 Specification</a>
</li>
...
</aside>

And used CSS to float the box to the right:

aside {
width: 200px;
float: right;
Don't confuse a list of external links as a <nav>
background-color: #CCFFFF;
section. The <nav> element is for navigating
...
}
within our own site.
Example of <aside>element
Output of <aside>element
 <section> element

Definition and Usage

• The <section> tag defines sections in a document,
such as chapters, headers, footers, or any other
sections of the document.
• A section, in this context, is a thematic grouping of
content, typically with a heading.”
 It continues to say that “a web site's home page
could be split into sections for an introduction,
news items, and contact information.”
 A common use of <section> is to contain a group
of articles.
 Using the <section> Element
We've inserted a <section> element to contain our article:

<section>
<h2>Home Page</h2>
<article>
<aside>
...
</aside>
...
</article>
</section>

And CSS to change the background color:

section {
background-color: #FFFFCC;
padding: 5px;
}
We could now add more articles to be
contained within the main <section>.
Output of <section> element
 Controlling format using <div>element

Definition and Usage

• The <div> tag defines a division or a section in
an HTML document.
• The <div> tag is used to group block-elements
to format them with CSS.
Example of <div> element
Output
 Adding thematic breaks
• Use the <hr /> element to add a thematic
break.
• It is a void element, so it cannot have any
content.
• You can use the <hr /> element to provide a
thematic break when there is a scene change in
a story or to denote a transition to another
topic within a section of a reference book.
 Annotating content
• <b> bold text
• <strong> Strong importance to the text
• <i> italic text
• <em> emphasized text 
 Using the <abbr> element for
abbreviations and acronyms
Definition and Usage
• The <abbr> tag defines an abbreviation or an
acronym, like "Mr.", "Dec.", "ASAP", "ATM".
• Marking up abbreviations can give useful
information to browsers, translation systems
and search-engines.
Example of <abbr> element
 <address> element

• The <address> tag defines the contact information for

the author/owner of a document or an article.
• If the <address> element is inside the <body> element,
it represents contact information for the document.
• If the <address> element is inside an <article> element,
it represents contact information for that article.
• The text in the <address> element usually renders
in italic. Most browsers will add a line break before and
after the address element.
Example of <address> element
Output
 Quotations and Citations
• When it’s time to start quoting, you can use the <blockquote> element to
create a long, running quotation and the <q> element for an inline quotation.
Both these elements have a cite attribute that names the source work of the
quote.
 <blockquote> Tag

• The <blockquote> tag specifies a section that

is quoted from another source.
• Browsers usually indent <blockquote>
elements.
Example of <blockquote> element
Output
  <q> Element

• The <q> tag defines a short quotation.

• Browsers normally insert quotation marks
around the quotation.
Output
 Using the <br/> and <wbr/> elements

• The <br /> and <wbr /> elements are void elements, meaning
that they cannot have any content and provide only a line
break in your HTML document.
• The <br /> element provides an immediate line break, which
continues the document flow on the next line of the browser.
• The <wbr /> element, which is a word break, provides an
indication to the browser that it may insert a line break at this
location. The browser decides whether to insert the break.
Using the <dfn> element to define term

• The <dfn> tag represents the defining instance

of a term in HTML.
• The defining instance is often the first use of a
term in a document.
• The nearest parent of the <dfn> tag must also
contain the definition/explanation for the
term inside <dfn>.
Output
 Working with <summary> and <details> element

• The <summary> tag defines a visible heading for the 

<details> element. The heading can be clicked to
view/hide the details.
• The <details> tag specifies additional details that the
user can view or hide on demand.
• The <details> tag can be used to create an interactive
widget that the user can open and close. Any sort of
content can be put inside the <details> tag.
• The content of a <details> element should not be
visible unless the open attribute is set.
Output
 Understanding other annotations

• <s> Denotes strike-out text, text that is no longer valid.

• <u> Offsets a span of text without implying a difference of
importance. The default behavior is to underline the text, but
this could be accommodated better by using a span tag with
the appropriate style.
• <mark> Marks, or highlights, a span of text.
• <time> Denotes a time of day or a date in the text.
• <kbd> Indicates user input.
• <ins> Indicates inserted text.
• <del> Indicates deleted text.
• <small> Indicates fine print.
• <sub> Indicates subscript.
• <sup> Indicates superscript