Explore our comprehensive cheat sheet to learn the art of semantic HTML. Uncover key elements and best practices that enhance your website’s structure and accessibility. Elevate your coding skills effortlessly, creating more meaningful, search engine-friendly pages. Dive into our Semantic HTML Cheat Sheet for a quick reference on building better web experiences.
What is semantic markup in HTML?
In HTML, practicing semantic markup involves utilizing HTML elements that convey meaning about the structure and content of a web page. In this context, the term “semantic” is relevant to the meaning or purpose of the elements employed. Semantic markup goes beyond the mere use of HTML tags for defining visual content presentation; it offers a means to express the meaning and purpose of every content piece within the document.
Semantic HTML elements enhance the understanding of a web page’s structure for both browsers and developers. Using semantic markup empowers developers to craft web pages that possess not only visual appeal but also a well-structured and meaningful design. It also plays a crucial role in accessibility, search engine optimization (SEO), and the overall maintainability of the code. It assists users with disabilities through accessibility tools, helps with content indexing and ranking by search engines, and aids developers in comprehending and maintaining the code.
Semantic Sectioning Tags
HTML5 introduces semantic elements like <article>, <nav>, <aside>, etc. Use them appropriately for better document structure.
Sample Structure:
<header>
<nav></nav>
</header>
<main>
<article>
<section></section>
<section></section>
</article>
</main>
<aside></aside>
<footer></footer>
Header
Typically, the header of the web page, which often contains the website's logo and NAV tag. Can also be used as an ARTICLE header.
Nav
Typically contains the website's main navigation, but can contain other navigation as well.
Footer
The footer typically contains secondary links, the copyright notice, and the privacy policy for a website. Can also be used as an ARTICLE footer.
Main
This should contain the main content of your webpage.
Aside
The aside content should be indirectly related to the surrounding content. This tag is often used for sidebars.
Article
An independent, self-contained block of content such as a blog post or product.
Section
A section groups content thematically and must contain a heading. It can be nested in an article or vice versa.
Hierarchical Heading Tags
- Use <h1> for main headings, followed by <h2> for subheadings, and so on.
- Maintain a hierarchical structure and avoid skipping heading levels.
- You must include a heading tag in each <section>.
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>
Best Practices for Other Semantic HTML Tags
Paragraphs and Line Breaks
- Use <p> for paragraphs to structure your text logically.
- Use <br> sparingly for line breaks within a paragraph.
<p>This is a paragraph of text.</p>
<p>Another paragraph.</p>
Alt Text for Images
- Include descriptive alt attributes for images to enhance accessibility.
- Don’t include alt text if the image is purely decorative, like a checkmark.
<img src="image.jpg" alt="A descriptive text about the image">
Lists for Structured Data
- Use <ul> for unordered lists and <ol> for ordered lists.
- Use <li> for list items.
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Label Form Elements
- Use <label> to associate text labels with form elements like <input>.
<label for="username">Username:</label>
<input type="text" id="username" name="username">
Common Inline Elements
- Use <em> for emphasized text (not <i>).
- Use <strong> for strong importance (not <b>).
- Use <a> for hyperlinks and write meaningful link text (not ‘read more’).
Avoid Using Divs Unnecessarily
- Use semantic elements over generic <div> elements.
- Use these semantic elements <section>, <article>, and <nav>, etc. when appropriate.
Validate Your HTML
By following these best practices, you’ll not only create more accessible and maintainable code but also improve the overall structure and clarity of your web pages. Test your site with W3’s online validator to ensure your HTML adheres to standards.
Markup Validation ServiceNeed help?
We can perform a comprehensive site audit today to optimize performance, enhance user experience, and boost overall effectiveness. Let us uncover opportunities for improvement and ensure your online presence is at its best.