Start slicing web pages using HTML5

HTML5 not only offers the widely known new features like native support for video and interactivity, but it also offers new elements that provide more meaning to user agents. Using HTML5 element we can create more meaningful web pages with the new semantic-based structural elements.

Semantic Elements

Semantics is the study of the meanings of words and phrases in a language.

Semantic elements = elements with a meaning.

A semantic element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements: <div> and <span> – Tells nothing about its content.

Examples of semantic elements: <form>, <table>, and <article> – Clearly defines its content.

Frequently used “Semantic Tags” are
ELEMENT LEVEL PURPOSE
aricle Block Independent content such as blog post or article
aside Block Content slightly related to primary content on page
figure Block Grouping stand-alone content, such as video or image
footer Block Providing author, copyright data, etc.
header Block Introductory headings, could include navigation
hgroup Block For grouping “h1” to “h6”
nav Block Navigation-typically site level
secion Block Grouping of content usually with a heading similar to chapters
time Text For date and / or time representation
figcaption Text For use with “figure”, (optionally) used to provide caption
mark Text Text to be referenced or highlighted

Document Outlines

The document outline is the structure of a document, generated by the document’s headings, form titles, table titles, and any other appropriate landmarks to map out the document.

Document Outlining Algorithm

The document outlining algorithm is a mechanism for producing outline summaries of Web pages based on how they are marked up.

Content Models

Inline elements now have a content model of “text-level semantics.” Many block level elements now fall under the banner of “grouping content”: paragraphs, list items, divs, and so on.

Forms have their own separate content model.

Images, audio, video, and canvas are all “embedded content.”

The new HTML5 Sectioning Elements introduce a completely new content model called “sectioning content.”

HTML5 Sectioning Element Flowchart



Click here to view HTML5 Sectioning Element Flowchart.

So, let’s start with a sample outline. Imagine you have to create the structure of the page might look something like this:

  1. Company
    1. Services
      1. Development
      2. Design
    2. About Us

It’s easy-to-follow list of headings, displayed in a hierarchy — much like a table of contents.

You can use two things in your mark-up to create above noted page structure:

  • heading content (h1 to h6 and hgroup),
  • sectioning content(Using HTML5 via sectioning elements).
Creating Outlines With Heading Content
  <div>				
   <h1>Company</h1>
   <h2>Services</h2>
   <h3>Development</h3>
   <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when</p>
   <h3>Design</h3>
   <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when</p>
   <h2>About Us</h2>
   <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when.</p>
   <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when.</p>
   <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when.</p>
</div>  
Creating Outlines With Sectioning Content
  <main>
	<h1>Company</h1>
	<section>
		<h2>Services</h2>
		<article>
			<h3>Development</h3>
			<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when</p>
		</article>
		<article>
			<h3>Design</h3>
			<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when</p>
		</article>
	</section>
	<section>
		<h2>About Us</h2>
		<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when.</p>
		<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when.</p>
		<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when.</p> 			
	</section>
</main>  

Online outline testing tools are:
https://hoyois.github.io/html5outliner/
https://gsnedders.html5.org/outliner/

Chrome web store – Extensions:
https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo/related?hl=en

hgroup

There are times when you might want to use a heading element but you don’t want its contents to appear in the document outline. The hgroup element allows you to do just that:

  <hgroup>
  <h1> Sample</h1>
  <h2>Sample 2 </h2>
</hgroup>  

Scoped styles

HTML5 offers a solution to this problem in the shape of the scoped attribute, which can be applied to a style element. Any styles declared within that style element will only be applied to the containing sectioning content

  <h2>My awesome blog</h2>
<article>
  <style scoped>
     h2 { color: red; }
  </style>
  <h2>Blog Post </h2>
  <p>My first blog post</p>
</article>   
Out Put
 

My awesome blog

Blog Post

My first blog post

Click here to view some sample HTML5 Structures.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *