Login    New User    Forgot Password    Help      

Inline Elements

GO TO INDEX

Inline Elements

Inline elements are fragments of the contents of a block level element. For example, a piece of emphasised text inside a sentence. HTML has a large number of these inline elements, and they each serve a specific purpose. Browsers may apply default styles to these elements, such as displaying a line through deteted text, and using italics for definition text. There is no strict rule as to how these should be rendered, and most users will be used to the response of their browser. If you need a specific response, use CSS to style the elements however you need.

Inline elements can contain other inline elements as long as they are correctly nested.

<em>
Indicates emphasised text - most browsers render this in italics.
<p>This is an <em>important</em> word.</p>
<strong>
Indicates strongly emphasised text - most browsers render this in bold.
<li>This is <strong>very important</strong>.</li>
<sub>
Indicates subscript text - most browsers render this in a small font, positioned near the bottom of normal text.
<h3>Oxygen is O<sub>2</sub></h3>
<sup>
Indicates superscript text - most browsers render this in a small font, positioned near the top of normal text.
<p>This is the 2<sup>nd</sup> street.</p>
<code>
Used for a short piece of programming code that is used as part of a sentence - most browsers render this in a monospace font.
<dd>This is done using the <code>x++</code> operator.</dd>
<samp>
Used for a sample output from a program, script, or form - most browsers render this in a monospace font.
<p>This script would output <samp>Hello world</samp></p>
<kbd>
Used to indicate a key combination or keyboard shortcut - most browsers render this in a monospace font.
<td>Press <kbd>Ctrl+C</kbd> to copy</td>
<var>
Used to indicate a program or code variable - most browsers render this in italics.
<li>Here, we can use the <var>window.document</var> object</li>
<dfn>
Used to indicate that the word(s) inside the DFN element are being defined in the current paragraph (or whatever the parent block element is) - most browsers render this in italics.
<p>A <dfn>heading</dfn> is a title for a section of a document.</p>
<ins>
Indicates that the inserted text has been inserted into the document after its initial creation - generally used along with the DATETIME attribute to say when the change occurred. It is also possible to use the cite attribute to give the URL of a page with more details about the change, but no current browsers have a useful way to use that. Most browsers render this with an underline or in italics. The underline can make it easy to confuse with links, but most browser have still adopted the underline convention.
<p>This is <ins datetime="2006-02-22T17:43:32GMT">not</ins> the only time this has happened.</p>
<del>
Indicates that the inserted text has been deleted - generally used along with the DATETIME attribute to say when the change occurred - most browsers render this with a line through it.
<p>There are <del datetime="2011-02-22T17:43:32GMT">loads of</del> options.</p>
<abbr> and <acronym>
Used to indicate that the word or letters are a contracted form of more words. There is a lot of confusion over where each of these should be used, but in general, the ABBR indicates that the letters are not spoken as a word (such as HTTP), whereas ACRONYM indicates that the contents are spoken as a word (such as such as laser). Future HTML versions will only have the ABBR element, so you may want to avoid the ACRONYM element altogether, and use only the ABBR element for all abbreviations and acronyms. The title attribute is used to give the full expanded form of the abbreviated word. Most browsers display this with a dotted bottom border. Internet Explorer 6- does not recognise either of these elements. Internet Explorer 7+ recognises both, but does not apply any styles to them by default.
<dd>This uses the <abbr title="HyperText Transfer Protocol">HTTP</abbr> protocol.</dd>
<q>
This is for use when quoting text from other pages, books, documents, speeches, etc. In some browsers it will automatically be given quotes at each end. It is also possible to use the cite attribute to give the URL of a page where the quote was taken from, but no current browsers have a useful way to use that.
<p>According to him <q cite="http://example.com/">there is no spoon</q>.</p>
<cite>
Used to give the title of a cited source - most browsers render this in italics.
<li>More information can be found in <cite>A Tale of Two Cities</cite>.</li>
<span>
This is a generic inline element. In pure HTML, it serves no purpose. The reason it exists is mainly to facilitate styling, or to allow you to denote arbitrary inline content, to give meaning where there is nothing more appropriate. For example, you may want to show how to work through a menu to find the desired option. Since there is no menu path element in HTML, you could use a span, give it an appropriate CLASS or ID that you can use as an identifier, then use that identifier to style it in the CSS.
<li>Open the options dialog using <span class="menu">Tools - Options</span>.</li>
<br>
Inserts a line break into text, and does not have a closing tag. This should be avoided in most cases. There are very few cases where this is the right thing to use. The only places where it should be used are where the parent element has no other means of formatting but the contents require line breaks, such as a postal address inside an address element.
<address>22 Example Street<br>Exampletown</address>
<b>, <i>, <big>, <small>, <tt>
These elements make text bold, italic, big, small, and fixed width font respectively. HTML transitional also allows a few others such as STRIKEor S (line-through), U (underline), and FONT (font families and colours). I recommend that you avoid these, mainly because there is almost always something much more appropriate

GO TO INDEX