Using Semantically Correct Markup

HTML was not designed with display considerations in mind. It focused solely on the structural logic of documents and ignored the need for the visual logic of graphic design and typography. HTML is used to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links and other items. Structural elements available in HTML should be used for their specific purpose; like heading tag should not be used as a means to format something that is not a heading. Doing this messes up the heading hierarchy for various agents such as search engines and assistive technologies like screen readers. Good HTML structure is based on logic, order, and using semantically correct markup. To define the appearance and layout of text and other elements on a web page Cascading Style Sheet must be used.

Screen reader and other assistive technology users have the ability to navigate Web pages by structure. This means that the user can read or jump directly to top level elements (<h1>), next level elements (<h2>), third level elements (<h3>), and so on. Viewing or listening to this outline gives them a good idea of the contents and structure of the page. Using semantic rules information on a webpage can be presented to the users in a logical format regardless of the platform or automated tool they use.

Following should be considered while designing a page structure:

Do’s:

1. Page content must follow a logical structure.
2. Every page starts with the <!DOCTYPE> declaration.
3. Every page has a unique title that reflects the content of the page.
4. Every page head section should include meta data.
5. Heading structure on a webpages should be structured in a hierarchical manner – <h1> being the most important may be used for page title/heading then <h2> may be used for major section heading, <h3> for sub sections of the <h2> and so on.
6. Only one <h1> heading is allowed per page and it should provide a summary of the content.
7. Sub-section headings <h2> to <h6> are important and should be nested sequentially.
8. Paragraphs should be short and concise.
9. Lists should be preceded by a relevant heading.
10. Lists should not include block items such as paragraphs or tables.
11. Tables should be used for representing tabular data only. It should not be used for layout.

Dont’s:

1. Do not skip structural hierarchy level of heading elements (e.g., donot use <h3> directly after <h1>). On a web page, <h2> elements should follow <h1> element; <h3> elements should follow <h2> element, etc.
2. Headings should not be used to create font effects; use style sheets to change font styles.
3. Lists should never be used for merely indenting or other layout purposes. Nested lists should be coded properly.