Adobe Dreamweaver CC

How to work with HTML layout

Learn how to use HTML to structure a web page. (Try it, 10 min)

Hypertext markup language (HTML) provides the foundation of web pages. Desktop and mobile browsers, such as Internet Explorer, Chrome, Firefox, Safari, and Opera, understand and process HTML to display your web pages. Use HTML to define the overall structure of a web page. A well-defined structure provides a good foundation for defining layout and styling later in the process.

What do I need?

Get files Sample files to practice with (ZIP, 27 KB)

HTML Structure

Hypertext markup language (HTML) provides the foundation of web pages. Desktop and mobile browsers, such as Internet Explorer, Chrome, Firefox, Safari, and Opera, understand and process HTML to display your web pages.

HTML includes element names that characterize different parts of a web page. The HTML elements are written as tags. Most HTML tags have an opening and a closing tag that include the element name inside angle (< >) brackets. The closing tag has a slash (/) in front of the element name (e.g., <element></element>).

Page layout

Before you start

Open html-layout.html in Dreamweaver and work in Code View. 

Note: In this tutorial you will not see anything in Live View. The tags you will add are empty containers that you can fill with content later. The colored graphics in each screenshot only serve to help you visualize the relationship of these invisible containers. You will not see them in Dreamweaver.

Open html-layout.html

Step 1 of 8

Add a div to hold generic page content

A <div> is a division, or generic container, for different kinds of content on a page. A div creates an invisible box around the content it contains to which you can add styling and positioning later in the process.

Add the <div></div> tags immediately after the opening <body> tag. This div will include all of the visible content on the page.

HTML

<div> </div>

Add a div

Step 2 of 8

Add a header 

The <header> includes the introduction section of a page such as a banner image, navigation (or menu) section, and page headings.

Add the <header></header> tags between the <div> tags.

Tip: Code hinting helps you code faster and with fewer mistakes. When you type an open angle bracket (<) to start writing an HTML tag, Dreamweaver presents a list of elements you can use. For example, if you type <he, the header element comes into the list. Hit Enter or Return to add a highlighted tag to your code.

When you type </ to close a tag, Dreamweaver knows which tag to close and finishes writing the tag for you.

HTML

<header> </header>

Add a header
Code hinting

Step 3 of 8

Add a navigation section

The <nav> includes the navigation links which typically serve as the main menu for the page.

Add the <nav></nav> tags between the <header> tags.

HTML

<nav> </nav>

Add a navigation section

Step 4 of 8

A <section> has a more specific purpose than the generic <div> in that it can be used to include a group of information related to a specific topic. The <section> for this page will include general information about a topic as well as a sidebar quote to accompany it.

Add the <section></section> tags immediately after the closing </header> tag.

HTML

<section> </section>

Add a section to hold related content

Step 5 of 8

Add an article to hold main content and sidebar

An <article> includes information on a specific topic that can stand on its own. The article for this page will hold the main content for the topic as well as a quote in a sidebar on the page.

Add the <article></article> tags between the <section></section> tags.

HTML

<article> </article>

Add an article to hold main content and sidebar

Step 6 of 8

Add a div to hold the main content

The <div> in the article section of this page will include the main content for the topic.

Add the <div></div> tags between the <article> tags.

HTML

<div> </div>

Add a div to hold the main content

Step 7 of 8

Add an aside to hold the sidebar

An <aside> holds information that is related to the main topic and is commonly displayed as a sidebar or pull quote for the <article>.

Add the <aside></aside> tags immediately following the closing </div> tag in the article.

HTML

<aside> </aside>

Add an aside to hold the sidebar

Step 8 of 8

The <footer> defines the footer section of the web page and holds information such as the copyright, menu navigation, and sitemaps. 

HTML

<footer> </footer>

Add a footer

Be sure to check out our tutorials that focus on different aspects of learning how to work with HTML inside of Dreamweaver. How to work with text in HTML shows how to start adding content to your pages and Navigate your HTML shows how to use tools within Dreamweaver to visually work with the HTML structure of a page.

Let us know what you think