使用HTML5标签有什么好处 <article> ， <section> ， <figure> ， <header> ， <footer> ， <nav> ？

Question

There are some semantic tags like <article>, <section>, <figure>, <header>, <footer>, <nav> in HTML5. Why should I use them, instead of <div> or <span> ? Is there any optimization?

Answer 1

Readability

When people use "You're just arguing semantics!" as a defense in an argument, it's meant to imply they're trying to say the same thing in different ways. While it is an ok argument here, it's not as necessarily true.

Using the more semantic html tags will make your HTML more readable and clear, while also allowing you to have specific CSS related to tags, and not necessarily require custom classes for divs. Now one could argue that you need that css in a class or a tag either way, but at some point, every programmer has preferences. Some write for (int i =0; i < count; < i++) {} and some write for (int i = count; i > 0; i--;) {} .

It's also worth mentioning that those tags, similar to <p> and <ul> have default CSS properties depending on your browser, so you can get away with some easy styling for newer pages using those tags as opposed to creating everything from scratch with divs.

At the end of the day, whatever helps you write the best code is what you should use. But be aware of other options as you will likely have to work with someone who has different preferences than you.

Answer 2

What is the benefit of using HTML5 tags like <article> , <section> , <figure> , <header> , <footer> , <nav> ?

HTML marks up the structure of the document.

It tells the user agent:

• this element is a heading
• this element is a paragraph
• this element is a quote

You could , theoretically, use:

• <div class="heading">
• <div class="paragraph">
• <span class="quote">

But then the user-agent wouldn't know (at any level) what those divs and spans represent.

For this reason we use elements which describe the structure of the document.

That's the entire purpose of markup. It isn't for anything more than that.