02. More text components <small>, <big>, <mark>, <delete>, <insert>, <q>, <blockquote>, <abbr>, <dfn>, <address>

Here we'll go over some more text components. Note that your styling outputs won't be exactly the same, as this page uses the Bootstrap CSS Framework. We'll learn more about Bootstrap and web frameworks later when we cover CSS.

Small and Large

To make your font smaller or larger relative to the surrounding text, use the <small> and <big> tags.

<p>This is normal size text, <small>This is smaller</small>, and <big>This is bigger</big>.<p>

This is normal size text, This is smaller, and This is bigger.


To specify that some text should be highlighted, use the <mark> tag.

<mark>Here's an example of some marked text.</mark>

Here's an example of some marked text.

Delete and Insert

To specify some text that should be deleted or inserted, use the <del> or <ins> tags.

<del>Here is some text that is to be deleted<del>.
<ins>Here is some text that is to be inserted</ins>.

Here is some text that is to be deleted.

Here is some text to be inserted.

This is useful if you want to let the user know that changes have been made, or an article has been updated.


Short Quotes

To specify a short qutation, use the <q> tag. For example:

<p>Google's goal is to <q>focus on the user</q>.</p>

Google's goals is to focus on the user.

Long Quotes

For longer quotes, we use the <blockquote> tag. We can also include a cite attribute which specifies the URL in which the quote came from.

Goodness is about character - integrity, honesty, kindness, generosity, moral courage, and the like. More than anything else, it's about how we treat other people.

- Dennis Prager


For abbreviations, we use the <abbr> tag with the title attribute. The title should have a value with the full phrase.

<abbr title="Hyper Text Markup Language"></title>


To notify where a term is defined, we use the <dfn> tag.

<dfn>HTML</dfn> is the standard markup language used to create webpages.

HTML is the standard markup language used to create webpages.

Contact Information

To write out one's contact information, use the <address> tag. Note the use of the <br> tag used to make a new line.

<address>Visit us at:
  123 Fake Street<br>
  Burmingham, Oklahoma<br>

Aching back from coding all day?

Prism Glasses

Aching back from coding all day? Try Back Problems

Ever feel achy from sitting crunched up on your computer table? Try lying down with these optical glasses that allow you to work on your laptop while lying flat on your back. This is the perfect solution with those with limited mobility or those who wish to prevent neck cramps and back strains.

$ Check price
4.454.45Amazon 4 logo(128+ reviews)

More Back Problems resources

Build modern and responsive webpages

The Modern Web

Build modern and responsive webpages Try Front-end

The Modern Web will guide you through the most important tools of device-agnostic web development, including HTML5, CSS3, and JavaScript. The plain-english explanations and practical examples emphasize the techniques, principles, and practices that you'll need to easily transcend individual browser quirks and stay relevant as these technologies are updated.

$ Check price
34.9534.95Amazon 4.5 logo(30+ reviews)

More Front-end resources