Inline elements

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

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 div elements, to name a few.

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

<a href="http://www.packtpub.com">
    <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>

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>

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

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>

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

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>

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>

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.

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.

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.

The mark element is used to highlight text.

Here is an example:

<mark>This</mark> will be highlighted

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

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>

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

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.

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>

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>

The span element is much like the div element; in that, it is just an arbitrary container. The div 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>

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.

The sub element will render the text as a subscript.

Here is an example:

H<sub>2</sub>O

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

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

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>

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.

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.