HTML Style Elements — Mark, Sup, Sub, Cite, Q, Code, Time, A, Em, Strong, S, Small, I, B, U

 I call them style elements, 'coz they change the look and feel of text, see how they work.

Mark

<mark> element is used to hightlight the text.
Example:
<p>There were <mark> three men </mark> in a bookstore.</p>

 

Sup

<sup> element stands for superscript. Here how it is works see the example.
Example:
<p>X²y ²</p>

 

Sub

<sub> element is for subscript.
Example:
<p>X₁Y ₁</p>

 

Cite

<cite> element shows the title of work from another source, remember it isn't the name of a person.
Example:
<p>My favorite movie <cite>The Godfather</cite> was directed by Francis Ford Coppola.</p>

 

Q

Opening and closing of <q> element inserts double-quote ("), one before and one after the text — it shows phrasing content from another source.
Example:
<p>The man said <q>Women are beautiful</q>. I agreed with him.</p>

 

Code

<code> element stands for computer code, whatever front-end, back-end code you want to display should become between <code> and </code>
Example:
<p><code>activate_all()</code> never worked, perhaps there might be some error. </p>

 

Time

First we should understand machine readable "date" and "time" format as below. Extra HH:MM in time format, stands for time zone.

date format = YYYY-MM-DD
time format = HH:MM-HH:MM
attribute = datetime (machine readable value)

<time> element with date.
Example:
<time datetime="2023-10-12" pubdate> October 12, 2023</time>

<time> element with date & time.

<time datetime="2023-10-12T13:59-04:00" pubdate> October 12, 2023 1:59pm</time>

Here flag "pubdate" is optional, stands for publication date.

 

A

<a> has many attributes like href, target, download, ping, rel, hreflang, type — but here we are concerned with href only.

Example:
<a href=http://example.com> This is a demo website </a>
This way <a> element is used to give link either to internal or external source.

 

Em

Element <em> stands for emphasis, to give stress to a word or a phrase. It displays on browser in italic.
Example:
<p><em>Red beak birds</em> are rare these days.</p>

 

Strong

Element <strong> is used to give strong importance.
Example:
<p><strong>Err!</strong> Your codes crashed</p>

 

S

<s> elements stands for strikethrough for the text that is irrelevant or inaccurate; it displays on a browser like <del> element, but <del> element stands for deletion.
Example:
<p><s>Rat</s> Elephant is a big animal</p>

 

Small

This element <small> is used to display text in smaller font-size than average; it is useful for disclaimer, copyright, license, attribution, and so forth. Many times it is used for the sake of writing only. With the use of CSS you can use <small> element much smaller than its default size.
Example:
<p> Bill $140, <small>GST Included</small> </p>

 

I, B, U

Element <i> is used to italicize the text, to mark the importance of different quality. Element <b> is used to make text thick to draw attention or importance. And element <u> is used for underline.
Example:
<p> There was a <i>pink elephant</i> in a jungle. The jungle was <b>clean and tidy</b>, 'coz there was <u>no human involvement</u>.</p>