There are many other elements in HTML for formatting text, which we didn't get to in the HTML text fundamentals article. The elements described in this article are less known, but still useful to know about (and this is still not a complete list by any means). Here you'll learn about marking up quotations, description lists, computer code and other related text, subscript and superscript, contact information, and more.
| Prerequisites: | Basic HTML familiarity, as covered in Getting started with HTML. HTML text formatting, as covered in HTML text fundamentals. |
|---|---|
| Objective: | To learn how to use lesser-known HTML elements to mark up advanced semantic features. |
In HTML text fundamentals, we walked through how to mark up basic lists in HTML, and we mentioned the third type of list you'll occasionally come across — description lists. The purpose of these lists is to mark up a set of items and their associated descriptions, such as terms and definitions, or questions and answers. Let's look at an example of a set of terms and definitions:
soliloquy In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.) monologue In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present. aside In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought or piece of additional background information
Let's finish marking up our example:
dl> dt>soliloquydt> dd> In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.) dd> dt>monologuedt> dd> In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present. dd> dt>asidedt> dd> In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought, or piece of additional background information. dd> dl>
The browser default styles will display description lists with the descriptions indented somewhat from the terms.
Note that it is permitted to have a single term with multiple descriptions, for example:
dl> dt>asidedt> dd> In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought, or piece of additional background information. dd> dd> In writing, a section of content that is related to the current topic, but doesn't fit directly into the main flow of content so is presented nearby (often in a box off to the side.) dd> dl>
It's time to try your hand at description lists; add elements to the raw text in the Input field so that it appears as a description list in the Output field. You could try using your own terms and descriptions if you like.
If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see the answer.
h2>Live outputh2> div class="output" style="min-height: 50px;">div> h2>Editable codeh2> p class="a11y-label"> Press Esc to move focus away from the code area (Tab inserts a tab character). p> textarea id="code" class="input" style="min-height: 100px; width: 95%"> Bacon The glue that binds the world together. Eggs The glue that binds the cake together. Coffee The drink that gets the world running in the morning. A light brown color. textarea> div class="playable-buttons"> input id="reset" type="button" value="Reset" /> input id="solution" type="button" value="Show solution" /> div>
html font-family: sans-serif; > h2 font-size: 16px; > .a11y-label margin: 0; text-align: right; font-size: 0.7rem; width: 98%; > body margin: 10px; background: #f5f9fa; >
const textarea = document.getElementById("code"); const reset = document.getElementById("reset"); const solution = document.getElementById("solution"); const output = document.querySelector(".output"); const code = textarea.value; let userEntry = textarea.value; function updateCode() output.innerHTML = textarea.value; > const htmlSolution = "\n
"; let solutionEntry = htmlSolution; reset.addEventListener("click", () => textarea.value = code; userEntry = textarea.value; solutionEntry = htmlSolution; solution.value = "Show solution"; updateCode(); >); solution.addEventListener("click", () => if (solution.value === "Show solution") textarea.value = solutionEntry; solution.value = "Hide solution"; > else textarea.value = userEntry; solution.value = "Show solution"; > updateCode(); >); textarea.addEventListener("input", updateCode); window.addEventListener("load", updateCode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = (e) => if (e.code === "Tab") e.preventDefault(); insertAtCaret("\t"); > if (e.code === "Escape") textarea.blur(); > >; function insertAtCaret(text) const scrollPos = textarea.scrollTop; let caretPos = textarea.selectionStart; const front = textarea.value.substring(0, caretPos); const back = textarea.value.substring( textarea.selectionEnd, textarea.value.length, ); textarea.value = front + text + back; caretPos += text.length; textarea.selectionStart = caretPos; textarea.selectionEnd = caretPos; textarea.focus(); textarea.scrollTop = scrollPos; > // Update the saved userCode every time the user updates the text area code textarea.onkeyup = () => // We only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if (solution.value === "Show solution") userEntry = textarea.value; > else solutionEntry = textarea.value; > updateCode(); >;- Bacon
\n- The glue that binds the world together.
\n- Eggs
\n- The glue that binds the cake together.
\n- Coffee
\n- The drink that gets the world running in the morning.
\n- A light brown color.
\n
HTML also has features available for marking up quotations; which element you use depends on whether you are marking up a block or inline quotation.
If a section of block level content (be it a paragraph, multiple paragraphs, a list, etc.) is quoted from somewhere else, you should wrap it inside a element to signify this, and include a URL pointing to the source of the quote inside a cite attribute. For example, the following markup is taken from the MDN element page:
p> The strong>HTML code><blockquote>code> Elementstrong> (or em>HTML Block Quotation Elementem>) indicates that the enclosed text is an extended quotation. p>
To turn this into a block quote, we would just do this:
p>Here is a blockquote:p> blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"> p> The strong>HTML code><blockquote>code> Elementstrong> (or em>HTML Block Quotation Elementem>) indicates that the enclosed text is an extended quotation. p> blockquote>
Browser default styling will render this as an indented paragraph, as an indicator that it is a quote; the paragraph above the quotation is there to demonstrate that.
Inline quotations work in exactly the same way, except that they use the element. For example, the below bit of markup contains a quotation from the MDN page:
p> The quote element — code><q>code> — is q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"> intended for short quotations that don't require paragraph breaks. q> p>
Browser default styling will render this as normal text put in quotes to indicate a quotation, like so:
The content of the cite attribute sounds useful, but unfortunately browsers, screen readers, etc. don't really do much with it. There is no way to get the browser to display the contents of cite , without writing your own solution using JavaScript or CSS. If you want to make the source of the quotation available on the page you need to make it available in the text via a link or some other appropriate way.
p> According to the a href="/en-US/docs/Web/HTML/Element/blockquote"> cite>MDN blockquote pagecite>a>: p> blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"> p> The strong>HTML code><blockquote>code> Elementstrong> (or em>HTML Block Quotation Elementem>) indicates that the enclosed text is an extended quotation. p> blockquote> p> The quote element — code><q>code> — is q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"> intended for short quotations that don't require paragraph breaks. q> — a href="/en-US/docs/Web/HTML/Element/q">cite>MDN q pagecite>a>. p>
Citations are styled in italic font by default.
Time for another active learning example! In this example we'd like you to:
The citation sources you need are:
If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see the answer.
h2>Live outputh2> div class="output" style="min-height: 50px;">div> h2>Editable codeh2> p class="a11y-label"> Press Esc to move focus away from the code area (Tab inserts a tab character). p> textarea id="code" class="input" style="min-height: 150px; width: 95%"> p>Hello and welcome to my motivation page. As Confucius' quotes site says:p> p>It does not matter how slowly you go as long as you do not stop.p> p>I also love the concept of positive thinking, and The Need To Eliminate Negative Self Talk (as mentioned in Affirmations for Positive Thinking.)p> textarea> div class="playable-buttons"> input id="reset" type="button" value="Reset" /> input id="solution" type="button" value="Show solution" /> div>
html font-family: sans-serif; > h2 font-size: 16px; > .a11y-label margin: 0; text-align: right; font-size: 0.7rem; width: 98%; > body margin: 10px; background: #f5f9fa; >
const textarea = document.getElementById("code"); const reset = document.getElementById("reset"); const solution = document.getElementById("solution"); const output = document.querySelector(".output"); const code = textarea.value; let userEntry = textarea.value; function updateCode() output.innerHTML = textarea.value; > const htmlSolution = 'Hello and welcome to my motivation page. As Confucius\' quotes site says:
\n\n\n\n\nIt does not matter how slowly you go as long as you do not stop.
\nI also love the concept of positive thinking, and
'; let solutionEntry = htmlSolution; reset.addEventListener("click", () => textarea.value = code; userEntry = textarea.value; solutionEntry = htmlSolution; solution.value = "Show solution"; updateCode(); >); solution.addEventListener("click", () => if (solution.value === "Show solution") textarea.value = solutionEntry; solution.value = "Hide solution"; > else textarea.value = userEntry; solution.value = "Show solution"; > updateCode(); >); textarea.addEventListener("input", updateCode); window.addEventListener("load", updateCode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = (e) => if (e.code === "Tab") e.preventDefault(); insertAtCaret("\t"); > if (e.code === "Escape") textarea.blur(); > >; function insertAtCaret(text) const scrollPos = textarea.scrollTop; let caretPos = textarea.selectionStart; const front = textarea.value.substring(0, caretPos); const back = textarea.value.substring( textarea.selectionEnd, textarea.value.length, ); textarea.value = front + text + back; caretPos += text.length; textarea.selectionStart = caretPos; textarea.selectionEnd = caretPos; textarea.focus(); textarea.scrollTop = scrollPos; > // Update the saved userCode every time the user updates the text area code textarea.onkeyup = () => // We only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if (solution.value === "Show solution") userEntry = textarea.value; > else solutionEntry = textarea.value; > updateCode(); >;The Need To Eliminate Negative Self Talk(as mentioned in Affirmations for Positive Thinking.)
If providing the expansion in addition to the abbreviation makes little sense, and the abbreviation or acronym is a fairly shortened term, provide the full expansion of the term as the value of title attribute:
Let's look at an example.
p> We use abbr>HTMLabbr>, Hypertext Markup Language, to structure our web documents. p> p> I think abbr title="Reverend">Rev.abbr> Green did it in the kitchen with the chainsaw. p>
These will come out looking something like this:
For this simple active learning assignment, we'd like you to mark up an abbreviation. You can use our sample below, or replace it with one of your own.
h2>Live outputh2> div class="output" style="min-height: 50px;">div> h2>Editable codeh2> p class="a11y-label"> Press Esc to move focus away from the code area (Tab inserts a tab character). p> textarea id="code" class="input" style="min-height: 50px; width: 95%"> p>NASA, the National Aeronautics and Space Administration, sure does some exciting work.p> textarea> div class="playable-buttons"> input id="reset" type="button" value="Reset" /> input id="solution" type="button" value="Show solution" /> div>
html font-family: sans-serif; > h2 font-size: 16px; > .a11y-label margin: 0; text-align: right; font-size: 0.7rem; width: 98%; > body margin: 10px; background: #f5f9fa; >
const textarea = document.getElementById("code"); const reset = document.getElementById("reset"); const solution = document.getElementById("solution"); const output = document.querySelector(".output"); const code = textarea.value; let userEntry = textarea.value; function updateCode() output.innerHTML = textarea.value; > const htmlSolution = "NASA, the National Aeronautics and Space Administration, sure does some exciting work.
"; let solutionEntry = htmlSolution; reset.addEventListener("click", () => textarea.value = code; userEntry = textarea.value; solutionEntry = htmlSolution; solution.value = "Show solution"; updateCode(); >); solution.addEventListener("click", () => if (solution.value === "Show solution") textarea.value = solutionEntry; solution.value = "Hide solution"; > else textarea.value = userEntry; solution.value = "Show solution"; > updateCode(); >); textarea.addEventListener("input", updateCode); window.addEventListener("load", updateCode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = (e) => if (e.code === "Tab") e.preventDefault(); insertAtCaret("\t"); > if (e.code === "Escape") textarea.blur(); > >; function insertAtCaret(text) const scrollPos = textarea.scrollTop; let caretPos = textarea.selectionStart; const front = textarea.value.substring(0, caretPos); const back = textarea.value.substring( textarea.selectionEnd, textarea.value.length, ); textarea.value = front + text + back; caretPos += text.length; textarea.selectionStart = caretPos; textarea.selectionEnd = caretPos; textarea.focus(); textarea.scrollTop = scrollPos; > // Update the saved userCode every time the user updates the text area code textarea.onkeyup = () => // We only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if (solution.value === "Show solution") userEntry = textarea.value; > else solutionEntry = textarea.value; > updateCode(); >;
HTML has an element for marking up contact details — . This wraps around your contact details, for example: