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.
Get files Sample files to practice with (ZIP, 27 KB)
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>).
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.
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.
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.
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.
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.
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.
That's it! You're done. Please let us know what you think about this tutorial.