Non-Semantic Elements in HTML
Types of Elements
In this lesson, we will learn about the non-semantic elements and how to use them in HTML document.
What are Non-Semantic Elements in HTML
Non-semantic elements are used to create structure and presentation for web pages. They don't provide any information about the content of the web page. They are used to define sections of a web page and apply styles to the content.
Difference between Semantic and Non-Semantic Elements
The main difference between semantic and non-semantic elements is that semantic elements provide meaning to the content, while non-semantic elements do not.
Semantic elements, such as <header>, <nav>, <section>, and <footer>, are used to define the structure of a web page and give meaning to the content. Non-semantic elements, such as <div> and <span>, are used for layout and formatting purposes only.
Examples of Non-Semantic Elements
The two most commonly used non-semantic elements are:
- <div>
- <span>
The <div> Tag
The <div> element is one of the most commonly used non-semantic elements in HTML. It is used to group content together and apply styles to the content. For example, you could use the <div> element to group all the content on your web page together and apply a background color to it. Here's an example of how the <div> element could be used:
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Div Tag Example</title>
</head>
<body>
<div style="background-color: #abfbe4;">
<h1>Welcome to My Website</h1>
<p>Here you will find information about my services.</p>
<ul>
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
</ul>
</div>
</body>
</html>The <span> Tag
The <span> element is another commonly used non-semantic element in HTML. It is used to apply styles to specific parts of the content, such as text or images. For example, you could use the <span> element to apply a different color to a specific word in a sentence. Here's an example of how the <span> element could be used:
Example
<p>This is a <span style="color: red;">red</span> word.</p>