Proper Structure

Welcome to our free Typography tutorial. This tutorial is based on Webucator's Typography course.

Contact Us or call 1-877-932-8228
Proper Structure

Proper Structure

Implementing Structure in a Print or Web Page

Use of proper code structure tags, such as <h1> tags for titles will aid in building a good structure that will help the flow of layout. Other benefits are for SEO (Search Engine Optimization) and 508 compliance.

If you do not have Adobe Dreamweaver installed, please feel free to use your favorite text editor and browser to alter the HTML code. Dreamweaver is not required, it simply makes the edits a bit faster.

  1. Using Dreamweaver, open the web page type-hierarchy/Demos/amendments.html and switch to code view. You can switch to code view, by clicking on the Code button in the upper-left corner of the Dreamweaver window.Code Button in Dreamweaver
  2. Look on line 9 to view the content and its very long length.Lengthy Content
  3. The structure of this file would be better rendered if we added proper tags, such as <h1> and <p> tags. Images need an ALT tag to be considered 508 compliant.
  4. Select the text and, using the Properties panel, apply formatting. (If your Properties panel is not showing as in the image below, go to Window > Properties.)Selected Text and Properties Panel
  5. Repeat as needed until the structure is complete.
  6. Select the picture of the flag and alter the ALT tag to read "Historic Flag".Flag Picture and Alt Drop-Down

This tutorial is based on Webucator's Typography Course. We also offer many other Design Training courses. Sign up today to get help from a live instructor.