Introduction to HTML 5 Design Elements
Previously you were introduced to HTML tables and the tags used to create tables. Through the reading, you learned that at one time web designers used tables to create the layout of web pages. The days of table-designed web pages are long gone (thankfully). Instead, web designers now use HTML 5 tags to create their web page layouts.
HTML 5 Layout Design Tags
HTML 5 introduced eight new HTML tags specifically created for designing the layout of a web page. While each of the eight new tags are beneficial and purposeful, you will only be introduced to the following four basic HTML 5 layout tags:
<header> - Creates a container for the header of an HTML document. You would commonly find the web page header image or logo in the <header> container of a web page.
<nav> - Creates a container for the navigation links (text-based or image-based) of an HTML document.
<section> - Creates a container for informational media (text, images, video, audio, etc).
The information presented in this container is the main information of the page and it is what brings visitors to your site.
<footer> - Creates a container for the footer of an HTML document. You would commonly find administrative information in the <footer> container of a web page; to include: links to contact information, copyright and privacy policies, terms of use, etc.
("HTML Layouts," n.d., para 3).
Design Examples
Below are several HTML 5 Design Layout examples. Each example demonstrates how the HTML 5 design tags can be used to create a visually-appealing web sites.
| Top Navigation Layout Example |
 |
| Side Navigation Layout Example |
 |
Two-Column
Top Navigation Layout Example |
 |
Reference:
w3schools.com. (n.d.). HTML Layouts. Retrieved from: http://www.w3schools.com/html/html_layout.asp
Next 
|
