An Introduction to Html5 Converting to the New Layout Tags

<p> AN INTRODUCTION TO HTML5 – CONVERTING TO THE NEW LAYOUT TAGS</p><p>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.</p><p>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. </p><p>These tags are: <article> - An independent portion of the document or site. <aside> - Content that is tangential to the main part of the page or site. <figcaption> - Caption for a figure. <figure> - A figure or quotation pulled out of the flow of text. <footer> - The footer of a document or section. <main> - The main or important content in the document. There is only one <main> element in the document. <header> - The header of a document or section. <hgroup> - A group of headings. <nav> - A navigation section. <section> - A generic section that cannot be defined by one of the above types.</p><p>See https://developer.mozilla.org/en- US/docs/Web/Guide/HTML/HTML5/HTML5_element_list</p><p>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.</p><p>Providing Meaning with Semantic Tags</p><p>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 <article> tells the browser that the contents are part of a standalone article.</p><p>Using these new layout tags is easy. In fact, many web pages already use <div> tags for the same purpose as these tags. For example, in many web designs you might see a <div id="header"> section of the page. Now, with HTML5, you can just write <header>.</p><p>Try It Yourself</p><p>Converting to the New Layout Tags</p><p>You can use Notepad++ or Dreamweaver for this short exercise.</p><p>1. Locate on BREO and download the HTML file conversion-old.html. </p><p>2. Open the file in Notepad++ or Dreamweaver and view the code:</p><p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <title>My HTML 4 2-Column Page</title> <link type="text/css" href="styles.css"> </head> <body> <div id="main"> <div id="header"> <h1>My HTML 4 2-Column Page</h1> </div> <div id="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Quotations</a></li> </ul> </div> <div id="contents"> <p>Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma - which is living </p><p>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.</p> </div> </div> <div id="footer"> <p>© 2014 S Brandreth</p> </div> </body> </html></p><p>3. Save and view the file in a browser. </p><p>Now, edit the code as shown below: </p><p><!doctype html></p><p>024bf4166b203edd06fb492456a21384.doc Version 1 Page 3 of 4 <html lang="en"> <head> <title>My HTML 4 2-Column Page</title> <link type="text/css" href="styles.css"> </head> <body> <section id="main"> <header> <h1>My HTML 4 2-Column Page</h1> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Quotations</a></li> </ul> </nav> <section id="contents"> <p>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.</p> </section> </section> <footer> <p>© 2014 S Brandreth</p> </footer> </body> </html></p><p>4. Save the HTML as conversion-new.html, and view the page in a range of browsers.</p><p>5. The page should appear similar to the screenshot shown above.</p><p>024bf4166b203edd06fb492456a21384.doc Version 1 Page 4 of 4</p>

An Introduction to Html5 Converting to the New Layout Tags

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support