8 HTML elements that you do not use (and should)

The web today is more and more semantic. But what does "semantic" mean? Why is it important?

Semantic HTML expresses the value of a document. It is more about what the text is, than how it looks. Good semantic markup helps both the person and the computer to better understand the contents of the document and its context.

Semantic markup is much easier to interpret. She is search engine friendly. Works great with modern browsers, reduces the amount of code needed to express the content and increases the readability of this code.
')
Ok, so semantic markup is good, but how to use it. It’s best to start by replacing ordinary tags with more expressive ones. Let's look at the eight elements that will allow you to enter this game.

<q>

Like its <blockquote> block cousin, the <q> tag is used to refer to citations.

Why not just use quotes? Quotes do not always mean quoting. Sometimes they are used for meaning, irony or the designation of the name of something - and in this context, they are used correctly. However, if you are quoting something, <q> clearly expresses your intention.

<i> and <b>

In the good old days, the tags <i> and <b> denoted the text in italic and bold, respectively. When the idea of ​​separating semantics from presentation began to gain momentum, this tag became suspicious. They were replaced by the tags <em> and <strong> , denoting, respectively, emphasis and strong emphazis.

In HTML5, finally, these tags have received an excellent semantic interpretation. Tag <i> marks the text, which has a different tone or mood. This is useful, for example, to describe thoughts or technical terms. The <b> tag marks text that is stylistically different from plain text, but does not have any distinguished semantic meaning. How is this different from using <span> ? The key is that <b> does not have any semantically different meaning.

<abbr>

<abbr> used for abbreviations! It can be especially useful in documents where there are a lot of them. This tag has an optional title attribute in which you can specify the full text version.

<abbr title="laugh out loud">lol</abbr> <abbr title="I don't know">idk</abbr> <abbr title="got to go">g2g</abbr> <abbr title="talk to you later">ttyl</abbr> 

<time>

Let's take a look at the classic problem of localizing dates. In the USA on October 5, 2013 it is recorded as 10/05/13, in Britain it is 05/10/13, in South Africa it is 2013/10/05, in Russia it is 5/10/13. All of these options make it extremely difficult to automatically recognize dates.

The <time> tag allows you to specify the date and time in a machine-readable format. The previous example would look something like this: <time datetime = "2013-10-05"> 10/05/13 </ time> . HTML parsers will be able to accurately understand the date, despite the format in which we specified it. The <time> tag also allows you to optionally specify a time in the 24th format: <time datetime = "2013-10-05 22:00"> 10/05/13 at 10 PM </ time>;

<mark>

Ever done that?

 <p> Three hundred pages of boring, useless text. <span class="highlight">The one thing you need to know and will never be able to find again if you don't highlight it.</span> More boring stuff… </p> 

No more. In HTML5, the <mark> element appeared, which marks the text selected for reference purposes because of its high importance.

<input>

Yes, <input> . You probably use <input type = "text"> , <input type = "submit"> , maybe even <input type = "hidden"> , have you ever used other types? In HTML5, <input> can use with a whole bunch of new types:

• email
• tel
• number
• range
• date
• time
• search
• color

It's great, but first you need to make sure your target browsers support all of this. This is still a problem.

<menu>

Have you ever made a menu from an unordered list?

 <ul class="menu-toolbar"> <li class="new">New</li> <li class="open">Open</li> <li class="save">Save</li> <li class="quit">Quit</li> </ul> 

Don't do that again! To do this, there is a <menu> , which is an unordered list of commands. This tag has a type attribute that can take values: popup or toolbar .

 <menu type="toolbar"> <li class="new">New</li> <li class="open">Open</li> <li class="save">Save</li> <li class="quit">Quit</li> </menu> 

Bonus

Most front-end developers use & nbsp; when writing HTML, but many do not know its true meaning. A non-breaking space does not break the string. This means that if two words are joined by an unbroken space, they will always be together on the same line. Sometimes it is very important. Here are some examples:

• Units of measure: 12 m / s
• Time: 8 PM
• Proper Names: Dairy Queen

There is also an inseparable hyphen ( & # 8209; ), for similar purposes.

Finally

HTML is becoming more and more semantic day by day. Using all of these elements is a good start for writing more accessible, clear markup. For a more complete picture, look at the Periodic Table of the Elements , Mozilla Developer Network documentation, well, or if you feel completely confident - W3C's HTML specification . Enjoy!

From the translator: This is my first post on Habré, I haven’t yet entered a lot, so if you reduce karma, at least comment.

Original article- davidwalsh.name/8-html-elements