10 HTML Concepts That Every Web Developer Should Know

Hey folks! Let’s talk HTML (but not the boring way)

Sure, we all know HTML is the backbone of the web. It’s been around since the dawn of the internet.

But let’s be real: HTML is more than just a bunch of tags wrapped in angle brackets.

When used right, it can shape powerful, accessible, and search-friendly websites that stand out from the crowd.

In this blog, we’ll explore 10 essential HTML concepts every web dev should know — with easy examples, smart use cases, and fun tips to help you level up. Let’s get started!

1. Use of Semantic Tags instead of <div> or <span>

The word “semantic” itself means study of meaning.
So, Semantic tags in HTML are the elements that clearly describe their meaning to both the browsers and the developers.
The <div> and the <span> tag are for styling but do not convey any meaning so sometimes the developer apart from the one who wrote the code gets confused by looking at the code and takes time to understand the code.

Semantic tags are used for :

• Improving readability.
• For better SEO.
• For improving Accessibility.
• Code becomes easier to maintain and update.

Let us understand this by looking into a code snippet
So following code snippet shows how is it when we use semantic tags Vs. without using it.

So here we can clearly see the difference as how semantic tags adds value to our code.

2. Importance of using alt attribute in <img> tag

alt is an attribute that is used with the <img> tag that provides an alternative information for an image if a user cannot view the image for some reason. alt attribute is the abbreviated form of alternative text.

Basic usage of alt attribute:

Not using alt attribute can lead to various issues like:

Missing alt means missed opportunity to rank in image search or improve your content relevance.
If the image fails to load, users see nothing — no description, no context.
While not technically a breaking error, some HTML validators will warn you that alt is missing — especially if your page claims to follow accessibility standards like WCAG or ARIA.
Screen readers for visually impaired users won’t know what the image is about
Now let’s see the two types of basic usage of alt

• alt=”…”

Use it when the image adds meaning or content.
example usage of this is as follows:

See how this form of alt describes the meaning of the image. We can use this for product photos etc.

• alt=” ”

Use it when the image is self-explanatory and do not need any explanation. example usage of this is as follows:

See here we do not need any kind of explanation so just alt=” ” is enough.

3. Using ARIA in your HTML Code

ARIA is the abbreviated form of Accessible Rich Internet Applications. It is a set of special HTML attributes that help improve accessibility for users who rely on assistive technologies like screen readers.
Native HTML elements (like <button>, <input>, etc.) come with built-in accessibility. But when you create custom UI components (like dropdowns, modals, or sliders using <div> and <span>), they lack semantic meaning. ARIA bridges that gap.

Common ARIA attributes are as follows:

Example-1 : Custom Button

Used when you’re not using the native <button> tag.

Example-2 : Expandable Menu

Tells screen readers that this button controls the menu and whether it’s open or closed.

So these were some of the examples that use aria to enhance the accessibility of their code.

4. type attribute in <button> tag

type is a very important attribute in the <button> tag.
Here are some lesser known facts about the type attribute

If we do not specify type in the button tag, the browser assumes type=”submit” as the default value.
The user should use type=”button” to avoid accidental submission of form.
One more interesting fact is the difference between <input type="submit"> and <button type="submit">

<input type=”submit”> is self-closing and you cannot put any HTML inside it.

<button type=”submit”>is not self-closing and we can put any HTML content inside it.

5. readonly Vs. disabled attribute in <input> tag

The readonly attribute in HTML <input> tags is used to make an input field non-editable by the user, without disabling it.

The disabled attribute in HTML is used to completely disable an input element, meaning the user cannot interact with it at all — no typing, no focusing, and its value won’t be submitted in a form.

6. Block-level Vs. Inline HTML elements

Let me give you a code snippet and you need to think of the placement of the elements before you look into the answer.

Here the three button elements are placed inside the div element. The obvious response by looking at it once would be as follows:

Figure 1: Wrong answer

But the correct answer to the placement of the buttons is as follows:

Figure 2: Correct answer

The reason being:

<button> is an inline element but <div> is a block-level element.

Inline elements in HTML are elements that flow within the text and do not force a line break. They only take up the necessary width for their content, unlike block-level elements which start on a new line and take up the full available width.

So, just by keeping a track of which HTML elements are block-level and which are inline HTML elements can save your lot of time.

7. <b> Vs. <strong>

<b> tag stands for bold and <strong> tag stands for strong.
Both the tags are used to make a specific text bold.
<b> is used for basic styling with no semantic meaning but <strong> tag is used where we want to provide a semantic meaning to a specific text like the user wants to show some warning messages, important points and emphasizing key points.
let us understand this with a code snippet

The output will be shown as follows:

The visual effect is the same for both the tags but <strong> adds a semantic meaning

8. <div> Vs.<section>

<div> is like a basic container where we can put any type of element.
<section> is like a semantic container which is used for grouping related content with a heading, heading is the most important thing in <section> tag.

9. <section> Vs. <article>

Use <article> for self-contained shareable content (like blog posts, comments, news stories).
Use <section> to group related content inside your page (like a "Features" section or a "Testimonials" block).

10. The lesser known <meta> tag

The meta tag is like a label on a file which tells the browser and the search engines what the page is about, how to display it, and how it should behave — but none of this is shown directly to visitors.
It is always placed inside the <head> of HTML:

Some more details about the above attributes:

charset: It sets the text encoding (usually UTF-8) and prevents weird characters from showing up. If a webpage supports multiple languages, including Hindi, Japanese, and Arabic and special characters show up as boxes or gibberish then use <meta charset=”UTF-8”>
viewport: It makes your page responsive and looks good on phones and tablets.
description: It describes your site to search engines and helps Google show better previews.
It is used to control the browser behaviour. One Use Case can be if a bank wants to prevent the sensitive pages from being cached by the browser then use meta tag like <meta http-equiv = ”cache-control” content = ”no-store”>
And that’s a wrap on the core HTML concepts every developer should know.

So go ahead — discover, experiment, build, break stuff, and build again. The web’s your playground.

Until next time — happy coding!