HTML elements I didn't know

I have been an FE programmer for years, living in the world of React, where everything is the components, and I don't typically write React components from the base level, which leads to misunderstanding the power or the real use case of HTML elements. So I decided that this time I would dig into HTML elements, list out all the things that I have missed during my career, and learn from them.

Bold and Italics

Italic elements ( italic style )

We have two italics to style an element, but why do we have two?
Both <i> and <em> are HTML elements used to apply emphasis to text, but they have different semantic meanings and use cases:

1. <i> (Italic):

   • The <i> element is used to indicate text that should be rendered in italic or oblique style without implying any specific emphasis or importance.

   • It is primarily used for styling purposes and doesn't carry any particular semantic meaning.

   • Search engines and screen readers typically don't interpret <i> as adding any special emphasis or importance to the enclosed text.

<p>This is an <i>italic</i> word.</p>
No special meaning for screen-readers

<em> (Emphasis) is the same as <i> but it is used to convey that the enclosed text should be emphasized in a way that reflects the natural stress or emphasis when spoken aloud. This helps with accessibility and search engine optimization.

<p>This is an <em>important</em> point to consider.</p>
Screen readers will read this important word with a tone that's 
noticable to people with disability

Bold elements ( bold style )

It's the same thing with italic elements; we would have two. Both will have the same visual style, but the difference is that one has semantic meaning and the other doesn't

<p>This is a <b>bold</b> word.</p>

<p>This is a <strong>critical</strong> point to consider.</p>

Use <b> for styling text as bold without implying any specific importance.
Use <strong> for emphasizing text to convey importance or stress, 
and it may be rendered in bold for styling. Use <strong> when you want 
to convey a stronger semantic meaning of importance along 
with visual styling.

Quotes

In HTML, <blockquote>, <q>, and <cite> are elements used for structuring and marking up quotations and citations. Here's how each of these elements is used

<blockquote>:

• The <blockquote> element is used to enclose longer quotations that are typically displayed as separate blocks of text. It's commonly used for quoting paragraphs or multiple sentences.

It provides a way to visually separate and identify quoted text.

<blockquote>
   <p>Jen is a fantastic host and she makes interviewing podcast 
guests seem so easy! (It isn’t.) She has a gift for choosing 
guests who are prescient and entertaining.
  </p>
  "--"
  <cite>  Karen McGrane </cite>
</blockquote>

<q> (Short Quotation):

• The <q> element is used for marking up shorter inline quotations, typically consisting of a single phrase or sentence. It is used for shorter, inline quotations that are enclosed in double quotation marks by default.

Browsers automatically add quotation marks around the text enclosed in the <q> element.

<p>She said, <q>Life is beautiful.</q></p>

<cite>:

• The <cite> element is used to define the title of a creative work (such as a book, movie, or song) or the name of the author of a cited work. (italic style)

saThe <cite> element does not dictate the formatting of the citation, but it can be styled using CSS.

<p>This information is based on the book <cite>The Art of War</cite> 
by Sun Tzu.</p>

Date and times

The whole point of this is to use the right HTML syntax to let computers know what is the semantic meaning of the plain text

datetime attribute is what the computer wil read
textcontent is what human will read

<time datetime="2025-05-05">May 5 , 2025 </time>

datetime format has to follow YYYY/MM/DD format
<time datetime="2025-05-05"> 10 days ago </time>

datetime can also follow the 24 hour clock format
<time datetime="07:00"> 7:00 am </time>
<time datetime="20:15"> 8:15 pm </time>

datetime can include the timezon
<time datetime="15:45-05:00"> 3:45pm in New York City </time>

datetime can also allow date and then time
<time datetime="2025-05-05-T19:00"> Wednesday , May 05 at 7</time>

<p>
  On <time datetime="1969-07-21">July 21 , 1969 </time> , 
Neil Armstrong said , 
  <quote cite="https://www.hq.nasa.gov/alsj/a11l/a11.html"> 
       One small step for man , one giant leap for mankind
  </quote>
</p>

Code, pre and br

Code

The <code> element is used to define a piece of computer code within the text. It is typically rendered with a monospaced font (where each character takes up the same amount of space) to differentiate it from regular text. Here's an example of how to use the <code> element:

<p>This is a <code>code element</code> in HTML.</p>

Pre

With the <p> tag, even if we break the line, the browsers will think that we break the line for our visibility as developers, not for display to the users.

With <pre> tag, we can easily do that

<pre>
This is some
preformatted text.
It retains line breaks and spaces.
</pre>

br

The <br> element is used to create a line break within text. It is a void element, meaning it doesn't have a closing tag. You can use it to force text to break to the next line

<br> is a special tag that doesn't need an open and enclosing tag
<p>This text has a<br>line break.</p>

Superscripts, subscripts and small text

Superscripts and Subscripts are used for things like chemical formulas and mathematical notation that appear below the regular text line.

<p> I have 2<sup>2</sup> = 4 </p>

<p>H <sub>2<sub>0 </p>

To display text in a smaller font size, you can use the <small> element. This element reduces the font size of the enclosed text without affecting its meaning.

<p> Hi nice to meet <small> you </small> </p>

HTML attributes

Thecontent editable global attribute is an enumerated attribute indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing.

 <div contenteditable="true">Edit me </div>

Aria roles

Aria roles is another HTML attribute that browsers provide to users to give the meaning of what it is. Ideally, we won't need an Aria roles attribute if we use the right semantic HTML but we live in an unideal world and Aria roles is an escape hatch

https://codesandbox.io/s/stupefied-surf-kjznmp?file=/index.html

<h1 aria-label="Hello World">
  <div class="grid" aria-hidden="true">
    <span>H</span>
    <span>e</span>
    <span>l</span>
    <span>l</span>
    <span>o</span>

    <span>w</span>
    <span>o</span>
    <span>r</span>
    <span>l</span>
    <span>d</span>
  </div>
