In this article of HTML tutorial, we will only talk about non-semantic tags in detail, so that you can easily understand what these tags are, why they are used, and what is their role in creating a web page.
- What are non-semantic tags?
- How are they used?
- What are their important properties?
- Which tags are non-semantic?
- How are they useful in SEO (Search Engine Optimization)?
What is a non-semantic tag?
There are two types of tags in the world of HTML:
- Semantic tags - which define the meaning of the content. Such as: <header>, <footer>, <article>, <nav> etc.
- Non-semantic tags - which describe the structure of the content, but do not tell its meaning or importance.
Non-semantic tags are HTML elements that are used only to create layouts, but the browser or search engine is not told what content is in it.
By looking at their name, it is not clear what type of content they are holding.
Example:
- <div> - A division is created, but it does not tell what is in it.
- <span> - It is used to style a small thing in between the lines, but does not tell its context.
Why and how are non-semantic tags used?
Non-semantic tags are mainly used for layout and styling. We use them when we need to make a part look different or apply CSS.
Why are they used?
- To group elements of the page.
- To apply CSS styling.
- Get access to a section via JavaScript.
- To create a responsive design.
How to use?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Non-Semantic Tags Example</title>
</head>
<body>
<!-- Non-semantic tag: div -->
<div class="header">
<h1>Welcome to my website</h1>
</div>
<!-- Non-semantic tag: span -->
<p>
<span style="color: red;">Important!</span>
</p>
</body>
</html>
In the above example:
- <div> creates a block.
- <span> highlights a small part of a line.
Important Attributes of Non-semantic Tags
The following attributes are commonly used with non-semantic tags:
| Attribute | Description |
----------------------------------------------------------------|
| id | Gives a unique identifier to an element |
| class | To give style to one or more elements |
| style | To give inline CSS |
| title | To show a tooltip |
| hidden | To temporarily hide an element from the page |
| data-* | For custom data attributes used in JS |
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Non-Semantic Tag Example</title>
</head>
<body>
<!-- Non-semantic tag: div with id, class, style, and title attributes -->
<div id="box1" class="container" style="background-color: yellow;" title="main box">
Hello world!
</div>
</body>
</html>
List of all non-semantic tags in HTML
There are some important non-semantic tags in HTML that are used most frequently. Below is their list with short description:
| | Tag | Type | Description | Semantic Meaning | Status | Replacement (If Deprecated) |
| -- | ---------- | ------------------- | -------------------------------------------------------- | ----------------- | -------------------| -------------------------------------------------|
| 1 | `<div>` | Block-level | Divide the page into sections. Mostly CSS/JS is used. | | Active | — |
| 2 | `<span>` | Inline-level | To style a small part of text. | | Active | — |
| 3 | `<b>` | Inline-level | Displays text in bold. | | Active | `<strong>` for semantic meaning |
| 4 | `<i>` | Inline-level | Italicize the text. | | Active | `<em>` for semantic meaning |
| 5 | `<u>` | Inline-level | Underline the text. | | Active | CSS `text-decoration: underline` |
| 6 | `<font>` | Inline (Deprecated) | Used to set the color, size and font of the text. | | Deprecated | CSS (`color`, `font-size`, etc) |
| 7 | `<center>` | Block (Deprecated) | The content was displayed in the center of the page. | | Deprecated | CSS `text-align: center` |
| 8 | `<big>` | Inline (Deprecated) | The text is displayed larger. | | Deprecated | CSS `font-size` |
| 9 | `<small>` | Inline (Deprecated) | Made the text smaller. | | Deprecated | CSS `font-size` |
| 10 | `<strike>` | Inline (Deprecated) | The text appeared in lines. | | Deprecated | `<del>` or CSS `text-decoration: line-through` |
Examples of non-semantic tags
Let's look at some practical examples:
Example 1: Using <div>
<body>
<div class="header">
<h1>My website</h1>
<div>
<div class="content">
<p>This is the main content of the page.</p>
</div>
</body>
Example 2: Using <span>, <b>, <i>, <u>
<body>
<p>This is a <span style="color: red;">very important</span> message.</p>
<p><b>Bold text</b></p>
<p><i>Italic text</i></p>
<p><u>Underlined text</u></p>
</body>
What is the role of non-semantic tags in SEO?
It is worth noting that non-semantic tags do not help in SEO directly, but if used correctly, your HTML structure becomes clean and readable, which indirectly helps in SEO.
Tips for SEO:
- Keep class and ID names meaningful.
- Maintain non-semantic tags and semantic structure (eg <h1> to <h6>, <p>, etc.)
- Using CSS, content can be styled properly and user experience can be good.
- Do not use unnecessary non-semantic tags to load the page faster.
Note: Search engines prefer semantic tags more. But when semantic tags are not available, non-semantic tags have to be used properly.
Conclusion
HTML non-semantic tags are a basic and essential part of web development. These tags help create structure, but they do not have any specific meaning.