• Abstract and Figures
• Public Full-text

AN INTRODUCTION TO HTML5 – CONVERTING TO THE NEW LAYOUT TAGS

The New HTML5 Tags HTML5 adds a lot of new features to the HTML specification, but the easiest ones to understand are the brand-new tags. These are HTML elements that have never been a part of HTML in the past.

New Layout Tags Most of these new tags are called “sectioning” elements and they provide semantics for the layout and sections of an HTML document.

These tags are:

- An independent portion of the document or site.

- Content that is tangential to the main part of the page or site.

- Caption for a figure.

- A figure or quotation pulled out of the flow of text.

- The footer of a document or section.

- The main or important content in the document. There is only one

element in the document.

- The header of a document or section.

- A group of headings.

- A navigation section.

- A generic section that cannot be defined by one of the above types.

See https://developer.mozilla.org/en- US/docs/Web/Guide/HTML/HTML5/HTML5_element_list

You use these tags to define specific areas of your HTML documents. They provide you with ways to attach CSS styles and give some semantic meaning to the parts of your pages.

Providing Meaning with Semantic Tags

024bf4166b203edd06fb492456a21384.doc Version 1 Page 1 of 4 Semantic tags tell the browser or user agent something about the contents of the tag. In other words, rather than just defining where a block of text should appear in the page flow, a semantic tag such as

tells the browser that the contents are part of a standalone article.

Using these new layout tags is easy. In fact, many web pages already use

tags for the same purpose as these tags. For example, in many web designs you might see a

section of the page. Now, with HTML5, you can just write

.

Try It Yourself

Converting to the New Layout Tags

You can use Notepad++ or Dreamweaver for this short exercise.

1. Locate on BREO and download the HTML file conversion-old.html.

2. Open the file in Notepad++ or Dreamweaver and view the code:

My HTML 4 2-Column Page

• Home
• Quotations

Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma - which is living

024bf4166b203edd06fb492456a21384.doc Version 1 Page 2 of 4 with the results of other people's thinking. Don't let the noise of other's opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition. They somehow already know what you truly want to become. Everything else is secondary.

© 2014 S Brandreth

3. Save and view the file in a browser.

Now, edit the code as shown below:

024bf4166b203edd06fb492456a21384.doc Version 1 Page 3 of 4

My HTML 4 2-Column Page

• Home
• Quotations

Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma - which is living with the results of other people's thinking. Don't let the noise of other's opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition. They somehow already know what you truly want to become. Everything else is secondary.

© 2014 S Brandreth

4. Save the HTML as conversion-new.html, and view the page in a range of browsers.

5. The page should appear similar to the screenshot shown above.

024bf4166b203edd06fb492456a21384.doc Version 1 Page 4 of 4

Load more

  4

Copy Link