How to use such semantic tags?

Asked

Viewed 4,961 times

40

Since the release of HTML5, I have noticed that several different tags have started to "emerge".

Everywhere I tried to study on the subject, I always saw the expression "semantics". I understood that these tags don’t actually have a special skill, but it’s just like an organizational context.

I had some doubts and concern about these tags, because as I did not have patience to learn what each tag meant, I continued to use the good old div.

  • These semantic tags help improve a website’s SEO?

  • Using only Divs (as I always do), is harmful to the site’s SEO?

There is another question I would like to clarify is in relation to some tags that are not so obvious to me.

For example, looking at the tag footer or header, it seems that it is obvious that it is the header and footer of the site, but sometimes I’ve seen a header and a footer in each section.

aside I didn’t understand what it’s for, because every tutorial I saw explains something in a different way.

Perhaps, for me, the only tag that became obvious its use is the main.

So I’m gonna ask you a few more questions:

  • What is the semantic purpose of tags aside, footer, section, header and article?

  • Can I use a footer and a header per page, or I can use them within each section? And if so, why?

html5 semantics
  • 2

    http://answall.com/q/100373/101

  • @bigown is a good for understanding form semantics. But now those from up there have left me confused, because each place explains in a way, heheheheh

  • 1

    @Wallacemaxters Recommended Reading: http://tableless.com.br/semantica-padroes-e-que-voce-tem-a-ver-com-this/

  • Html5 Tags can create name by anyone, and test use <wallace id="blabla">XXX</wallace> and works normal style. Only name, that spoken Section, footer, header are custom for most commonly used and known developer. This type the created name is format DIV. I develop over 20 years, and can make different tags to avoid against Adblock and more Blabla security. I can’t explain it better and I write here.

2 answers

61


HTML5 has introduced many elements in total, currently there are more than 100, according to W3C. It is natural that so many elements cause a certain mess among developers, since there are similar elements, visually equal but for different purposes (as b and strong or i and em) and even some unknown (such as the acronym and the cite). There are some elements called semantics, well, here we go.

After all, what is this such semantics?

According to the aulete dictionary:

is the study of the meaning of words in a language

In the HTML5 context, the language is HTML and the so-called semantic elements are those that have the meaning, the meaning. According with Aulete, meaning is

meaning given to a term, word, phrase, text, sign, sign, artistic or scientific work etc

Therefore, semantic elements are elements with a special meaning. In the HTML5 context:

  • Semantic elements: has meaning, and makes its content clear. (form, table, article, footer and section)
  • Nonsemantic elements: do not make their content clear. (div and span)

See that div is broad, but footer gives meaning, is the footnote. So instead of 

<div id="footer">

prefer

<footer>

Let’s go over this idea.

But what is the purpose of these elements?

It is normal and very frequent to see pages that use the attribute id to assign meaning as: <div id="footer"> or <div class="header"> determining a sense for the div. In HTML5, elements were created for each situation, such as header and footer, see below:

  • article: expresses an independent element, that is, that can be read and interpreted without depending on the rest of the page. A good example is a newspaper news or a question on Stackoverflow.
  • aside: by concept, expresses a content the content part of the page. In practice, think of a box box information within a page, for example:

  • details: represents additional details that the user can show or hide.
  • figcaption: represents a caption for an element <figure>.
  • figure: represents independent content, such as illustrations, diagrams, etc...
  • footer: represents the footnote of a document or section.
  • header: represents the header of a document or section.
  • main: represents the main content of a document.
  • mark: represents a highlighted text.
  • nav: represents navigation links (menus).
  • section: represents a section within a document.
  • summary: represents a header for an element details.
  • time: represents a date/time.

A small example:

<!DOCTYPE html>
<html>
<body>

<section>
  <h1>Henry David Thoreau</h1>
  <p>O sucesso normalmente vem para quem está ocupado demais para procurar por ele.</p>
</section>

