January 30, 2024 by admin

HTML/CSS Reference for DMET 155/355

See the Pen albers by Nicholas D’Angelo (@ndangelo) on CodePen.

Text: Abbreviations, Quotations, and Code

The basics of defining text using paragraphs (as well as emphasis and line breaks) and headings was covered in the HTML Beginner Tutorial. And for the same reason we use p and h1, h2, etc, there are a number of other tags we should also use to specifically represent other text-types, such as abbreviations, quotations, and computer code.

Abbreviations

abbr is used to markup an abbreviation, a shortened form of a word or phrase.

The expanded phrase that the abbreviation represents can be defined in the value of the title attribute. This is optional but recommended.

<p>This web site is about <abbr title="HyperText Markup Language">HTML</abbr> and <abbr title="Cascading Style Sheets">CSS</abbr>.</p>

Quotations

blockquote and q are used for quotations. blockquote is generally used for standalone often multi-line quotations whereas q is used for shorter, in-line quotations.

If the source of the quotation can be found on the Web, the cite attribute can be used to point to its origin.

<p>So I asked Bob about quotations on the Web and he said <q>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium</q>. It said:</p>

<blockquote cite="https://ndangelo.com">
    <p>blockquote and q are used for quotations. blockquote is generally used for standalone often multi-line quotations whereas q is used for shorter, in-line quotations.</p>
</blockquote>

Blockquotes work very nicely with the HTML5 elements figure and figcaption, enabling a nice, semantic way to group a quotation with a citation:

<figure>
    <blockquote>[Big old quotation about evolution]</blockquote>
    <figcaption>Charles Darwin</figcaption>
</figure>

Citations

To make things nice and confusing, as well as a cite attribute, there is also a cite tag. This can be used to define the title of a work, such as a book.

<p>According to <cite>My tax bill</cite>, Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium</q>.</p>

Code

code is used to represent any form of computer code. Further, var can be used for variables (which could be a variable in anything, not just in code – it could be a variable in an equation, for example), samp for sample output, and kbd (keyboard) for user input.

<p>If you add the line <code><var>provide</var> = true;</code> to the <code>planet</code> subroutine and then type <kbd>Help</kbd> into the console, Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium <samp>Help!</samp> error sit voluptatem.</p>

Preformatted text

pre is preformatted text and is unusual in HTML tags in that it takes notice of every character in it, including the white space (whereas other elements will ignore a consecutive space or a line-break, for example). It is most commonly used for blocks of code, where spacing, such as indentations, can be relevant.

<pre><code>
&lt;div id="intro"&gt;
    &lt;h1&gt;Some heading&lt;/h1&gt;
    &lt;p&gt;Some paragraph paragraph thing thing thingy.&lt;/p&gt;
&lt;/div&gt;
</code></pre>

As an example, pre and code are used extensively throughout this site. The code blocks, such as the one above, are code elements inside pre elements. In-line references to tags and properties are simply code elements, often inside a elements to link to the reference section.