Source: Musa Yazlık
Hello everyone. In this blog post series, we will be talking about some little known and used tags that come with html 5. Let's start learning.
Nowadays, in general terms, html 5 is supported by many browsers as a publication. But for some reason some developers still continue to use deprecated tags that should not be used in html, and I will be publishing related content soon, but that is not our topic now. I will be informing you about some html tags that come with the new version of html but are not used. Let's get started.
Why should I use these Html 5 tags?
SEO compatibility, one of the most important issues that many developers overlook when coding an html theme, will be the best answer to this question. While search engines such as Google index the content, they index the content by taking these tags into account. The theme you coded may be visually very good, but if you code without paying attention to seo compatibility, you will waste your labor. Therefore, you should use html tags carefully.
Header Html 5 Tag
Yes, you can say that I definitely use the header tag in every project, but in many html themes I have examined, these eyes have seen that it is used using class or id in the div or section tag instead of the header tag. If you want to make a seo-friendly coding with the html 5 tag, you should use the header tag for the header area, which is one of the 3 main parts that make up a website.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Musa Yazlık Header Tag Example</title>
</head>
<body>
<header>
<h1>Most Important Title</h1>
<h3>Less important headline</h3>
<p>We can also write something here</p>
</header>
</body>
</html>
Nav Html 5 Tag
I see this tag in many html themes that use the bootstrap library. The general purpose of this tag is to show that the code written between these tags is used to make a menu. So if you want to make a menu, you need to use the nav html tag as the main container tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Musa Yazlık Nav Tag Example</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
crossorigin="anonymous"
/>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"
></script>
</body>
</html>
Article Html 5 Tag
The Article tag is a tag used to mark independent and self-contained content. Its main purpose is to cover the content of the article written. If you want search engines like google to perceive a content you have written as a content, that is, an article, you should definitely use this tag. I saw that this tag is not used much in most html themes. It may have been overlooked. 😁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Musa Yazlık Article Tag Example</title>
</head>
<body>
<article>
<p>Paragraph 1</p>
<img src="image.jpg" />
<p>Paragraph 2</p>
</article>
</body>
</html>
Output Html 5 Tag
The general purpose of this tag is to show the output. For example, when we prepare a structure for an addition operation, I saw that div or span tags are usually used for the area where we show the sum of two numbers after clicking the add button. But you didn't know that there is a tag in html even for this. It is the output tag. Let's stop using span and div for outputs from now on. I was using span or div tag in general. While writing this blog post, I learned it with you. 😀
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Musa Yazlık Addition Process</title>
</head>
<body>
<table>
<tr>
<td>
<input
type="number"
value="0"
placeholder="First Issue"
id="number1"
onchange="collect()"
/>
</td>
<td>
<input
type="number"
value="0"
placeholder="Second Issue"
id="number2"
onchange="collect()"
/>
</td>
<td><output id="total"></output></td>
</tr>
</table>
<script type="text/javascript">
let number1 = 0,
number2 = 0,
total= 0;
function collect() {
sayi1 = parseFloat(document.getElementById("number1").value);
sayi2 = parseFloat(document.getElementById("number2").value);
toplam = number1 + number2;
document.getElementById("total").innerHTML = total;
}
</script>
</body>
</html>
Aside Html 5 Tag
When you enter many websites, there is an area to the left or right of the main content, this is what we call the sidebar area. There is a tag in the html in this. The room is the aside tag. The aside tag indicates that the structure in which the content is located is side content.
We have come to the end of this blog post. But this will be a series so don't forget to stay tuned. With this series, you will learn many html tags that you do not know. See you in the next content of the series. Take care of yourself... 😁 😁
Source: Musa Yazlık
Latest comments (0)