<section>
  <h1>Ray Goforth</h1>
  <p>Há dois tipos de pessoa que vão te dizer que você não pode fazer a diferença neste mundo: as que têm medo de tentar e as que têm medo de que você se dê bem.</p>
</section>

</body>
</html>

R2-D2’s friends are watching your page!

In 2001, long before HTML5, Tim Berners-Lee (none other, none other than the creator of the World Wide Web) made sense of the term semantic web, where he referred to a type of data that could be processed by machines (called robots, often).

The idea of the semantic web was not to be viewed directly by the user in the browser, but to work internally, resulting in the user only a better experience, without any influence on the visual.

How to do this? Separating the HTML elements, thus representing different functions for each element.

A good example of code written based on today’s semantic web:

<body>

  <header>
    <h1>Welcome On Our Website!</h1>
    <p>Here is our logo and slogan.</p>
  </header>

  <nav>
    <header>
      <h2>Choose Your Interest</h2>
    </header>
    <ul>
      <li>Menu 1</li>
      <li>Menu 2</li>
      <li>Menu 3</li>
    </ul>
  </nav>

  <article>
    <header>
      <h1>Title of Article</h1>
      <h2>Subtitle of Article</h2>
    </header>

    <section>
      <h3>First Logical Part (e.g. "Theory")</h3>
      <p>Paragraph 1 in first section</p>

      <h4>Some Other Subheading in First Section</h4>
      <p>Paragraph 2 in first section</p>
    </section>

    <section>
      <h3>Second Logical Part (e.g. "Practice")</h3>
      <p>Paragraph 1 in second section</p>
      <p>Paragraph 2 in second section</p>
    </section>

    <footer>
      <h4>Author Bio</h4>
      <p>Paragraph in Article's Footer</p>
    </footer>

  </article>

  <aside>

    <h2>Get To Know Us Better</h2>

    <section>
      <h3>Popular Posts</h3>
      <ul>...</ul>
    </section>

    <section>
      <h3>Partners</h3>
      <ul>...</ul>
    </section>

    <section>
      <h3>Testimonials</h3>
      <ul>...</ul>
    </section>

  </aside>

  <footer>
    <ul>
      <li>Copyright</li>
      <li>Social Media Links</li>
    </ul>
  </footer>

</body>

Source: Hongkiat

Okay, but what are the advantages of helping robots read my page?

Because they’re awesome! Not convinced? Okay. In addition to making your code more readable and a little more organized, semantic web is a lot more than that, these machines cited in the previous topic have a very important role.

Let’s go back a little...

Back there, when I quoted Tim Berners-Lee and his concept of semantic web as a practical way of reading code for machines or robots, Tim said that semantic web would not have visual applications, only internal, for computers to do the heavy work. This work that machines do can be diverse, I highlight three:

  • For information to be easily found by search engines;
  • for accessibility, where visually impaired may be included on the web using voice readers;
  • for browser readers, those who synthesize the information from a page to what really matters. In addition to regular browsers, it serves readers like Amazon Kindle.

The similarity between these points is an information filter. I would say fine-tuning.

There are speculations that in the not too distant future, for computers REALLY understand the pages. Ok, we’ve gone too far. Well, I can say with vehemence that semantic web applications will be countless in a while.

That thing with search engines, come on: the semantic web takes your site’s SEO to another level, check out the example:

All it takes is one googlada that we already see the advantages, the entity-based SEO merge and the Knowledge Graph of the giant. I left the two images above to illustrate well the semantics in its other aspects. If you want to delve into the subject, I’ll leave you some useful links about SEO Semantics and Entity-based SEO:

I understand, I must abandon the keywords, is not?

Well, we’re on a tricky subject. Some people defend the keywords nowadays, but some people also think they belong in the trash can.

As Keywords are, rather, in decline, due to the great potential that new technologies, such as research by entities, offer. However, entity search may face a disadvantage when faced with a search like "what is the best game for Playstation 4?". The Keywords they would do much better if that were the case.

Keywords allow you to create content that the user in fact want to find.

