What is HTML?
HyperText Markup Language (HTML) is the foundation of any webpage, laying out the overall structure and content of the page. HTML facilitates the addition of many different types of elements to a webpage, for example hyperlinks, images, headings, and paragraph text. Webpage content in HTML documents is wrapped in “HTML Tags”, short snippets of code which indicate role of the content in the document. Some examples of common HTML tags are:
<a>represents a hyperlink: clickable text that can be used to navigate to a different webpage.<h1>represents a top-level heading. This is usually used to display the page title.<p>represents paragraph text.
Correct use of HTML tags, in combination with CSS styles, allows browsers to render the webpage with appropriate styling and structure. HTML can be hand-written, or generated by software like page-builders for a more visual and beginner-friendly experience. Regardless of the method used to generate the HTML though, a solid understanding of HTML code is essential in troubleshooting, customization, and ensuring website navigability.
What is Semantic HTML?
Semantic HTML refers to the practice of ensuring that the HTML code that composes a webpage clearly and logically describes the purpose of different areas on the page. In the early days of web design, creating semantic HTML was more straight forward, as webpages generally resembled simple documents that could be semantically coded through use of heading tags and paragraph tags. However, as the web evolved, page structures became increasingly complex with elements like modals, sliders, and accordions increasing in popularity.
With this growth in page complexity came heavy usage of the <div> and <span> tags, semantically meaningless tags used to group content together for styling purposes. This posed issues to web accessibility and search engine crawling, as webpage content became more difficult for programs to interpret. So, in 2008 with the release of HTML version 5, new HTML elements were introduced that would allow web developers to more clearly state the function and role of particular areas in the webpage. The most commonly used semantic elements, according to to W3Schools (https://www.w3schools.com/html/html5_semantic_elements.asp) are:
<section>represents a thematically linked block of content. Commonly used for marking out chapters, introductions, contact information.<article>represents a standalone piece of content, like a blog post or news story. The content inside an article tag should make sense on its own.<header>represents introductory content to the page and may include navigation links.<nav>contains a block of navigation links for browsing a website.<aside>is used for content which is not part of the main content, but is related. For example, a comments section, or a short passage of text providing context to the main content.
Why is Semantic HTML Important?
As mentioned earlier, semantic HTML was introduced to make webpages more easily interpretable by assistive technologies like screen readers, and also to enable search engine crawlers to identify the valuable content on a webpage. Although accessibility is not a direct ranking factor for Google, ensuring that a website can be consumed by people who require assistive technologies improves the general user experience of a site, reducing bounce, increasing engagement, and thereby indirectly impacting rankings.
Ensuring that the HTML composing a webpage is semantic is not just a technical detail. It’s a fundamental step in creating a well-optimised, accessible, and user-friendly site. When you prioritise semantic HTML, your webpages tend to perform better in search rankings, by reaching a wider audience and offering a superior experience for all users.