Inline Elements

What are Inline Elements?

• Inline elements are tags that surround text content. This could range from a single character to a paragraph or more.
• The default browser rendering for these tags has them extending only as far as their content; they do not extend across the page like block-level elements. CSS can change how these render, but they default they only go as far as their content.
• Given this default rendering, inline tags do not create extra vertical space on the lines above or below (they lack margins) and do not force subsequent content to new lines.
• Inline tags can be nested inside other inline tags, as long as the inner set of tags is closed before the outer set of tags.
• As a general rule, block-level tags cannot be nested inside inline tags because that violates proper document structure. Inline tags can be nested inside block-level tags.
• The exceptions to the general rule are:
  • <br /> can be nested inside inline tags
  • <a></a>, an inline tag that creates an anchor (a link), can hold block-level tags (as of HTML5)
• Even though <a></a> can hold block-level tags and still be valid, think carefully before doing this and treat it as more of a last resort when deciding how to structure your markup. You can still run into validation and rendering issues by putting anchors in places where they don't belong, and you are not allowed to nest anchors inside of anchors (where would the user be directed when clicking on that?), so wrapping an anchor around a lot of other markup will be problematic.

Emphasizing Text

• There are four tags used for emphasis. Two are more presentationally focused, while the others leave it up to the client device (the user agent) to determine appearance. None of these are deprecated.
• The two presentationally-focused tags are <b></b> (boldface) and <i></i> (italic), which have the indicated default visual rendering in browsers. I recommend against the use of these tags because they are prescribing visual appearance and that effect may not be ideal for the device (for example, italicizing text may reduce readability of small text on a handheld device).
• The tags that let the device choose how to render their content are <strong></strong> (strong emphasis) and <em></em> (emphasis). <strong> renders as boldface and <em> renders as italic by default in web browsers, so we are not losing any visual effects.

Text Emphasis Example

See the Pen Text Emphasis by Jason Withrow (@jwithrow) on CodePen.

Highlighting Text

• The <mark></mark> tag is used to highlight text.
• By default a yellow highlight is shown, but CSS background or background-color can be used to change that background color.

Highlighting Example

See the Pen HTML Highlighting by Jason Withrow (@jwithrow) on CodePen.

Increasing / Decreasing Text Size

• In HTML5 text sizes range from 1 (small) to 7 (huge).
• By default, text is size 3.
• The <small></small> tag is not deprecated and will decrease text size by one (from the default of 3 down to 2). This is not deprecated because it could be used for the "fine print" in a document.
• The <big></big> tag is deprecated in favor of CSS font-size, because it is purely presentational. It will increase text size by one (from the default of 3 up to 4).

Increasing / Decreasing Text Size Example

See the Pen HTML Text Sizing by Jason Withrow (@jwithrow) on CodePen.

Quotes and Citations

• These inline tags are used to mark up quoted material, indicating the person who said it (surrounded by <cite></cite>) and short quotations (surrounded by <q></q>).
• Browsers usually render <cite></cite> content as italicized.
• The difference between the block-level <blockquote> and the inline <q>:
  • <blockquote> is intended for long passages that are a paragraph or multiple paragraphs
  • <q> is intended for short quotations
• Content inside of <q></q> has quotation marks added during rendering.
  • If you specify the lang attribute the quotation marks could be displayed differently (based on conventions in that language).
  • For example, in English double quotes are used and if a quotation is nested inside another quotation the inner set uses single quotes.

Quotes and Citations Example

See the Pen Quotes and Citations by Jason Withrow (@jwithrow) on CodePen.

Code, Variables, and Sample Output

• <code></code> tags are used to mark up a piece of computer code that appears as part of your page content. Content is usually rendered in a monospace font (all characters are equal width).
• <var></var> tags are used to mark up a variable that appears as part of your page content. Content is usually italicized.
• <samp></samp> tags are used to mark up sample output that appears as part of your page content. Content is usually rendered in a monospace font (all characters are equal width).

Code, Variables, and Sample Output Example

See the Pen Code, Variables, and Sample Output by Jason Withrow (@jwithrow) on CodePen.

Spanning Text

• The <span></span> tags are generic inline tags with no browser defaults for appearance (other than displaying as inline).
• They are used when no other inline tag is appropriate and some markup is needed for text. One example is a change in language for a word or words; the lang attribute can be applied to the <span> to reflect a langage change for those words.
• Typically the <span> is styled via CSS.

Subscripts and Superscripts

• Some content, such as mathematical and scientific information, needs to have subscripts or superscripts applied to communicate meaning. Other times you might be specifying footnotes.
• Subscripts are coded as <sub></sub>.
• Superscripts are coded as <sup></sup>.
• Note that these will alter the spacing between lines of text because of the space needed for the superscript or subscript.

Subscripts and Superscripts Example

See the Pen Superscripts and Subscripts by Jason Withrow (@jwithrow) on CodePen.

Acronyms and Abbreviations

• Acronyms are coded as <acronym></acronym> and the title attribute is used for the full text.
• Abbreviations are coded as <abbr></abbr> and the title attribute is used for the full text.
• Since all acronyms are an abbreviation, but all abbreviations are not acronyms, the <acronym></acronym> tag was deprecated. If you are modifying a website that still uses it then you should change those to <abbr></abbr>.
• Modern browsers render the content inside the tags with a dotted underline.

Abbreviations Example

See the Pen Abbreviations by Jason Withrow (@jwithrow) on CodePen.

Inserted and Deleted Text

• When a document is changed over time (perhaps multiple authors are editing the document prior to publication), the <ins></ins> tag can be used to denote inserted text and the <del></del> tags to denote text to be deleted.
• <ins></ins> content is generally underlined.
• <del></del> content is generally rendered with a strike through the text (a horizontal line runs through the midline of the text).
• In addition to the attributes noted for these tags, the title attribute can be used to provide an explanation of the changes. This will render as a tooltip when the tag is moused over.

Inserted and Deleted Text Example

See the Pen Insert and Delete by Jason Withrow (@jwithrow) on CodePen.

Definitions

• Definitions are coded as <dfn></dfn> and can be used for a term the first time it is used in a document.
• These generally render as italicized text, but some browsers do not have default styling for them.
• The title attribute is often used to hold the definition and will display its content as a tooltip when moused over.

Definitions Example

See the Pen Definition by Jason Withrow (@jwithrow) on CodePen.

User Input

• Coded as <kbd></kbd>, this indicates text to be entered by the user (via the keyboard).
• These generally render their content in a monospaced font (all characters are equal width).

User Input Example

See the Pen Keyboard by Jason Withrow (@jwithrow) on CodePen.

Deprecated Inline Elements

• These tags have been deprecated either because of their presentational nature (since HTML5 is supposed to be about document structure, not document presentation) or because another tag exists that takes their place.
• These are tags you should never use, but you might encounter them in legacy code so you should recognize them. If asked to update a website using these deprecated tags you should also know how to replace them with more acceptable approaches.