Skip to content

Why your websites’ code structure matters

4 September 2019

When you’re creating your own WordPress theme or adapting an existing theme, pay attention to your code structure and semantics. This will benefit your website greatly: it improves your SEO because search engines know better what to expect on your site. It will also improve your site’s accessibility: meaning that people who use assistive technologies, can better use your website.

Where to start?

A good place to start when you’re talking about site structure, are HTML tags. There are a couple of these you can use, like <header>, <footer> or <main>. These tags are available since HTML5 and we call this semantic HTML tags. A semantic tag adds meaning to a piece of code. It specifies what the purpose or role of an HTML element is. For example, for a blog article, you can use <article>. You would use <aside> for a sidebar and <nav> for a navigational menu. And, you would use the earlier mentioned <header> element for the header of your website. Before HTML5 you would have used a <div> in most cases.

Using semantic HTML can tell a search engine or assistive technology what each part of your website is, and where the most important part of your content is located. At MDN you can find all HTML tags that are currently available to use on your website.

A good website structure with the correct semantic HTML tags could look like this. We have a header at the top of our website, followed by the main content and a footer at the bottom of the page. Our menu is wrapped in a <nav> element and the sidebar in an <aside>. Then finally, the blog content is located in an article. 

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Example</title>
</head>

<body>
 <header>
     <h1>
         Yoast
     </h1>
     <nav>
         <ul>
             <li>
                 <a href="#">Home</a>
             </li>
             <li>
                 <a href="#">About</a>
             </li>
         </ul>
     </nav>
 </header>
 <main>
     <article>
         <h2>This is the title </h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
     </article>
     <aside>
         <h2>This is the sidebar</h2>
     </aside>
 </main>
 <footer>
       <p>© Yoast 2019</p>
 </footer>
</body>

</html>

What if you’re not doing it right?

Not using semantic HTML will in most cases not affect the way your website looks visually. A header will look the same if you’re using a div instead of header. But, search engine bots won’t know what the most important part of your website is and assistive technologies like screen readers won’t know either. People who rely on this, can’t navigate your website properly or sometimes can’t even use your website at all. 

Only when your CSS isn’t loaded, your website will be affected visually, because every browser has some default styling that applies to headings and paragraphs. 

Reader mode

Using the correct HTML element for the right content has more added benefits, for example for people who like to use a browser’s reader mode. Some browsers like Safari and Firefox offer a reader mode, this is a distraction-free display of a website that allows you to read a blog post without ads, images or other distractions. If you’re reading this blog post in Firefox, there’s a little icon at the end of the address bar that lets you enter Reader View. Chrome will also get a reader mode, but that’s still behind an experimental flag at the moment. 

Reader modes will try to display everything that’s inside a <div> or <p>, but you do not want everything to show. A header or menu bar is usually not necessary for the article someone wants to read. By wrapping a navigation in <nav>, it will not be included in the reader mode. And by using the correct heading tags for your titles, you can make sure these will be displayed appropriately in reader mode. 

Compare the two screenshots below, left a website which only uses div’s and paragraphs, at the right a website with the appropriate HTML5 tags, like <header>, <nav>, <main> and <article>. This styling is also based on the browser’s default.

Two examples of reader mode, left without semantic HTML, right with the correct structure

Besides providing meaning to an element, HTML tags can also add some functionality to your website. <input type="tel"> will give users on a smartphone access to a special number keyboard while that particular input field has focus. And with <details>and <summary> you have a native collapsible element to use in newer browsers to create for example an FAQ.

What can go wrong?

Actually, a lot. The most common examples for misuse of HTML elements are buttons and links. For a link to another page, you should use <a href="">. If you use a <button> or another element with a JavaScript onclick to send people to a different page, it can diminish the user experience because your link might not be recognizable as such. People with assistive technology might not be able to click your link and a search engine won’t be able to crawl a link like this.

So, when should you use a button? For actions that will most of the time let you stay on the same page. Think about a submit button for a contact form. When you use a <button> or <input type="submit">, your users can submit a form by pressing enter on their keyboard.

Structure in CSS

Your HTML is not the only place to think about your site structure. Did you know your browser reads your CSS rules from right to left? With the following line in your CSS: ul li a, your browser will first search for every <a> element on your website, then search for the ones located in a <li>, followed by a query for those <li> in an <ul>. Ideally, you want to give these <a>‘s or <li>‘s a class name and target these in your CSS file. 

It’s also important to remember when structuring your CSS is that in the case of a duplicate CSS style, the last occurrence is the one that will be set. This can come in handy when you need to overwrite a style for a more specific use case, but keep in mind that it’s different than the way it works in HTML. If you have duplicate meta tags, the first line will apply, not the last. 

Check how you’re doing

If you want to know how you’re currently doing, there are a couple of tools you can use. In the Google Developer Tools in Google Chrome you can run a Lighthouse audit, which checks your website for accessibility and SEO, among other things. To run an audit, open the developer tools by pressing F12 and choose the tab Audits. You can choose different settings and run the audit to see how your website scores. 

For your CSS, there’s Project Wallace, an analytical tool for your CSS file. Note that these tools will not give you a guarantee your website is completely perfect, that still requires a manual audit, but it will give you an indication of how you’re doing.

Josee Wouters

Josee is a developer at Yoast. In her free time she likes to develop mobile apps.

Coming up next!