Evan X. Merz

In this post, I'm going to introduce some HTML elements that are still useful in the modern web development, even if they aren't used as often as div or span.

TLDR: These HTML elements are useful for accessibility and search engine optimization

You can build most webpages using only div and span elements, along with the structural elements html, head, and body. However, it's important to know about other elements if you want your page to rank highly in Google search results, or you want your page to be accessible to people with disabilities.

Headings and titles

Heading elements are used to show titles or subtitles. They are important to your visitors because they make text more readable. They are important to Google because Google uses them to understand the content of your pages.

Heading elements are h1, h2, h3, h4, and h5. The h1 element is the top level title of the page, and should only occur once on a page, otherwise Google Search Console will show a warning for that page, and you won't rank as highly in web searches.

Here's an example of an h1 element.

<h1>I'm a page title that can be seen by the visitor</h1>

It's important to note that there IS an actual title element in HTML. When the title element appears in the header, it is used to set the text that is shown in the tab of your web browser.

<title>This is the text at the top of the tab</title>

Paragraphs in HTML

Before CSS was invented and standardized, there were lots of HTML elements used to format text. You can still use some of these, but it is widely discouraged. The "b" element bolds the enclosed text. The "i" element applies italics to the enclosed text. The "br" element adds a newline. You should never use any of those elements, but there is one element that is still quite useful.

The "p" tag is used to enclose a paragraph of text. It is useful as something separate from a div because it includes useful browser default styles, and because it serves as a good way to style the body text for your page.

<p>I'm a paragraph with some nice browser default styles.</p>

Browser defaults are a complex and controversial topic. Each browser starts with its own set of default styles so that a basic HTML page will be readable. There are many modern packages that override or eliminate these styles so that they don't interfere with a site's custom styles. I don't have a strong opinion on browser defaults in either direction.

Lists in HTML

Lists are another bit of semantic HTML that are still widely used. There are two types of lists in HTML, ordered lists and unordered lists. These can be represented by the "ol" and "ul" elements respectively. List items can be represented by the "li" element.

So what's the difference between the two list types? Ordered lists are numbered, while unordered lists are bulleted.

<ol>
  <li>First item</li>
  <li>Second item</li>
</ol>

If you drop that into an HTML file then you will see something like the following.

I encourage you to replace the "ol" elements with "ul" and see what happens.

Nav, main, and footer elements in HTML

Finally, I want to recommend using the elements nav, main, and footer. These elements are used to encapsulate the navigation portion of the page, the main content of the page, and the footer of the page. These elements are absolutely VITAL for accessibility, as they tell screen readers about which part of the page they are reading. You need to remember accessibility for two reasons. It is important to allow as many people as possible to access your site, and Google will penalize you if you don't.

They are used just like divs.

<nav>
  <ul>
    <li>Menu item 1</li>
    <li>Menu item 2</li>
    <li>etc</li>
  </ul>
</nav>