Are new HTML5 elements like and 2019-01-05 03:49发布 站内问答 / Html5 697 8 5

Question

Don't kill me just yet, I'm asking out of pure curiosity.

Elements like <section>, <nav>, <article>, <aside> etc all seem completely pointless. Sure they make everything have its own little place (and seo'd)... but it is possible to over-organize things. There are some cases where things don't fit in any of the categories too. It also increases time spent trying to code these things. I just don't see any real purpose for moving to add these new elements.

What do we (developers and people who view the webpages alike) have to gain from adding them?

Answer 1

I think the great failing of HTML semantic divisions such as is that the code to make these work in the real world involves multiple statements to cope with the actual browsers that are in use by real people. The examples given above aren't real and, in any case, to read the html5 code you have to recall that a footer is a kind of div. Just calling it a div and giving it a descriptive ID seems to me to be far clearer, even if we forget about the multiple statements that you'll actually need (really, you will. For several years). Here's an idea. Make the semantic div IDs attributes, like 'title=' and so on - let the modern browsers and screen readers use this info to identify sections, asides and so on and the code will be cleaner. Don't stop calling a div a div, because you can't install new browsers for the whole planet.

<div id ="footer" class="someclass someotherclass" semantic="footer">You, the screen
readers and all browsers know this is a div</div>

Answer 2

The visual benefit of using the new HTML5 markup tags might be hidden from users but users may unwittingly benefit because these tags may have provided them with a better search result. I think once HTML5 becomes a standard the usage of these markup tags will become extremely important for your sites SEO.

Answer 3

HTML5 styled CSS is also somewhat easier to read:

div#header
div#content .article
div#content .article h1
div#content .article h1+h2
div#footer

vs

header
section#content
section#content article
section#content article hgroup h1
section#content article hgroup h2
footer

(not using advanced selector)

And as keyboardP hinted through the quote it is easier to navigate a page for non human vistors. It adds semantics. But I do agree with you, that sometimes it can be hard to figure out which element to use section, article or good old div. IMO, this makes the semantic less strong. But lets see what happens.

Answer 4

These elements are important for things like screen readers for the blind and eBook readers like Kindle. It helps them know what to show/read and when.

Answer 5

It's all about semantics!

But I agree with you that to some people these new may tags seem pointless. A frequently asked question is why these particular tags and not any others were chosen, especially as some of the tags are very blog specific (article, section etc) but didn't include other commonly used names, such as product or content. As you can see in the comments below, it's a hotly debated topic!

So for using these new tags it really depends on how you write your markup, and there is no right or wrong way for how go about it. Take lists for example, you may use them for your navigation and not want them styled and also use them in your main content and need them styled. You could either add extra classes to specify which lists are styled or you could use your markup and target styles from the tags alone:

<nav>
 <ul>
  <li><a href="">Nav item 1</a></li>
  <li><a href="">Nav item 2</a></li>
 </ul>
</nav>
<div>
 <ul>
  <li><a href="">List item 1</a><li>
  <li><a href="">List item 1</a></li>
 <ul>
</div>

and in your CSS:

ul { list-style: bullet }
nav ul { list-style: none; }

Answer 6

Have read of this article, as it points out various advantages such as:

There are several advantages to using these elements. When used in conjunction with the heading elements (h1 to h6), all of these provide a way to mark up nested sections with heading levels, beyond the six levels possible with previous versions of HTML.

and

By identifying the purpose of sections in the page using specific sectioning elements, assistive technology can help the user to more easily navigate the page. For example, they can easily skip over the navigation section or quickly jump from one article to the next without the need for authors to provide skip links. Authors also benefit because replacing many of the divs in the document with one of several distinct elements can help make the source code clearer and easier to author.