Facebook&#39;s HTML and Twitter Bootstrap HTML (before v3) both use the `&lt;i&gt;` tag to display icons.

However, from the [HTML5 spec](http://www.w3.org/International/questions/qa-b-and-I-tags/):

&gt; The I element represents a span of text in an alternate voice or mood,
&gt; or otherwise offset from the normal prose, such as a taxonomic
&gt; designation, a technical term, an idiomatic phrase from another
&gt; language, a thought, a ship name, or some other prose whose typical
&gt; typographic presentation is italicized.

Why are they using `&lt;i&gt;` tag to display icons? Isn&#39;t it a bad practice? Or am I missing something here?

I am using `span` to display icons and it seems to be working for me until now.

**Update:**

Bootstrap 3 uses `span` for icons. [Official Doc](https://getbootstrap.com/docs/3.4/components/#glyphicons-how-to-use).

Bootstrap 5 is back to `i` [Official doc](https://icons.getbootstrap.com/#usage)

Should I use &lt;i&gt; tag for icons instead of &lt;span&gt;?

My site is going to have some inline code (&quot;when using the `foo()` function...&quot;) and some block snippets. These tend to be XML, and have very long lines which I prefer the browser to wrap (i.e., I don&#39;t want to use `&lt;pre&gt;`). I&#39;d also like to put CSS formatting on the block snippets.

It seems that I can&#39;t use `&lt;code&gt;` for both, because if I put CSS block attributes on it (with `display: block;`), it will break the inline snippets.

I&#39;m curious what people do. Use `&lt;code&gt;` for blocks, and `&lt;samp&gt;` for inline? Use `&lt;code&gt;&lt;blockquote&gt;` or something similar?

I&#39;d like to keep the actual HTML as simple as possible, avoiding classes, as other users will be maintaining it.

&lt;code&gt; vs &lt;pre&gt; vs &lt;samp&gt; for inline and block code snippets

`input type=&quot;submit&quot;` and `button` tag are they interchangeable? or if there is any difference then When to use `input type=&quot;submit&quot;` and when `button` ?

And if there is no difference then why we have 2 tags for same purpose?

input type=&quot;submit&quot; Vs button tag are they interchangeable?

What is the ***correct*** way to make text italic? I have seen the following four approaches:

    &lt;i&gt;Italic Text&lt;/i&gt;

    &lt;em&gt;Italic Text&lt;/em&gt;

    &lt;span class=&quot;italic&quot;&gt;Italic Text&lt;/span&gt;

    &lt;span class=&quot;footnote&quot;&gt;Italic Text&lt;/span&gt;




----------


# `&lt;i&gt;` #
This is the &quot;old way&quot;. `&lt;i&gt;` has no semantic meaning and only conveys the presentational effect of making the text italic. As far as I can see, this is clearly wrong because this is non-semantic.


----------


# `&lt;em&gt;` #
This uses semantic mark up for purely presentational purposes. It just happens that `&lt;em&gt;` by default renders text in italic and so it is often used by those who are aware that `&lt;i&gt;` should be avoided but who are unaware of its semantic meaning. Not all italic text is italic because it is emphasised. Sometimes, it can be the exact opposite, like a side note or a whisper.


----------


# `&lt;span class=&quot;italic&quot;&gt;` #
This uses a CSS class to place presentation. This is often touted as the correct way but again, this seems wrong to me. This doesn&#39;t appear to convey any more semantic meaning that `&lt;i&gt;`. But, its proponents cry, it is much easier to change all your italic text later if you, say, wanted it bold. Yet this is not the case because I would then be left with a class called &quot;italic&quot; that rendered text bold. Furthermore, it is not clear why I would ever want to change all italic text on my website or at least we can think of cases in which this would not be desirable or necessary.


----------


# `&lt;span class=&quot;footnote&quot;&gt;` ##
This uses a CSS class for semantics. So far this appears to be the best way but it actually has two problems.

 1. Not all text has sufficient meaning to warrant semantic markup. For example, is italicised text at the bottom of the page really a footnote? Or is it an aside? Or something else entirely. Perhaps it has no special meaning and only needs to be rendered in italics to separate it presentationally from the text preceding it.

 2. Semantic meaning can change when it is not present in sufficient strength. Lets say I went along with &quot;footnote&quot; based upon nothing more than the text being at the bottom of the page. What happens when a few months later I want to add more text at the bottom? It is no longer a footnote. How can we choose a semantic class that is less generic than `&lt;em&gt;` but avoids these problems?


----------


# Summary #
It appears that the requirement of semantics seems to be overly burdensome in many instances where the desire to make something italic is not meant to carry semantic meaning. 

Furthermore, the desire to separate style from structure has led CSS to be touted as a replacement to `&lt;i&gt;` when there are occasions when this would actually be less useful. So this leaves me back with the humble `&lt;i&gt;` tag and wondering whether this train of thought is the reason why it is left in the HTML5 spec?

Are there any good blog posts or articles on this subject as well? Perhaps by those involved in the decision to retain/create the `&lt;i&gt;` tag?

CSS/HTML: What is the correct way to make text italic?

I&#39;ve been using Twitter Bootstrap to build a site, and a lot of its functionality depends on wrapping things in `&lt;a&gt;`, even if they&#39;re just going to execute Javascript. I&#39;ve had problems with the `href=&quot;#&quot;` tactic that Bootstrap&#39;s documentation recommends, so I was trying to find a different solution.

But then I tried just removing the `href` attribute altogether. I&#39;ve been using `&lt;a class=&#39;bunch of classes&#39; data-whatever=&#39;data&#39;&gt;`, and having Javascript handle the rest. And it works.

Yet something&#39;s telling me I shouldn&#39;t be doing this. Right? I mean, technically `&lt;a&gt;` is supposed to be a link to something, but I&#39;m not entirely sure *why* this is a problem. Or is it?



Valid to use &lt;a&gt; (anchor tag) without href attribute?

It seems like I heard/read somewhere that a `&lt;div&gt;` inside of a `&lt;td&gt;` was a no-no. Not that it won&#39;t work, just something about them not being really compatible based on their display type. Can&#39;t find any evidence to back up my hunch, so I may be totally wrong. 

Is a DIV inside a TD a bad idea?

I want to nest `span` and `a` tags. Should I 

1. Put `&lt;span&gt;` inside `&lt;a&gt;`
2. Put `&lt;a&gt;` inside `&lt;span&gt;`
3. It doesn&#39;t matter ? 



Span inside anchor or anchor inside span or doesn&#39;t matter?

Hi all it&#39;s been a while since I&#39;ve asked something, this is something that has been bothering me for a while, the question itself is in the title:

&gt; What&#39;s your preferred way of writing HTML tables that have vertical headers?

By vertical header I mean that the table has the header (`&lt;th&gt;`) tag on the left side (generally)

&gt; **Header 1** data data data  
**Header 2** data data data  
**Header 3** data data data

They look like this, so far I&#39;ve come up with two options

First Option
------------
&lt;pre&gt;
   &lt;code&gt;
    &amp;lt;table id=&quot;vertical-1&quot;&amp;gt;
			&amp;lt;caption&amp;gt;First Way&amp;lt;/caption&amp;gt;
			&amp;lt;tr&amp;gt;
				&amp;lt;th&amp;gt;Header 1&amp;lt;/th&amp;gt;
				&amp;lt;td&amp;gt;data&amp;lt;/td&amp;gt;&amp;lt;td&amp;gt;data&amp;lt;/td&amp;gt;&amp;lt;td&amp;gt;data&amp;lt;/td&amp;gt;
			&amp;lt;/tr&amp;gt;
			&amp;lt;tr&amp;gt;
				&amp;lt;th&amp;gt;Header 2&amp;lt;/th&amp;gt;
				&amp;lt;td&amp;gt;data&amp;lt;/td&amp;gt;&amp;lt;td&amp;gt;data&amp;lt;/td&amp;gt;&amp;lt;td&amp;gt;data&amp;lt;/td&amp;gt;
			&amp;lt;/tr&amp;gt;
			&amp;lt;tr&amp;gt;
				&amp;lt;th&amp;gt;Header 2&amp;lt;/th&amp;gt;
				&amp;lt;td&amp;gt;data&amp;lt;/td&amp;gt;&amp;lt;td&amp;gt;data&amp;lt;/td&amp;gt;&amp;lt;td&amp;gt;data&amp;lt;/td&amp;gt;
			&amp;lt;/tr&amp;gt;
		&amp;lt;/table&amp;gt;
   &lt;/code&gt;
&lt;/pre&gt;

The main advantage of this way is that you have the headers right (actually left) next to the data it represents, what I don&#39;t like however is that the `&lt;thead&gt;`, `&lt;tbody&gt;` and `&lt;tfoot&gt;` tags are missing, and there&#39;s no way to include them without breaking the nicelly placed together elements, which lead me to the second option.

Second Option
-------------
&lt;pre&gt;
   &lt;code&gt;
        &amp;lt;style type=&quot;text/css&quot;&amp;gt;
			#vertical-2 thead,#vertical-2 tbody{
				display:inline-block;
			}
			
		&amp;lt;/style&amp;gt;
		&amp;lt;table id=&quot;vertical-2&quot;&amp;gt;
			&amp;lt;caption&amp;gt;Second Way&amp;lt;/caption&amp;gt;
			&amp;lt;thead&amp;gt;
				&amp;lt;tr&amp;gt;
					&amp;lt;th colspan=&quot;3&quot;&amp;gt;Header 1&amp;lt;/th&amp;gt;
				&amp;lt;/tr&amp;gt;
				&amp;lt;tr&amp;gt;
					&amp;lt;th colspan=&quot;3&quot;&amp;gt;Header 2&amp;lt;/th&amp;gt;
				&amp;lt;/tr&amp;gt;
				&amp;lt;tr&amp;gt;
					&amp;lt;th colspan=&quot;3&quot;&amp;gt;Header 3&amp;lt;/th&amp;gt;
				&amp;lt;/tr&amp;gt;
			&amp;lt;/thead&amp;gt;
			&amp;lt;tbody&amp;gt;
				&amp;lt;tr&amp;gt;
					&amp;lt;td&amp;gt;row 1&amp;lt;/td&amp;gt;
					&amp;lt;td&amp;gt;row 1&amp;lt;/td&amp;gt;
					&amp;lt;td&amp;gt;row 1&amp;lt;/td&amp;gt;
				&amp;lt;/tr&amp;gt;
				&amp;lt;tr&amp;gt;
					&amp;lt;td&amp;gt;data&amp;lt;/td&amp;gt;
					&amp;lt;td&amp;gt;data&amp;lt;/td&amp;gt;
					&amp;lt;td&amp;gt;data&amp;lt;/td&amp;gt;
				&amp;lt;/tr&amp;gt;
				&amp;lt;tr&amp;gt;
					&amp;lt;td&amp;gt;data&amp;lt;/td&amp;gt;
					&amp;lt;td&amp;gt;data&amp;lt;/td&amp;gt;
					&amp;lt;td&amp;gt;data&amp;lt;/td&amp;gt;
				&amp;lt;/tr&amp;gt;
			&amp;lt;/tbody&amp;gt;
			&amp;lt;tfoot&amp;gt;
				&amp;lt;tr&amp;gt;
					&amp;lt;td colspan=&quot;4&quot;&amp;gt;Footer&amp;lt;/td&amp;gt;
				&amp;lt;/tr&amp;gt;
			&amp;lt;/tfoot&amp;gt;
		&amp;lt;/table&amp;gt;
   &lt;/code&gt;
&lt;/pre&gt;
The main advantage here is that you have a fully descriptive html table, the drawbacks are that proper representation needs a bit of CSS for the `tbody` and `thead` tags and that the relation between the headers and data isn&#39;t very clear as I had my doubts when creating the markup.


----------
So, both ways render the table how it should, here a pitcure:

![render][1]   
With the headers on the left or right side if you would prefer it, so, any suggestions, alternatives, browser issues?


  [1]: http://i.stack.imgur.com/s0YDr.png

Most common way of writing a HTML table with vertical headers?

For example of a blog-post or article.

    &lt;article&gt;
    &lt;h1&gt;header&lt;h1&gt;
    &lt;time&gt;09-02-2011&lt;/time&gt;
    &lt;author&gt;John&lt;/author&gt;
    My article....
    &lt;/article&gt;

The `author` tag doesn&#39;t exist though... So what is the commonly used HTML5 tag for authors?
Thanks.

(If there isn&#39;t, shouldn&#39;t there be one?)

Which HTML5 tag should I use to mark up an author’s name?

Shouldn&#39;t both be removed? Or does it mean we should use `&lt;small&gt;`? Why is `&lt;big&gt;` removed but `&lt;small&gt;` is not? What is the problem with `&lt;big&gt;` which does not apply to `&lt;small&gt;`?


http://www.w3schools.com/html5/html5_reference.asp





Why &lt;big&gt; is not in HTML 5 Tag list while &lt;small&gt; is?

What is the proper way to provide a **semantic** caption for an HTML list? For example, the following list has a &quot;title&quot;/&quot;caption&quot;.
   
**Fruit**

 - Apple 
 - Pear
 - Orange

How should the word &quot;fruit&quot; be handled, in a such way that it is semantically associated with the list itself?

How to semantically provide a caption, title or label for a list in HTML

I&#39;m just wondering what are you thinking about DIV-tag inside FORM-tag?

I need something like this:

    &lt;form&gt;
      &lt;input type=&quot;text&quot;/&gt;
      &lt;div&gt; some &lt;/div&gt;
      &lt;div&gt; another &lt;/div&gt;
      &lt;input type=&quot;text&quot; /&gt;
    &lt;/form&gt;

Is it general practice to use `DIV` inside `FORM` or I need something different?

Is it correct to use DIV inside FORM?

This is a question I have been struggling with for a while. What is the proper way to mark up name/value pairs?

I&#39;m fond of the &amp;lt;dl&amp;gt; element, but it presents a problem: There is no way to separate one pair from another - they have no unique container. Visually, the code lacks definition. Semantically, though, I think this is the correct markup.

    &lt;dl&gt;
        &lt;dt&gt;Name&lt;/dt&gt;
        &lt;dd&gt;Value&lt;/dd&gt;
        &lt;dt&gt;Name&lt;/dt&gt;
        &lt;dd&gt;Value&lt;/dd&gt;
    &lt;/dl&gt;

In the above code, it is difficult to properly offset the pairs visually, both in code and rendered. If I wanted to, for instance, but a border around each pair, that would be a problem.

We may point to tables. It could be argued that name-value pairs are tabular data. That seems incorrect to me, but I see the argument. However, the HTML does not differentiate the name from the value, except in position, or with the addition of class names.

    &lt;table&gt;
        &lt;tr&gt;
            &lt;td&gt;Name&lt;/td&gt;
            &lt;td&gt;Value&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;Name&lt;/td&gt;
            &lt;td&gt;Value&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/table&gt;

This makes much more sense from a visual standpoint, both in code and in CSS. Styling the aforementioned border is trivial. However, as mentioned above, the semantics are fuzzy at best.

Thoughts, comments, questions?

**Edit/Update**
Perhaps this was something I should have explicitly mentioned in relation to structure, but a definition list also has the problem of not semantically grouping the pairs. The ordering and implicit border between a `dd` and a `dt` is easily understood,  but they still feel slightly off to me.

Semantics and Structure of Name-Value Pairs

What would be the best and most semantic tag/method for including a copyright notice in the footer of a web site?



Correct Semantic tag for copyright info - html5

Which of the following is the correct way to structure a page:

**1) `h1` only in `header`**

    &lt;header&gt;
    	&lt;h1&gt;Site title&lt;/h1&gt;
    	&lt;nav&gt;...&lt;/nav&gt;
    &lt;/header&gt;
    &lt;section&gt;
    	&lt;h2&gt;Page title&lt;/h2&gt;
    &lt;/section&gt;

If I use `h1` exclusively inside `header` as the site&#39;s title, every page will have the same content for the `h1` tag. That doesn&#39;t seem very informative.


----------


**2) `h1` in `header` and `section`, for both site and page title**

    &lt;header&gt;
    	&lt;h1&gt;Site title&lt;/h1&gt;
    	&lt;nav&gt;...&lt;/nav&gt;
    &lt;/header&gt;
    &lt;section&gt;
    	&lt;h1&gt;Page title&lt;/h1&gt;
    &lt;/section&gt;

I&#39;ve also seen examples of using `h1` more than once, in both `header` and `section` tags. However, isn&#39;t it wrong to have two titles for the same page? This example shows multiple header and `h1` tags http://orderedlist.com/resources/html-css/structural-tags-in-html5/


----------


**3) `h1` only in `section`, emphasizing the page title**

    &lt;header&gt;
    	&lt;p&gt;Site title&lt;/p&gt;
    	&lt;nav&gt;...&lt;/nav&gt;
    &lt;/header&gt;
    &lt;section&gt;
    	&lt;h1&gt;Page title&lt;/h1&gt;
    &lt;/section&gt;

Lastly, W3 seems to recommend using `h1` within the main `section` element, does that mean I shouldn&#39;t use it in the `header` element?

&gt; Sections may contain headings of any rank, but authors are strongly
&gt; encouraged to either use only h1 elements, or to use elements of the
&gt; appropriate rank for the section&#39;s nesting level.



How to properly use h1 in HTML5

I&#39;m setting up my WordPress sidebars for an HTML5 theme and really wanting to use `before_widget` and `after_widget` right.

So my question is this: which of the two markup patterns is more appropriate? The following code is all completely outside the `&lt;article&gt;` element.

##Option 1: Aside with sections##

    &lt;aside id=&quot;sidebar&quot;&gt;
        &lt;section id=&quot;widget_1&quot;&gt;&lt;/section&gt;
        &lt;section id=&quot;widget_2&quot;&gt;&lt;/section&gt;
        &lt;section id=&quot;widget_3&quot;&gt;&lt;/section&gt;
    &lt;/aside&gt;

##Option 2: Div with Asides##

    &lt;div id=&quot;sidebar&quot;&gt;
        &lt;aside id=&quot;widget_1&quot;&gt;&lt;/aside&gt;
        &lt;aside id=&quot;widget_1&quot;&gt;&lt;/aside &gt;
        &lt;aside id=&quot;widget_1&quot;&gt;&lt;/aside &gt;
    &lt;/div&gt;

I suppose the auxiliary question is then what heading to use for each widget title. If I wrap each widget in a `&lt;section&gt;` then `&lt;h1&gt;` seems most appropriate. If I use `&lt;aside&gt;`, I&#39;m not sure.

All opinions welcome. Devil&#39;s advocates encouraged.

Best HTML5 markup for sidebar

Is the proper HTML entity for giving dimensions `&amp;times;`? I want to be semantically correct, but that begs the question, is listing a dimension as `2&quot; x 3&quot;` even semantic? If the *x* represents &quot;by&quot;, would I use the letter x or &amp;times;?

In my code I&#39;ve been using `2&amp;Prime;&amp;nbsp;&amp;times;&amp;nbsp;3&amp;Prime;`, or 2&amp;Prime;&amp;nbsp;&amp;times;&amp;nbsp;3&amp;Prime;. The non-breaking spaces are to prevent the dimension from being wrapped, as per the suggestions found in [The Elements of Typographic Style Applied to the Web][1].


  [1]: http://webtypography.net/Rhythm_and_Proportion/Etiquette_of_Hyphenation_and_Pagination/2.4.6/

What is the proper HTML entity for the &quot;x&quot; in a dimension?

**Note:** I know `&lt;b&gt;` is presentational and `&lt;span style=&quot;font-weight:bold&gt;` is a better way, and `&lt;strong&gt;` and `&lt;em&gt;` are for emphasis but my question is not regarding this.


----------


Should we convert every `&lt;b&gt;` to `&lt;strong&gt;` blindly? Many people do this, they think `&lt;b&gt;` is not good as per web standards so they convert every `&lt;b&gt;` to `&lt;strong&gt;` upon site redesign, content re-population, new site design and people suggest this to others also.


----------


Dreamweaver has also given the option to convert all `&lt;b&gt;` and `&lt;i&gt;` to `&lt;strong&gt;` and `&lt;em&gt;` on code paste in design view and when we use B and I Which people use blindly.

![alt text][1]

And Dreamweaver (if above option is checked) and many online WYSIWYG editor give output in `&lt;strong&gt;` and `&lt;em&gt;` while button shows **B** and *I*.

![alt text][2]

In my opinion it&#39;s creating a misconception about `&lt;strong&gt;` and `&lt;b&gt;`


----------


When we get content from a client we don&#39;t know where the client wants to give emphasize and where he just wants to use bold text for presentation purposes. What should we do in this circumstance? No one has the time to give to decide for each instance (us and the client), whether it should be `&lt;b&gt;` or `&lt;strong&gt;`, `&lt;i&gt;` or `&lt;em&gt;`


What are the pros and cons to convert every `&lt;b&gt;` and `&lt;i&gt;` into `&lt;strong&gt;` and `&lt;em&gt;` blindly if we are saying our site is accessible?


----------
**Update:** remember [`&lt;b&gt;` and `&lt;i&gt;` are not deprecated they are in HTML 5 specification][3]


  [1]: http://shup.com/Shup/280420/1101118332-My-Desktop.png
  [2]: http://shup.com/Shup/280425/1101118921-My-Desktop.png
  [3]: https://stackoverflow.com/questions/2235450/why-html-5-still-have-support-for-presentational-elements

Is it ok to use &lt;strong&gt; in place of &lt;b&gt; blindly?

Do all of the following carry the same semantic meaning?
If not please explain your answer.

&lt;br&gt;**1.**

    &lt;nav&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;link&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;link&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;link&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;link&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/nav&gt;

&lt;br&gt;**2.**

    &lt;div role=&quot;navigation&quot;&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;link&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;link&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;link&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;link&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;

&lt;br&gt;**3.**

    &lt;ul role=&quot;navigation&quot;&gt; 
    &lt;! -- breaks HTML5 specification 3.2.7.4 Implicit ARIA Semantics
          navigation is not an allowed value of role on ul --&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;link&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;link&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;link&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;link&lt;/li&gt;
    &lt;/ul&gt;

All Semantic Markup Solutions on Gang of Coders

Total of 19 Semantic Markup Solutions

Should I use <i> tag for icons instead of <span>?

<code> vs <pre> vs <samp> for inline and block code snippets

input type="submit" Vs button tag are they interchangeable?

CSS/HTML: What is the correct way to make text italic?

Valid to use <a> (anchor tag) without href attribute?

Is a DIV inside a TD a bad idea?

Span inside anchor or anchor inside span or doesn't matter?

Most common way of writing a HTML table with vertical headers?

Which HTML5 tag should I use to mark up an author’s name?

Why <big> is not in HTML 5 Tag list while <small> is?

How to semantically provide a caption, title or label for a list in HTML

Is it correct to use DIV inside FORM?

Semantics and Structure of Name-Value Pairs

Correct Semantic tag for copyright info - html5

How to properly use h1 in HTML5

Best HTML5 markup for sidebar

What is the proper HTML entity for the "x" in a dimension?

Is it ok to use <strong> in place of <b> blindly?

HTML5 nav element vs. role="navigation"