In this episode of the HTML All The Things podcast, Matt and Mike dive into why good HTML practices are essential for building better, more accessible, and maintainable websites. They kick things off by explaining the importance of semantic HTML for readability, SEO, and accessibility—covering useful tags like <header>, <footer>, and <article>.
Matt and Mike also discuss how developers can properly create and use custom attributes—like data-* attributes—to store extra information cleanly without relying on fragile class naming conventions. Finally, they emphasize HTML's critical role in accessibility, highlighting best practices such as using ARIA attributes appropriately and providing meaningful alt text for images.
To cap off the episode, the hosts share some lighthearted updates about their holiday plans and give a shout-out to this episode’s sponsor, Magic Mind.
https://magicmind.com/HTMLPOD20 - 20% off for one-time purchases and subscriptions (Use the link and code!)
Code: HTMLPOD20
Wix Studio is the new web platform tailored to designers, developers and marketers who build websites for others or for large organizations. The magic of Wix Studio is its advanced design capabilities which makes website creation efficient and intuitive.
Check out Wix Studio today.
Prices subject to change and are listed in USD
HTML is often viewed as the simplest component of a website, leading some developers to prioritize CSS or JavaScript instead. However, HTML serves as the foundational structure of every webpage, making it crucial for creating accessible and maintainable web experiences. HTML acts as the skeleton of a webpage—the foundation on which every website or web app starts its rendering journey. Foundations may not be the most exciting part of development, but they are critically important.
In this episode, we'll cover:
<div> tags to improve readability, SEO, and accessibility.data-* custom attributes for clean, dynamic web development.<header>: Defines the top section of a page, often containing navigational links or introductory content.<article>: Used for self-contained content that could stand alone, like a blog post or news article.<footer>: Marks the end section of a page or a content section, typically for copyright or contact information.<nav>: Represents a set of navigational links for a website.<section>: Groups related content under a common theme or purpose.<aside>: Contains tangentially related information, like sidebars or pull quotes.These semantic tags provide structure and meaning, unlike generic <div> elements.
<div>:<div> for structure or styling instead of semantic elements.1<div class="header">
2 <div class="title">Welcome to My Website</div>
3</div>1<header>
2 <h1>Welcome to My Website</h1>
3</header>data- to store extra information in elements. This approach keeps the HTML structure clean and allows easy access to data without relying on fragile class naming conventions or external scripts.data-user-id, data-theme.data- to avoid conflicts with standard attributes.1<button data-user-id="123" data-action="delete">Delete</button>1<div data-category="electronics" data-stock="25">
2 Laptops
3</div>data-* attributes to enable dynamic interactions without hardcoding values.<nav> element helps these tools provide a clear outline of a website’s main sections, while proper use of headings allows users to navigate content more efficiently.1<!-- Avoid unnecessary ARIA roles -->
2<button aria-role="button">Click Me</button>
3
4<!-- Redundant --><!-- Use the native button element -->
5<button>Click Me</button>1<label for="email">Email:</label>
2<input type="email" id="email" />1<img src="photo.jpg" alt="A scenic mountain view at sunset." />1<nav>...</nav>
2<main>...</main>
3<footer>...</footer>1<article data-post-id="45">
2 <header>
3 <h2>How to Write Better HTML</h2>
4 <p>Published on <time datetime="2024-12-12">December 12, 2024</time></p>
5 </header>
6 <section>
7 <p>Using semantic HTML can make your website easier to maintain...</p>
8 </section>
9 <footer>
10 <button data-action="like">Like</button>
11 <button data-action="share">Share</button>
12 </footer>
13</article>Timestamps are machine generated - there may be some errors.
