The following elements can all wrap text- and block-level elements to give them functionality, style, and meaning.
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>
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.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 bdo
element is the bi-direction override element:
<bdo dir></bdo>
The q
element is the quote element:
<q cite></q>
The syntax of the span
element is as follows:
<span></span>
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 syntax of the
strong
element is as follows:
<strong></strong>
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 syntax of the
time
element is as follows:
<time datetime></time>
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 wbr
element is the word break opportunity element:
<wbr>
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.
18.191.74.66