Dive into the vibrant world of semantic HTML, where meaningful tags enhance accessibility and SEO. Explore the power of structural tags like nav and section over generic divs. Discover lesser-known gems like sub and sup for better user experience. The hosts discuss wishlist items for future HTML elements, including user-friendly features like modals. They even compare web dev insights to thrilling tales of an art heist, blending tech talk with captivating storytelling.
01:02:52
forum Ask episode
web_stories AI Snips
view_agenda Chapters
auto_awesome Transcript
info_circle Episode notes
insights INSIGHT
Semantic HTML Explained
Semantic HTML means using tags that describe content, like <header>, <nav>, or <article>.
This is crucial for accessibility, SEO, and easier styling compared to just using <div> elements.
volunteer_activism ADVICE
Why Semantic HTML Matters
Prioritize semantic HTML for accessibility, benefiting users with disabilities.
It also improves SEO and provides better default styling.
volunteer_activism ADVICE
Block-Level Text
Use paragraph tags for block-level text, even without semantic meaning.
Remove default styling with CSS if needed, instead of using divs.
Get the Snipd Podcast app to discover more snips from this episode
In this episode of Syntax, Scott and Wes talk about HTML — interesting HTML elements, things you might not know, wish lists for the future, and more!
Prismic - Sponsor
Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
Sentry - Sponsor
If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Cloudinary - Sponsor
Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.
Show Notes
02:34 - What is semantic HTML?
What is the content? HTML should describe the content first and foremost.
04:04 - Why semantic HTML?
Accessibility
SEO
Styling is easier
HTML tags that have meaning:
Almost all of them
Common ones:
/ and
to
20:04 - Structural / Layout tags
You can have more than one header
Header cannot be in a footer / address / header
26:18 - Some fun ones you might not know
/
and strike?
/ /
A ruby annotation is a small extra text, attached to the main text to indicate the pronunciation or meaning of the corresponding characters.
and
While is used to convey how much work in a task has been completed, the element is used to display a measurement on a known scale. This could be something like the current disk usage on your computer, or a temperature measurement (within a defined range).
32:12 - Visual vs Semantic tags
Almost all tags in HTML are semantic
vs and vs
and are NOT deprecated like many have said
The element is for content that is of greater importance, while the element is used to draw attention to text without indicating that it's more important.
35:40 - HTML tags with no meaning:
37:51 - Some elements have special functionality or styling
Syntax - Tasty Web Development Treats