This header is coded with properly semantic markup

The two headings in this document look identical when viewed by most browsers, but a crucial difference is revealed when you view the source.

The heading above uses the <h1></h1> tag. This tag tells browsers (e.g. Safari) and search engines (e.g. Google) that the content inside the tag is the document's top-most level heading.

This header is badly coded

The heading above this paragraph uses the <font></font>, <p></p>, and <b></b> tags to make the header look big and bold when viewed in a browser. These tags tell browsers and search engines nothing about the role this content plays within the document as a whole.

Remember:

HTML markup is considered semantic when standard HTML tags are used to convey meaning and content structure, not simply to make text look a certain way in the browser (Web Style Guide 136).

Back to Site Structure 1 slides