The Front End Experience: HTML

Hypertext Markup Language (HTML) is the standard markup language for Web pages. It consists of a series of elements that describe the structure of a Web page. When a browser renders HTML, it uses these elements to display the content. HTML is often accompanied by a Cascading Style Sheets (CSS) file that adds style to your Web page and a scripting file, such as JavaScript, that gives your Web page functionality.

In this article, we focus on best practices in a few areas, including optimization, headings, lists, and accessibility. Following these best practices will keep your HTML clean, well-structured, and accessible for all users.

Optimization

Here are a few best practices for optimizing HTML and making your code more readable.

Dos and Don’ts

• (Do) Review Ajax code. Processing time will increase when corrections need to be made during an Ajax request.
• (Do) Reduce HTML bloat. Unnecessary HTML will negatively impact performance by increasing Ajax request times and expanding the component tree.
• (Don’t) Use inline styling and scripting. These make the HTML cluttered and hard to read. They can also impact performance. Instead, separate them into their own CSS and JavaScript files.

Heading elements

Heading elements (<h1> to <h6>) are used to define the content hierarchy of an HTML page, with <h1> being the most important and <h6> being the least important. Each uses a difference size to indicate their importance.

Dos and Don’ts

• (Do) <h1> should represent the main heading or subject for the whole page and should only be used once.
• (Do) Use headings in order, starting with <h1>, then <h2>, etc.
• (Do) Break text into sections that make sense and use headings and subheadings that describes the content in each section.
• (Don’t) Use heading tags to resize text. Use CSS instead.
• (Don’t) Use excessive nesting. Most content should be limited to <h1> to <h3>. Beyond that, your page will be cluttered.
• (Don’t) Create a heading structure using Roman numbers, letters, or numbers.
• (Don’t) Use a different or larger font to create headings or heading structure.

Lists

Lists organize multiple points and help users follow a sequence of steps. Unordered lists start with the <ul> tag, and ordered lists start with the <ol> tag. Each uses the <li> tag to specify a list item.

Dos and Don’ts

• (Do) Use the ordered list tag when the order of the items is important.
• (Do) Structure all lists with proper HTML tags.
• (Do) Make the information in your bullet points concise.
• (Don’t) Make bulleted list items using indents, bolds, symbols such as dashes or asterisks, or any other punctuation.

Accessibility

Most of the best practices for accessibility can be thought of as general best practices. If a page is designed with accessibility in mind, it will generally be a well-organized and clean page that fulfills a specific purpose. After some general dos and don’ts, we will go into a few subsections, including Semantic HTML, Accessible Rich Internet Applications (ARIA), and Navigation.

Dos and Don’ts

• (Do) Add an empty alt tag to an image to mark it as decorative. Decorative icons and images are skipped over by screen-reading software.
• (Do) Add assistive text or an ARIA label for icons to mark them as informative icons. Informative icons and images display information that the surrounding text doesn’t. These are not skipped over by screen readers.
• (Do) Add an alt description to images.
• (Do) Pay attention to the contrast ratio between text and the text’s background. The ratio should be at least 4.5:1.
• (Do) There are many tools that check if your HTML is accessible. Use them. One good example is https://www.aremycolorsaccessible.com/.
• (Do) If adding text on top of an image or non-solid background, place your text on a solid portion of the image or background.
• (Do) On inputs, always include visible labels to help users understand the purpose of the input at all times.
• (Do) Design helpful error messages. Place the error text below the field and describe how to fix the problem.
• (Do) When adding a link to another page, clearly and uniquely describe the target using the link label.
• (Do) Specify that link is going to an external domain by adding an external link icon and set alt= “opens in a new window”
• (Do) Apply proper heading nesting and order.
• (Don’t) Use color alone to present information or request an action.

Semantic HTML

HTML with semantic elements clearly describes its meaning to both the browser and the developer and is the base of all accessibility. Semantic elements clearly describe its content and can help users identify where they are on a page, such as <form>, <article>, and <table>.

Dos and Don’ts

• (Do) Use semantic HTML with the appropriate ARIA attributes and roles when needed.
• (Do) Include clear semantic landmarks that help users identify where they are on a page. These include header, navigation, main content area, articles, asides, body, and footer.

Accessible Rich Internet Applications

ARIA works by applying special attributes to HTML DOM nodes and contains three types of attributes: states, roles, and properties.

• States describe the status of an ARIA component to the browser’s accessibility tree, such as if an input is disabled or read-only, if a checkbox is checked, etc.
• Roles give semantic meaning to elements that traditionally don’t have any semantic meaning, such as <div> and <span>. When adding a role to an element, you are telling the element to identify itself as that role. For example, if you add role= “button” to a <div>, you are telling the <div> to identify as a button. The <div> now shows up in the browser’s accessibility tree as a button.
• Properties are attributes that describe the nature of an object or represent a data value associated with the object.

Dos and Don’ts

• (Do) Once you add a role to an element, you must also add all the functionality of that role to the element. For the example of adding a button as a role, you must also include focus state and keyboard interactivity.

Navigation

Your HTML should always let the user know where they are in your application and the actions they can take. Properly maintaining focus is a key factor in making your application’s navigation accessible.

Dos and Don’ts

• (Do) Use consistent navigational elements.
• (Do) Match the tab order with the reading order, such as left to right for English.
• (Do) Use visible focus indicators for interactive items.
• (Do) After changing context, the user should know where they are on the page.
• (Don’t) Skip heading levels. Screen reading software will create a list of all the headings on the page, which the user can then use to determine the hierarchy of the content. This list can then be used to navigate.
• (Don’t) Change context unless the user requests it or is notified in advance.

We hope you found this best practices article useful as you strive to keep your HTML clean, well-structured, and accessible for all users. Feel free to leave us a comment or question below!

About Cervello, a Kearney company

Cervello, a Kearney company is a data and analytics consulting firm and part of Kearney, a leading management consulting firm. We help our leading clients win by offering unique expertise in data and analytics, and in the challenges associated with connecting data. We focus on performance management, customer and supplier relationships, and data monetization and products, serving functions from sales to finance. We are a Salesforce partner and help our clients implement, customize, and optimize the platform into the best solution for their needs.