A11y Front-end Roadmap #0 - Semantics
Start on the right track and save lots of time later.
For developers, understanding and implementing HTML semantics is the first step. A strong foundation in semantics will underpin a good application; focusing solely on logic and algorithms will result in an application that is only loosely usable.
1. The meaning of “HTML Semantics”
HTML semantics refers to the use of HTML markup that conveys meaning about the content it contains. By using semantic tags, developers can provide context to both users and technologies, enabling them to navigate and interact with web content more easily.
Benefits of Using Semantic HTML
Improved Accessibility: Semantic HTML helps assistive technologies interpret the structure and meaning of content, making it easier for users with disabilities to navigate.
Better SEO: Search engines favor well-structured semantic content, which can lead to improved search rankings.
Future-Proofing: As web technologies evolve, adhering to semantic guidelines helps ensure compatibility with future tools and applications.
2. Key Semantic HTML Elements
To build a solid foundation for accessibility, it is essential to familiarize yourself with the primary semantic HTML elements. Undoubtedly, some elements are more common than others. Try to at least look at all the already available tags, so you can hopefully remember that there's something useful for all your needs without he need to code a custom element from scratch. You don't have to reinvent the wheel, but make an effort to familiarize yourself more deeply with the most common ones. You will have the chance to use them often (repetition helps memorization; don't worry), but knowing them thoroughly will speed up development and prevent you from having to go back to implement further changes on already completed components or sections.
My suggestion is to aim at least at the following ones:
Basic Elements:
<div>,<span>,<p>,<br>,<img>,<table>(with its sub-elements like<tr>,<th>,<td>,<tbody>,<thead>,<tfoot>,<caption>),<ul>,<ol>,<li>Typography:
<h1>to<h6>,<p>,<br>,<b>,<strong>,<em>Interactions:
<a>,<button>Structure:
<div>,<span>Tables:
<table>,<tr>,<th>,<td>,<tbody>,<thead>,<tfoot>,<caption>Lists:
<ul>,<ol>,<li>Images:
<img>,<picture>Forms:
<input>,<textarea>,<form>Regions:
<main>,<header>,<footer>,<aside>,<article>,<section>,<nav>
I know, I know, there are a lot, but keep in mind that there are more than 110 HTML tags!