Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Why use b tag for glyphicons?

In the Adding a Dropdown Menu and Glyphicons in the new frameworks course, the b tag is used to implement glyphicons on the page. Why not an image tag?

2 Answers

Short answer: You shouldn't use a <img> element as it's not valid markup to have an <img> with a empty src attribute. The browser will render it with most any element you choose. 2 of the most popular choices are <i> and <span>.

The official Bootstrap 2 documentation the <i> element was in examples however when Bootstrap 3 came out the documentation changed to using the semantic more <span> element in it's examples


Long answer:

The <i> and <b> elements were changed in HTML5. Some rather popular sites thought since they aren't likely to use <i> as much with the new standard, they could repurpose the <i>. There are several justifications for this choice that I've heard.

Some people object to using the <i> element in this manner on semantic grounds. Per the HTML spec

The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text

Some argue that "alternate voice or mood, or otherwise offset from the normal prose" can be interpreted as functionally equivalent to the function of an icon.

Other's argue that the spec clearly indicates the element's usage is to reserved for use with a "span of text".

Those against using <i> (<b> for that matter) for this purpose suggest that a <span> element is the proper choice.

"it's not valid markup to have an <img> with a non-empty src attribute." did you mean to say an empty src attribute? Thanks for the great answer!

Yep, fixed the grammar.

Heh how did best answer get selected when I didn't select it? Not that I wouldn't have but I'm wondering how that works now.

Anyway I was thinking last night ..... James I understand your answer but I'm back to the why of it. If you are going to add HTML to a page why not just add an image tag with the path in the source? Is the reason because abstracting everything possible to the style sheet is desirable?

> why not just add an image tag with the path in the source

That's not how icon fonts work. They have no path, they aren't an image they are a font character.

Oh well there's the reason I'm confused I thought they were images.