Semantic HTML Basics In 5 Minutes

#webdev #html #codequality #beginners

Semantic HTML tags are tags that have a meaning. If you're using only <div> and <span> tags, then the HTML you write isn't "semantic".

For example, when you want to show a title, you will most likely choose the headings <h1>, <h2>, <h3>... And it is a good thing. You are showing that the text in your heading tag is... a heading!
The non-semantic way to reach the same styling would be to use a <span> tag with CSS.

Using tags like <header>, <footer> and <section> allows you to express the intent behind the usage of a tag in a web page. This helps:

Increase maintainability, as other developers (and yourself) will understand your thought process behind the creation of the page.
Improve SEO, as search engines will be able to understand your content more easily.

In this video I talk about the difference between the article and section tags, and show two examples showcasing the <header>, <footer>, <time>, <address>, <main>, <aside> tags (and others).

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.