</h1>

HTML -> DOM tree -> Accessibility tree
We hide the grid from accessibility tree , and screen reader
will only read the Hello World

Weird characters

Entity                 Character
&lt;                    <
&gt;                    >
&amp;                   &
&apos;                  '
&quote;                 ""

< doesn't play well after the character

<p>
   This is an &ltp
</p>

Non-breaking space (&nbsp)

Sometimes we need to explicitly tell the browsers not to break space

<p>Hiiiiiiii my name is Vince&nbspNguyen</p>

Media

Images are not just the only entertainment element we can put on a site; we can also put audio and video files as well. Let's take a first look at the audio

Audio

<!-- an audio is more modern format , has both open and closing tag */
<audio src=""> </audio>  -->

<!-- with the control is set , we tell browsers to support us with an
audio interface ( button , volume , timeline , etc ) -->
<audio control src=""> </audio>

<!-- we can also set the other attributes -->
<audio control autoplay loop src=""> </audio>

<!-- we can also specify more than one audio file -->
<audio>
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.mp3" type="audio/mpeg">
</audio> 
<!-- mp3 are supported in most browser's format , ogg is another fomat
that had some advantages but not popular -->

Custom audio

Video

Just like audio tag, video has a similar API for us to use

<video controls src=""> </video>

<!-- one thing to keep in mind , that's just like an image has different
format type JPEG,PNG,SVG video also has its own kind of format too -->

Videos are just a huge amount of data, so people have to come up with a way to compress these types of video

• Real Video

• Sorenson

• Windows Media

• FLV

• H.263

<video controls>
  <source src="" type="video/webm">
  <source src="" type="video/mp4">
</video>

But there's one thing that we should take into consideration Just like an image, we can choose different sizes of video (240, 360, 480, 720, 2K, 4K, etc.) to send to people who have a better screen or better connection, right? This is a very complicated topic that Netflix, YouTube, and other streaming platforms are trying to solve. In situations like this, we usually use external services to host videos.

Captions and subtitles

Putting audio and video on the web is amazing, but we need to think of how to support people with disabilities

<!-- track element will point to text file , and in web usually we will
use an .vtt format extension -->
<video controls>
  <source src="" type="video/webm">
  <source src="" type="video/mp4">
  <track  src=".vtt" kind="caption" label="english" 
  srclang="en" default
  >
</video>

Embedding other media through iframes

Embedding is placing content from one site into the body of a page on another site

• You can embed a map from Google or Mapbox into your website

• You can embed code from CodePen or Glitch

Commonly, we embed something complex from a service that takes care of all the hard parts for you (you don't have to figure out how to build a mapping service or code demo platform). You go from someone who does that for you and embed that to your website

<!-- we can click to the share button in youtube and click on the 
embed , we can get the autogenerated code from youtube and
EMBED it into our own website
-->
    <iframe
      width="560"
      height="315"
      src="https://www.youtube.com/embed/YtslW2rObDo?si=VWOIs-CyY_OKn0Fv"
      title="YouTube video player"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
      allowfullscreen
    ></iframe>

Identify contents

The web, by default, is a global center. There are several tools to make sure it's clear which language our content is in

<!-- lang is universal attribute that we can put it on any element 
There are many reasons for specifying the desired language, 
including to ensure the correct dictionaries and pronunciations are used
-->
<html lang="en-US">
   <p> Hello this is my name <span lang="vn"> Vinh </span> in VN </p>
</html>

We can also specify which flow direction the content should be in.

<html lang="en-US" dir="ltr">

</html>

Structuring content

What's the typical overall structure of what goes on inside the body?

• main

• header

• footer

• article

• section

• aside

The main element wraps around the main content of the page ( one per page)

The header and footer are used to mark places on the page where the content is a header or a footer (the footer can also be displayed at the top). Note: visual meaning means nothing with how the browser will read the HTML (only semantic meaning matters )

The article means this is, by itself, a unit of contents (something that stands on its own can be a usable thing) [card, social media post, blog post, etc ]

The section is used to wrap around sections of content ( usually each section has its own headline, marking the start of a new segment of the content )

The aside is off to the side or not the main attraction (advertisement)

Form and interactive elements

I've covered the article related to forms in HTML; you can check it here

Structuring Tabular Data

Let's take a look at this example

• table is the parent element

• tr is a table row

• th is the table heading

• td is the table data

<table>

  <tr>
    <th>Bird</th>
    <th>Color</th>
    <th>Diet</th>
    <th>Photo</th>
  </tr>

  <tr>
    <td>American Goldfinch</td>
    <td>yellow</td>
    <td>Mostly seeds.</td>
    <td><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/american-goldfinch.jpg" alt="american-goldfinch" width="360" height="261" ></td>
  </tr>

  <tr>
    <td>Bluejay</td>
    <td>blue</td>
    <td>Omnivorous.</td>
    <td><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/blue-jay.jpg" alt="" width="360" height="529" ></td>
  </tr>

  <tr>
    <td>Indigo Bunting</td>
    <td>blue</td>
    <td>Mostly seeds and insects.</td>
    <td><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/indigo-bunting.jpg" alt="" width="360" height="255" ></td>
  </tr>

  <tr>
    <td>Northern Cardinal</td>
    <td>red</td>
    <td>Seeds, insects, berries.</td>
    <td><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/northern-cardinal.jpg" alt="" width="360" height="240" ></td>
  </tr>

  <tr>
    <td>Tufted Titmouse</td>
    <td>grey</td>
    <td>Mostly insects.</td>
    <td><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/tufted-titmouse.jpg" alt="" width="360" height="531" ></td>
  </tr>

</table>