In this lesson, we'll explore some tags that are rarely used but are still useful to know!
There will come a time where you'll want to include some words said or written by somebody else, in other words, quoting. HTML offers a great solution to this via the
q tag for in-line quotes and the
blockquote tag for quotes that are likely to be longer.
Both tags have the
cite attribute where you can specify the URL of the source.
<p>According to Wikipedia, there are <q cite="https://en.wikipedia.org/wiki/Wikipedia:Size_comparisons">5,438,053 articles of any length</q> for the English language.</p> <blockquote cite="https://en.wikipedia.org/wiki/Wikipedia:Size_comparisons"> <p>Currently, the English Wikipedia alone has over 5,442,205 articles of any length, and the combined Wikipedias for all other languages greatly exceed the English Wikipedia in size, giving more than 27 billion words in 40 million articles in 293 languages.</p> </blockquote>
This is an example of a blockquote!
When you want to display a time or date, the
time tag helps you do so semantically. The browser isn't going to render the content any differently, but it allows you to exactly define the time or date you are referring to.
<time datetime="2017-09-01">Friday, September 1, 2017</time>
You can define your own abbreviations and let the user hover over the text if they want to know what is stands for. You do so with the
abbr tag and a
title attribute which contains the full phrase or word.
<p>This future is every site using <abbr title="Hypertext Transfer Protocol Secure">HTTPS</abbr>.</p>
You've used a highlighter before, right? Well, this is exactly what
mark does. Wrap it around some text to see it highlighted! The visual style of this can be changed using CSS, which makes this tag even cooler.
<p>Look at how this <mark>text</mark> is highlighted!</p>
Anything you put inside
pre tags, which stands for preformatted text, will retain all the same spaces and tabs. This is a key distinction from how content within tags normally work in that the browser will just ignore the original formatting.
<pre> This text will remain this way. </pre>
Whenever you want to share code on a web page, there's a useful
code tag you can use. The
code can be used both inline or as a block if you combine it with the aforementioned
<code>const x = 1337;</code>
Or you can have a block of code, like this:
<pre> <code> const x = 1337; const y = 1337 * 2; console.log(y); </code> </pre>
That's it for these miscellaneous tags. Keep in mind that there are quite a number of more tags out in the wild that were not discussed here. Feel free to look at the documentation if you're interested in seeing all that HTML has to offer.