Page Layouts

Documentation and examples for global typefaces and typography styles.

Accessibility

Use Semantic Elements

Common semantic elements:

Page Structure:

• <section>
• <main>
• <aside>
• <header>
• <footer>
• <nav>

Elements:

• <h1> through <h6>
• <p>
• <article>
• <ul>
• <a>
• <figure>

Only use <div> or other non-semantic elements when there is a sufficient semantic element or because you don’t want to add semantic meaning.

HTML Markup

Image

• Include ALT text
• Use a descriptive file name
• Use an empty ALT attribute for decorative images

Links

Use clear link wording

• Good link text: Visit the Focus IT website
• Poor link text: Click here to visit our website

Using target=”_blank”

Links to external pages should open in a new tab. Links to sub pages of the current site should generally open in a new tab.

Include a link title

By using the title attribute, we can give the user a better idea of the purpose and action of the link.

ALT Text

Include ALT text by using the alt HTML attribute to provide semantic context of the link.

<h1> Tag:

Only to be used once per page.

Other:

Some of the below items are for reference only, since wordpress handles the document type declaration and setup.

• Always use the “lang” attribute
• Always close tags
• Avoid using inline CSS
  • Exception, if necessary: when using inline CSS in the Divi Builder, it is processed and added to a style sheet upon the page loading. Best practice is to avoid this and the “CSS” area in the advanced section of the module, or in the “Additional CSS” area of the theme.
• Use the title and meta tags
• Declare character encoding (UTF-8) and validate HTML as you work
• Declare the doctype

<h1> Tag:

Only to be used once per page

Document Formatting

Best practices for writing HTML on pages from scratch or in custom code modules in Divi.

• Use lowercase markup
• Wrap long lines of HTML for readability