HTML Tags: A Comprehensive Walkthrough and Tutorial

In this tutorial, we will explore some of the most commonly used HTML tags and their proper usage. Let’s dive in!

<figure>

The <figure> tag is used to encapsulate media such as images or diagrams along with their captions. Here’s an example:

<figure>
  <img src="image.jpg" alt="Description of image">
  <figcaption>Caption goes here</figcaption>
</figure>

<cite>

The <cite> tag is used to reference a citation or a reference to another source. It should contain the title of the work being cited.

<cite>Title of Work</cite>

<blockquote cite=””>, <q cite=””>

These tags are used for quoting blocks of content from another source. The difference between them is that <q> is used for short inline quotes while <blockquote> is used for longer quotes.

<q cite="sourceURL">"Short quote."</q>
<br/>
<blockquote cite="sourceURL">"Longer quote."</blockquote>

<s>, <nobr>, &&&&&&&&&&

These tags are used to modify the appearance of text. <s> is for strikethrough, <nobr> prevents text from breaking into a new line, and <u> underlines text.

<s>Strikethrough text</s>
<br/>
<nobr>Text that won't break into a new line</nobr>
<br/>
<u>Underlined text</u>

<xmp>

The <xmp> tag is used to display preformatted text. This tag preserves both spaces and line breaks.

<xmp style="">"Preformatted Text"</xmp>

<hr style=””>

The <hr /> tag creates a horizontal rule or line that can be styled using CSS.

<hr style="height:2px;border-width:0;color:gray;background-color:gray" />

<dl>, &&&&&&&&&&

The <dl> (description list) tag is used in conjunction with <dt> (description term) and <dd> (description data) to create a list of terms and their descriptions.

  <dl>
    <dt>Term 1</dt>
    <dd>Description 1</dd>
    <dt>Term 2</dt>
    <dd>Description 2</dd>
  </dl>

<nobr>&&&&&&&&&&

The <nobr> tag prevents text from breaking into a new line, while the deprecated <center> tag centers text.

<nobr>"Text that won't break into a new line"</nobr>
<br/>
<center>"Centered text"</center>

We hope this tutorial has been helpful in understanding these HTML tags and their usage. Happy coding!