Two Column Layout And Vertical Menu Tutorial
Add Major Sections using HML5 Tags
Section 1 Lesson 2
Two Column Layout And Vertical Menu Tutorial
Add Major Sections using HML5 Tags
Section 1 Lesson 2
In this lesson you add the major document sections using HTML5 semantic elements. You also add placemarker content.
You are using the default web browser styling and layout for all the content. In upcoming lessons, CSS is added for a better look and layout.
Without the styling, the page represents the structure of the content. The HTML elements we use, in particular the HTML5 semantic elements, will provide a context for the search engines to better analyze the content for its meaning and importance.
Another important observation to make is that the content can be understood and used without CSS. This is a good starting point before applying CSS. It is a good approach to design content first and then add the presentation styling second.
Get Skills to Work on Websites in 30 Days
Start today with easy to learn courses that quicky build your website skills!
Completed Lesson
Step 1: Add content wrapper div tag
In your practice folder’s index.html file insert lines 9-11, then save.
Step 2: Add header element.
In your practice folder’s index.html file insert line 10, then save.
Step 2 Web Browser View
HTML5 elements such as the header tag requires latest web browser versions. In particular for IE, versions 6, 7 and 8 will not show HTML5 elements predictably. We will see how to handle IE 8 and lower versions in lesson 3 where we will make them all block elements like the div element.
The header element works like a div element with special meaning to search engines and other professionals that this contains the page heading. The use of the h1 element indicates a title of top level importance.
Step 3: Add page navigation menu.
In your practice folder’s index.html file insert lines 11-23, then save.
The nav element represents a section of a page that contains links to parts of the page or other webpages. You are using the a element for the navigation links.
The ul and li elements will structure their layout. In upcoming lessons the CSS for that is added in.
Step 3 Web Browser View
Step 4: Add left column content.
In your practice folder’s index.html file insert lines 24-40, then save.
The article element represents an independent or reusable part of a document. In can be considered self contained. The article element.
Step 4 Web Browser View
Step 5: Add right column content.
In your practice folder’s index.html file insert lines 41-48, then save.
The aside element is used to identify content that is tangentially connected to the main content of the webpage. For example sidebars, a blog or definitions. The content often has the ability to stand separately on its own. You can then use the aside element.
Step 5 Web Browser View
Step 6: Add footer.
In your practice folder’s index.html file insert lines 49-54, then save.
The footer element is used to indicate author of the section, copyright or links to related documents. You can then use the
Step 6 Web Browser View
>