What are semantic tags? Give examples?

A semantic tag is an HTML tag that helps to convey the meaning and purpose of the content it surrounds. Semantic tags give context to the content they contain, making it easier for search engines and assistive technologies (such as screen readers) to understand the structure and purpose of the content on a webpage.

Here are some examples of semantic tags:

• `<h1>` to `<h6>`: These tags are used to denote headings of different levels. `<h1>` represents the highest level of heading, while `<h6>` represents the lowest level.
• `<p>`: This tag is used to denote a paragraph of text.
• `<ul>` and `<ol>`: These tags are used to create unordered and ordered lists, respectively.
• `<table>`: This tag is used to create a table.
• `<form>`: This tag is used to create a form for user input.

Here is an example of how these tags might be used:

<h1>Welcome to My Website</h1>

<p>Hello and welcome to my website. My name is John, and I am a web developer.</p>

<h2>My Skills</h2>

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<h2>My Experience</h2>

<ol>
  <li>Web Developer at Company A (2018-2020)</li>
  <li>Web Developer at Company B (2020-Present)</li>
</ol>

<h2>Contact Me</h2>

<form>
  <label for="name">Name:</label><br>
  <input type="text" id="name" name="name"><br>
  <label for="email">Email:</label><br>
  <input type="text" id="email" name="email"><br>
  <label for="message">Message:</label><br>
  <textarea id="message" name="message"></textarea><br>
  <input type="submit" value="Submit">
</form>

In this example, the `h1` tag is used to denote the main heading of the page, the `p` tag is used to denote a paragraph, the `ul` and `ol` tags are used to create lists, and the `form` tag is used to create a form for user input.

Rakib Alom

About author

I am a professional web developer. I love programming and coding, and reading books. I am the founder and CEO of StorialTech.