Semantically, which tags should I use for icons?

Navigation
7

I have a navigation menu with some icons using @font-face . Each item in this menu has:

  • the icon (with ::before );
  • text, explaining the function of that link.

. It turns out that when the page loads on a smaller device, I want the text to "disappear" and only the icon will be shown. I have the following structure: 

<nav>
  <ul>
    <li><a class='ico-foo' href='#'>Visitar Foo</a></li>
    <li><a class='ico-bar' href='#'>Visitar Bar</a></li>
    <li><a class='ico-foobar' href='#'>Visitar FooBar</a></li>
  </ul>
</nav>

Normal, like most structures. It turns out that if I try to hide the contents of the <a> tag the icon in ::before will not appear. For example, I tried to use text-indent: -999px; and it did not work because the icon accompanies this rule and "some".

Well, the solution I found to hide the text was to put it inside a <span> , so when the page is opened on a smaller device I give display:none to this <span> tag and so it is shown only the icons as I would like. The structure then: 

<nav>
  <ul>
    <li><a class='ico-foo' href='#'><span>Visitar Foo</span></a></li>
    <li><a class='ico-bar' href='#'><span>Visitar Bar</span></a></li>
    <li><a class='ico-foobar' href='#'><span>Visitar FooBar</span></a></li>
  </ul>
</nav>

Beauty. My question is: Is this the best tag to do this? Am I worrying about little?

Some sites (especially those created using bootstrap) use the tag for icons, but according to this question the use is only for saving characters.

Any suggestions to do this in a better way?

    
asked by anonymous 26.10.2014 / 22:11

1 answer

7

The <span/> tag is de facto in> the most commonly used tag to deal with issues like what you refer to.

  

The HTML element <span> is an online container for phrased content, which does not represent anything by nature.

It is an element with no meaning to add associated with its use, unlike other elements such as <em/> and <i/> whose same have a meaning behind its use, ie were created with a specific purpose, The <span/> element was created to allow formatting via CSS, referencing language, among others, to certain content without this content being influenced by its use.

In your case, in particular, you want to manipulate the text via CSS, nothing better than involving it with <span> to abstract the impact of CSS from the rest of your markup and focus only on the text .

About how you're acting, display:none; seems like the best course to take.

Other methods need some care:

  • Negative indentation

    It can be used in some scenarios, for example text-indent:-999px but very careful because the visitor's screen may be larger than% given% and the text will appear in an inappropriate place.

  • Zero font size

    It can be used in some scenarios, but the crawlers (English) , as it is the Google case consider this incorrect and against the rules of SEO what will leave a flag on the page in a negative way.

26.10.2014 / 22:34
Tomcat or Jboss / Glassfish? How do I sign in through my application on Microsoft Live?