Semantic HTML

What Is Semantic HTML?

The term "semantic" refers to the meaning or interpretation of a word or expression. Semantic HTML uses to both the browser and the developer. Examples - <Form>,<table> and <article> etc.

Why Do I Need to Use Semantic HTML Tags?

By web developers reviewing the code - there are two more specific reasons why you should always use semantic tags.

1.Accessibility ->The proper use of HTML semantic tags will allow these readers to understand your content better because their screen readers will communicate your content more accurately.

2.SEO (Search Engine Optimization) ->Semantic HTML tags are important for SEO because they indicate the role of the content within the tags. That information gives search engine crawlers, like Googlebot, a better understanding of your content

Types of HTML Semantic Tags

There are two types of Html Semantic Tags.

1.HTML semantic tags for structure

2.HTML semantic tags for text

1.HTML Semantic Tags for Structure

It communicate the layout of the page.

HTML Semantic Elements

Here’s a full list:

<header>: The header tag defines content that should be considered the introductory information of a page or section.
<nav>: The navigation tag is used for navigation links. It can be nested within the <header> tag, but secondary navigation <nav> tags are also commonly used elsewhere on the page.
<section>: Using <section> is a way of grouping nearby content of a similar theme. A section tag differs from an article tag. It isn’t necessarily self-contained, but it forms part of something else.
<article>: Defines an independent, self-contained piece of content that can be distributed and reused independently, such as a news article, blog post, or forum post.
<aside>: An aside element defines content that’s less important. It’s often used for sidebars—areas that add complementary but nonessential information.
<footer>: You use <footer> at the bottom of a page. It usually includes contact information, copyright information, and some site navigation.

2.HTML Semantic Tags for Text

Here are some of the most common examples:

<h1> (heading): The h1 tag marks the top level heading. There’s usually only one H1 heading per page.
<h2> to <h6> (subheadings): The subheadings of various levels of importance. There can be multiple headings of the same level on a single page.
<p> (paragraph): A standalone paragraph of text.
<a> (anchor): Used to mark up a hyperlink from one page to another.
<ol> (ordered list): A list of items that are displayed in a particular order, starting with bullet points. One <li> (list item) tag contains a single item in the list.
<ul> (unordered list): A list of items that do not need to be displayed in a particular order, starting with ordinal numbers. One <li> (list item) tag contains a single item of the list.
<q> / <blockquote>: A quotation of the text. Use <blockquote> for long, multi-line quotations and <q> for shorter, inline quotations.
<em> (emphasis): Used for text that should be emphasized.
<strong> (strong emphasis): Used for text that should be strongly emphasized.
<code>: A block of computer code.

Thank you for reading my blogs, do comments, like and follow for more blogs.