This subject is still very relative, it is predicted that the future is the search for entities. I will also leave links for you to entertain yourself with the subject:

These semantic tags help improve a website’s SEO?

Based on the theory of entity-based research, the answer is YES! Well, the little robots do no harm.

Using only Divs (as I always do), is harmful to the site’s SEO?

Of course it can harm. Nowadays the search engines are increasingly web and semantic SEO supporters. We cannot affirm a total abandonment, because keywords have their importance, that is undeniable, see reading above.

What is the semantic purpose of tags aside, footer, section, header and article?

At the beginning of the answer is all explained, but I will leave a link important here. If there is any doubt regarding any tag, this site has all very well documented in addition to being a source reliable.

Can I use a footer and a header per page, or I can use them within each section? And if so, why?

According to the documentation of w3schools, the element footer represents the footer of a page or a section, as well as the header. There go examples of reliable documentation:

I believe that HTML, especially in its fifth version, is very open. The answer is yes, you can, there are no patterns dictated in HTML, but There are certain conventions that it’s up to you and your team to follow them or not. There’s a question on Stackoverflow that I find very interesting and that addresses the subject, see. As for the conventions, there are several what defines everything here is the reliability of the source, names like Mozilla, Google and Wordpress are unsuspecting names in the field of web development in general.

  • 2

    Great "article" on the subject! Thanks +50 :D

12

Then the HTML5 tags come to bring more semantics to the page structure.

But not only does the new tags have semantic properties, many of them bring new built-in browser features, for example the tag video which brings the ability of the browser to directly play videos without the need to use a flash player by exmeplo (http://www.w3schools.com/tags/tag_video.asp) and there are many others.

Another thing you should keep in mind is that giving more semantic value to your pages help in SEO tools and also tools accessibility.

A blind page reader, for example, can interpret his page more semantically to read it more naturally.

An example that illustrates this.

Instead of creating the options menu as we always create, using lists ul and li, that would be +/- like this:

<ul>
   <li>Opção 1</li>
   <li>Opção 2</li>
</ul>

We can use the tag *<nav>* (http://www.w3schools.com/tags/tag_nav.asp) and build like this:

<nav>
  <a href="#">Opção 1</a> 
  <a href="#">Opção 2</a> 
</nav>

But why use *nav* instead of *ul*?

Visually there is no difference, but standalone page interpreters (e.g. SEO robots, search engine indexers and blind readers, to name a few examples) can "understand" that everything within Nav is used to browse the site and then structure it correctly.

By exmeplo for a reader for the blind, he knows that one has a tag Nav it can read the navigation options of the site there, instead of doing a linear reading and try to read all lists ul to try to present navigation options within the site.

Another example to tag aside (http://www.w3schools.com/tags/tag_aside.asp) that you mentioned, can be used to add complementary content to the location where it is positioned. (You can check here http://tableless.com.br/sections-elemento-aside/)

This logic applies to all the tags you mentioned footer, header and section.

In practice you can use these tags wherever you want, as many times as you want within the same page and so on. But it is always important to remember the semantic meaning of each of them in order to build your page in the most meaningful way possible.

IS important consider the following (conceptually).

  1. HTML represents the structure how information should be organized within an HTML document
  2. CSS represents the style of the page is where all construction visual design and layout organization will be built
  3. JavaScript represents the interactivity and responsiveness that your page will have with the user’s actions. That is how your page will interact with the user dynamically.

Of course Javascript can have a wider use than this, helping the creation of more interesting layouts and as in the use of frameworks (e.g. Angularjs) but conceptually this is its purpose.

If you have more questions leave a comment that I improve the explanation.

  • I may have several article per page or does this break semantics? ** article** also has semantics within a Section?

  • Yes you can have several articles per page or even within Section. The important thing is to understand what the article tag represents. More information https://www.w3schools.com/tags/tag_article.asp and here https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content and here https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article

Browser other questions tagged html5 semantics

You are not signed in. Login or sign up in order to post.