CODEWITHSUNDEEP
html
Curnelious
Curnelious

Reputation: 1

Basic tags in html clarification

This is basic. If I use a framework, such as Bootstrap, docs say use this tag <nav for a navigator(for example), but most people use instead <div :

<div class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</div>

I know that div is some kind of container for other views, but how can you simply change the tag <nav from the docs, to be <div ? if you can, why one need it at all ?

Upvotes: 0

Views: 164

Answers (3)

Ravi Kumar
Ravi Kumar

Reputation: 147

I hope this will help you to understand what are you want to know about.

The nav tag is a tag of HTML5, it is possible to use div tag instead of nav tag & it's not compulsory to use nav tag for navigation. It just clarify that nav tag is use for navigation, header is for header area and footer is for footer area. They all are HTML5 basic tags which clarify by their names that for which area is use for, all HMTL5 tags are also known as block tags as same like div tag. So does't matter your are using div tag instead of nav tag it will work same.

And talking about loosing their styles, it will only loose their style if the class is define with the tag name and without space like nav.navbar.navbar-expand-lg, but in bootstrap it defines without tag name .navbar.navbar-expand-lg.

Upvotes: 3

Itay Gal
Itay Gal

Reputation: 10824

<nav> acts exactly like <div>. Same goes for article, section, etc...

It only has a semantic meaning, it can make your code more readable and the browser will render it the same.

BUT it may affect in different way - some search engines tries to read your page and extract relevant data from your page, organizing your code and using the correct semantic elements might help you get a higher rank or a better summery of your page.

Also, if you use a framework, it might style specific elements differently.

Consider this code, if you'll change all the tags to div, the styling won't be the same:

*{
  padding: 0;
  margin: 0;
}
nav{
  width: 100%;
  height: 30px;
  background-color: #bada55;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

article{
  background-color: #efefef;
  padding: 20px;
}

h1{
  font-size: 30px;
  font-weight: bold;
  text-transform: uppercase;
}
<nav>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</nav>
<section>
  <article>
    <h1>Article title</h1>
    <p>article content here</p>
    <p>article content here</p>
    <p>article content here</p>
  </article>
</section>

Here's the same CSS code with the same HTML structure but all the tags are divs

*{
  padding: 0;
  margin: 0;
}
nav{
  width: 100%;
  height: 30px;
  background-color: #bada55;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

article{
  background-color: #efefef;
  padding: 20px;
}

h1{
  font-size: 30px;
  font-weight: bold;
  text-transform: uppercase;
}
<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
<div>
  <div>
    <h1>Article title</h1>
    <p>article content here</p>
    <p>article content here</p>
    <p>article content here</p>
  </div>
</div>

Upvotes: 1

lika LG
lika LG

Reputation: 1

you can use bootstrap template in your website. https://getbootstrap.com/docs/3.3/components/#nav

Upvotes: 0

Related Questions