Before semantic HTML was introduced, developers used divs to position content. The div element itself has no meaning. It just provides a way to apply styles and arrange content.
What does the word semantic mean about the meaningA semantic HTML element describes the purpose of content. They bring meaning to developers, users, search engines, and assistive technologies. Here is a list of common semantic HTML tags that you can use in your next project.
What is Div
In HTML, a div (split) element is a block-level container. Use divs to group or divide HTML elements into sections on your web page. The syntax is:
<div>
</div>
Advantages of using semantic HTML elements over Div
HTML5 introduced semantic HTML elements to make code easier to read. Semantic elements provide meaning and structure to web content.
Help other developers understand your code. It also makes it easier for search engines to find your content and drive traffic to your site. Here are the semantic elements you can use in your HTML and CSS projects.
of <ヘッダー> Tags define the header section of the document. It typically includes the site logo, navigation, and page titles. A section that appears at the top of a web page. You can customize the header according to your needs. The syntax is:
<body>
<header>
<h1> Hi There!</h1>
<p>I am a header</p>
</header>
</body>
2. <ナビ>
of <ナビ> The tag contains the website navigation links. These are menus, tables of contents, or indexes.Normally <ヘッダー> Tag. The syntax is:
<header>
<nav>
<ul>
<li>My website links</li>
<li><ahref="#"> Home</a></li>
<li ><ahref="#"> About Us </a></li>
</ul>
</nav>
<h1>The above is navigation part of my website.</h1>
</header>
Here’s what it looks like in a browser:
on a web page using CSS layout models such as CSS flexbox
