Html Semantic tag vs Non-Semantic

What Is Semantic HTML

Semantic HTML refers to the use of HTML markup to reinforce the meaning of content on a web page, rather than just its presentation. This means using HTML elements that accurately describe the purpose of the content they contain, such as using a heading tag h1 tag to indicate a main heading, an ordered list tag ol tag to represent a list of items with a specific order, and so on.

The main advantage of using semantic HTML is that it makes it easier for web browsers, search engines, and assistive technologies such as screen readers to understand the structure and content of a web page, which can improve accessibility and search engine optimization (SEO).

For example, using a element to wrap a header section of the page, or a element to represent a navigation section, provides more context for the content within those elements, which can help search engines better understand the purpose of that content and provide a more meaningful user experience.

Here is Html Semantic List:
header: Represents a container for introductory content or a set of navigational links.

nav: Represents a section of a page that contains navigation links.

main: Represents the main content of a document. There should be only one element per page.

article: Represents a self-contained composition in a document, such as a blog post or a news story.

section: Represents a standalone section of a document, such as a header, footer, or any other thematic grouping of content.

aside: Represents a section of a page that contains content that is tangentially related to the main content, such as a sidebar.

h1 to h6: Represents headings of different levels. h1 is the highest level heading, while h6 is the lowest.

p: Represents a paragraph of text.

ol and ul: Represents ordered and unordered lists, respectively.

li: Represents a list item within a ol or ul list.

figure and figcaption: Represents a self-contained content, such as an image, diagram, code snippet, etc., with a caption.

time: Represents a date and/or time.

mark: Represents a highlighted text.

details and summary: Represents additional details that the user can view or hide.

What Is Non-Semantic HTML

Non-semantic HTML refers to the use of HTML elements that do not have any inherent meaning, but are used to format and style content on a web page. These elements include div and span, which are commonly used to group and style content, but do not provide any information about the meaning or purpose of that content.

For example, a developer might use a div to wrap a header section of a page and then apply styles to that div to make it appear as a header. However, this does not provide any semantic information about the content within that div, making it harder for search engines, web browsers, and assistive technologies to understand the structure and content of the page.

In contrast, semantic HTML provides meaning and context to the content on a page, making it easier for web browsers, search engines, and assistive technologies to understand the structure and content of the page, and provide a more meaningful user experience.

Here is Html Non-Semantic List:

div: Represents a generic container for flow content. It does not provide any information about the meaning or purpose of the content it contains.

span: Represents a small fragment of inline content. Like div, it does not provide any information about the meaning or purpose of the content it contains.

font: Represents a section of text with a specified font, size, and color. This element has been deprecated in HTML5 in favor of using CSS for styling text.

table: Represents tabular data. While it can be used to structure data in a meaningful way, it is not a semantic element and should be used with caution, as it can be difficult for assistive technologies to understand and interpret complex table structures.

br: Represents a line break. While it can be used to add spacing between elements, it does not provide any semantic information about the content.

hr: Represents a horizontal rule, used to separate content. Like br, it does not provide any semantic information about the content.

These are just a few examples of non-semantic HTML elements. It is generally recommended to use semantic HTML elements where possible, as they provide more meaning and context to the content on a web page, which can improve accessibility and search engine optimization (SEO).