CODEWITHSUNDEEP
html
Hello-World
Hello-World

Reputation: 9555

html5 tags , what do they mean in the real world

A while back if I built an html 4 page I would use div, span h1,h2,h3, strong, p and then style my css accordingly.

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5 why are these tags here?

Now I want to use HTML 5 and I am very confused because after doing some research I see that there is allot of conflicting information.

So to start with these tags below and lets say my design is very image heavy

<section><nav><article><aside><header><footer><main>

in the old days I would write my html like this below

 <div> <!-- large background image design -->

      <div><!-- large background title left --><h1>hello world</h1> <!-- large background image --><div>
      <div><!-- large background title right --><div>

    <img src="" alt="" />

    <h3>image description</h3><div><!--little image--></div>

    </div>

Is it correct to write the code like this now ( swapping out the outer div for a section )

        <section> <!-- large background image design -->
          <header>
             <div><!-- large background title left --><h1>hello world</h1> <!-- large background image --><div>
             <div><!-- large background title right --><div>
          </header>

          <img src="" alt="" />

          <footer>image description<footer><div><!--little image--></footer>

        </section>
  1. How do you know what tags should be used?
  2. Does it matter if I only use divs as before?
  3. Do the new tags really add any value?
  4. Are you able to point me in the direction of easy to understand examples and explantations?
  5. Why should I use these new tags do they really add any value?

  6. List item

  7. I see amazon.com is still HTML 4

  8. w3schools who claim to be html5 don't have any <footer> or <nav> or <section> tags -> they have divs?

OR: Am I reading to much into this and just do what I think is correct and use the html5 elements that are available for what I am building? and validate it against the http://validator.w3.org/ The HTML5 part even though it says experimental

Thanks for the advice

Upvotes: 0

Views: 87

Answers (2)

Daniel
Daniel

Reputation: 379

1.How do you know what tags should be used?

  • identify the header of your page or the header of a section and use - header tag
  • which part represents the footer of your page or the footer of a section ? - use footer tag to mark it up

instead of using <div id="main">, you can now use <main> tag to mark up main content

  • identify less relevant content from the relevant content, and figuratively speaking place it aside by using aside element and so forth

4.Are you able to point me in the direction of easy to understand examples and explantations? watch HTML5 free video demonstrations on w3-video.com

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

Many of the new tags are to provide semantic and structural meaning to your document, even if you're not using them directly for styling. This improves machine-readability of your document. Semantic markup allows software to more effectively identify and classify portions of your document.

For example, you can use a list <ul><li>...</li></ul> or a bunch of DIVs to accomplish the same task, but a list has semantic meaning - a grouping of items, whereas a bunch of DIVs do not.

There's noting wrong with wrapping your menu in <nav>, even if it's all DIVs or UL/LI inside. NAV just identifies that section of the page as a navigation element, the same with HEADER, FOOTER etc. In fact, many of these tags come from a typographical background - the terms used in describing elements of pages in magazines and newspapers.

Upvotes: 1

Related Questions