Inline elements

The following elements can all wrap text- and block-level elements to give them functionality, style, and meaning.

a

The a element is the anchor element. This is where HTML gets the HyperText (HT), the syntax is as follows:

<a download href media ping rel target type></a>

Attributes

Here are the attributes that are used in the a element:

• download: This attribute lets the browser know that the item should be downloaded. The dialog will default to the filename in this attribute.
• href: This is the link target.
• media: This states the media that the stylesheet should apply to based on a media query.
• ping: This makes a URL to ping and notify if the link is followed.
• rel: This states the relationship of the document being linked to.
• target: This states where the target link is to be displayed.
• type: This states the MIME type of the linked resource.

Description

The a element is one of the most important and useful elements. It allows you to link documents together and you can easily jump between elements. We can say that the Web would not be as popular as it is now without this very easy-to-use element.

The link can be that of an anchor tag in the document, a relative URL, or any external resource. When linking to an anchor tag in the current document, use the a tag and the id attribute.

The content you put inside the a element will become part of what the user can click on to follow the link. This includes the text, img, and p elements, to name a few.

Here is an example of an img element with an image:

<a >
    <img src="packt_logo.png" />
</a>

Here is an example of a PDF document that will be downloaded; this will track each click:

<a download="report.pdf" href="assests/report.pdf" media="min-width: 1024px" ping="track/click" rel="alternate" target="_blank" type=" application/pdf"></a>

abbr

The abbr element is the abbreviation element:

<abbr></abbr>

Description

The abbr element is used to show what an abbreviation stands for. You should put the full word in the title attribute. Most browsers will display this as a tooltip when you hover over this element.

Here is an example:

<abbr title="abbreviation">abbr</abbr>

bdo

The bdo element is the bi-direction override element:

<bdo dir></bdo>

Attributes

The dir attribute is used in the bdo element, which gives the direction of the text. Its values can be ltr, rtl, and auto.

Description

The bdo element will override the current direction of the text for the direction defined in the element.

Here is an example:

<bdo dir="rtl">Right to Left.</bdo>

br

The br element is the line break element:

<br>

Description

The br element adds a line break. This is needed as line breaks in text are ignored when rendered in the browser. This should not be used to help place elements, as that is the job of CSS.

Here is an example:

First Name<br>
LastName

cite

The cite element is the citation element:

<cite></cite>

Description

The cite element is used to cite another source. Most browsers will render this in italics.

Here is an example:

This quote is from <cite>Web Developer's Reference</cite>

code

The syntax of the code element is as follows:

<code></code>

Description

The code element is used to display the programming code in a document. The browser will use a monospace font for it.

Here is an example:

Here is some JavaScript: <code>var a = 'test'</code>

dfn

The dfn element is the defining instance element:

<dfn></dfn>

Description

The dfn element is used to create a defining instance or the first time a specific word is introduced and explained.

Here is an example of the dfn element:

<dfn>HTML</dfn>, or HyperText Markup Language.

em

The em element is the emphasis element:

<em></em>

Description

The em element is used to add more emphasis to a specific word or phrase. By default, browsers will render this in italic font, but it should not just be used for italics.

kbd

The kbd element is the keyboard input element:

<kbd></kbd>

Description

The kbd element is used for text that the user should input. This does not mean that the user inputs data into the element, rather they will enter it into a window, console, or some application on their computer.

Here is an example:

Press <kbd>Win + R</kbd> to open the Run dialog.

mark

The syntax of the mark element is as follows:

<mark></mark>

Description

The mark element is used to highlight text.

Here is an example:

<mark>This</mark> will be highlighted

q

The q element is the quote element:

<q cite></q>

Attributes

The cite attribute used in the q element states the URL of the source of the quote.

Description

The q element is used for short quotes. For longer quotes, use blockquote.

Here is an example:

<q cite="http://en.wikiquote.org/">Don't quote me on this.</q>

See also

You can also refer to the blockquote attribute to learn more about the q element.

s

The s element is the strikethrough element:

<s></s>

Description

The s element should be used when a piece of information in the document is no longer accurate. This is different than a revision made to the document.

Here is an example:

Today is the <s>twenty-fifth<s> twenty-sixth.

samp

The samp element is the sample output element:

<samp></samp>

Description

The samp element is used to show the sample output from a command or program.

Here is an example:

The command should output <samp>Done!</samp>

small

The syntax of the small element is as follows:

<small></small>

Description

The small element is used to make the text smaller. This is usually done with text such as the copyright or legal text.

Here is an example:

<small>Copyright 2014</small>

span

The syntax of the span element is as follows:

<span></span>

Description

The span element is much like the p element; in that, it is just an arbitrary container. The p element is a block-level element, and the span element is an inline element. The element does not add any semantic meaning to the text or document. Often, it is used to add a CSS style to the text:

<span>This text is in the span element.</span>

strong

The syntax of the strong element is as follows:

<strong></strong>

Description

The strong element should be used when certain text needs more importance. This carries some semantic meaning. The strong element's default style in most browsers is bold. This should not then be interchangeable with the b element, as that does not carry any semantic meaning.

Here is an example:

<strong>Warning!</strong> JavaScript must be enabled.

sub

The sub element is the subscript element:

<sub></sub>

Description

The sub element will render the text as a subscript.

Here is an example:

H<sub>2</sub>O

sup

The sup element is the superscript element:

<sup></sup>

Description

The sup element will render the text as a superscript.

Here is an example:

x<sup>2</sup> is what x squared should look like

time

The syntax of the time element is as follows:

<time datetime></time>

Attributes

The datetime attribute used in the time element gives a string that is the date and time value.

Description

The datetime element allows browsers to easily parse dates out of a document. You can wrap a date or the description of a date (tomorrow or July 4, for example) and still have an exact date for the browser to read.

Here is an example:

The party is on <time datetime="2014-11-27 14:00">Thanksgiving @ 2PM</time>

var

The var element is the variable element:

<var></var>

Description

The var element is used for variables in a mathematical expression or for programming.

Here is an example:

The variable <var>x</var> is equal to the string test in this example.

wbr

The wbr element is the word break opportunity element:

<wbr>

Description

The wbr element is a new element that was introduced with HTML5. We use this element to let the browser know of a good spot to break between words. This does not force a break, but if a break is needed, then the browser will respect the element.

It is an empty tag, meaning that it should not have an ending tag.

Here is an example:

If you have a really short width <wbr>then you <wbr>could have breaks.