Inline element in html and their uses part 1

Emphasized text
<em>...</em>
Use the em element to indicate which part of a sentence should be stressed or emphasized. The placement of em elements affects how a sentence’s meaning is interpreted. Consider the following sentences that are identical, except for which words are stressed.
<p><em>Matt</em> is very smart.</p>
<p>Matt is <em>very</em> smart.</p>
The first sentence indicates who is very smart. The second example is about how smart he is.
 Emphasized text (em) elements nearly always display in italics by default, but of course you can make them display any way you like with a style sheet. Screen readers may use a different tone of voice to convey stressed content, which is why you should use an em element only when it makes sense semantically, not just to achieve italic text.

Short quotations
<q>...</q>
Use the quotation (q) element to mark up short quotations, such as “To be or not to be,” in the flow of text, as shown in this example. Matthew Carter says, <q>Our alphabet hasn't changed in eons.</q>
According to the HTML spec, browsers should add quotation marks around q elements automatically, so you don’t need to include them in the source document. And for the most part they do, with the exception of Internet Explorer versions 7 and earlier. Fortunately, as of this writing, those browsers
make up only 5–8% of browser usage, and it’s sure to be significantly less by the time you read this. If you are concerned about a small percentage of users seeing quotations without their marks, stick with using quotation marks in your source, a fine alternative.
Example : <p> He is very optimistic about the <q>consequence </q> behind his action</p>.

Strong  
<strong>...</strong>
The strong element indicates that a word or phase is important. In the following example, the strong element identifies the portion of the instruction that requires extra attention.
Example:
<p>When checking out of the hotel, <strong>drop the keys in the red box
by the front desk</strong>.</p>

Visual browsers typically display strong text elements in bold text bydefault. Screen readers may use a distinct tone of voice for important content, so mark text as strong only when it makes sense semantically, not just to make text bold.  

The previously presentational elements that are sticking around in HTML5 with fancy new semantic definitions.
<b>...</b>
Keywords or visually emphasized text (bold)
<i>...</i>
Alternative voice (italic)
<s>...</s>
Incorrect text (strike-through)
<u>...</u>
Annotated text (underline)
<small>...</small>
Legal text; small print (smaller type size) 

 As long as we’re talking about bold and italic text, let’s see what the old band i elements are up to now. The elements b, i, u, s, and small were introduced in the old days of the Web as a way to provide typesetting instructions (bold, italic, underline, strike through, and smaller text, respectively).
Despite their original presentation purposes, these elements have been included in HTML5 and given updated, semantic definitions based on patterns of how they’ve been used. Browsers still render them by default as you’d expect . However, if a type style change is all you’re after, using a style sheet rule is the appropriate solution. Save these for when they are semantically appropriate.
Let’s look at these elements and their correct usage, as well as the style sheet alternatives. 

b
HTML 4.01 definition: Bold
HTML5 definition: Keywords, product names, and other phrases that need to stand out from the surrounding text without conveying added importance or emphasis.
CSS alternative: For bold text, use font-weight. Example: font-weight: bold
Example: <p>The slabs at the ends of letter strokes are called<b>serifs</b>.</p>  

i
HTML 4.01 definition: Italic
HTML5 definition: Indicates text that is in a different voice or mood than the surrounding text, such as a phrase from another language, a technical term, or thought.
CSS alternative: For italic text, use font-style. Example: font-style: italic
Example: <p>Simply change the font and <i>Voila!</i>, a new personality.</p> 

s
HTML 4.01 definition: Strike-through text
HTML5 definition: Indicates text that is incorrect.
CSS Property: To put a line through a text selection, use text-decoration.
Example: text-decoration: line-through;
Example: <p>Scala Sans was designed by <s>Eric Gill</s> Martin Majoor.</p>

u
HTML 4.01 definition: Underline
HTML5 definition: There are a few instances when underlining has semantic significance, such as underlining a formal name in Chinese or indicating a misspelled word after a spell check. Note that underlined text is easily confused as a link and should generally be avoided except for a few niche cases.
CSS Property: For underlined text, use text-decoration. Example: textdecoration: underline
Example: <p>New York subway signage is set in <u>Halvetica</u>.<p>

small
HTML 4.01 definition: Renders in font smaller than the surrounding text
HTML5 definition: Indicates an addendum or side note to the main text, such as the legal “small print” at the bottom of a document.
CSS Property: To make text smaller, use font-size. Example: font-size: 80%
Example: <p><a href="">Download <b>Jenville Handwriting Font</b> </a></p>
<p><small>This font is free for commercial use.</small></p> 

happy coding seasoning from codelent