Time, Mark, Abbreviation, Quote, Pre, Code

Time, Mark, Abbreviation, Quote, Pre, Code
Table of Contents
  2. Time
  3. Abbreviations
  4. Mark
  5. Pre
  6. Code

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>
Cite your sources!
Cite your sources!
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>
The day Sabe launched!
The day Sabe launched!


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>
Ain't nobody got time to memorize every abbreviation ever.
Ain't nobody got time to memorize every abbreviation ever.


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>
Your very own digital highlighter!
Your very own digital highlighter!


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.

Pretty neat, eh?
Pretty neat, eh?


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 pre tag.

	<code>const x = 1337;</code>

Or you can have a block of code, like this:

			const x = 1337;
			const y = 1337 * 2;
Code is love. Code is life.
Code is love. Code is life.

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.