HTML Content and text tags

3.1. HTML Content tags

HTML content tags play a crucial role in organizing and presenting web content.

Contenidos del artículo

Element	Description
`<p>`	Paragraph.It is used to define a paragraph.
`<hr>`	Horizontal Rule. It is used to indicate a visual separation between sections of content.
`<pre>`	Preformatted. It is used to enclose preformatted text. It preserves both spaces and line breaks exactly as they are written in the HTML code. This is useful for displaying code snippets, ASCII art, or any other content that requires a fixed-width font or specific formatting.
`<blockquote>`	It is used to indicate a section of quoted content from another source. Use <q> for short quotations.
`<ol>`	Ordered list. It is used to create an ordered (numbered) list of items.
`<ul>`	Unordered list. It is used to create an unordered (bulleted) list of items.
`<li>`	It is used to define an individual item within a list. It is typically used within <ul> (unordered) or <ol> (ordered) lists to represent each item in the list.
`<dl>`	Definition list. It is used to create a definition list, which consists of a series of terms and their associated definitions.
`<dt>`	Definition term. It represents the term being defined.
`<dd>`	Definition description. It contains the definition of the term.
`<figure>`	It is used to encapsulate media content, such as images.
`<figcaption>`	It represents a subtitle or caption associated with the content of its parent.
`<div>`	It is a generic container that is used to group and style content without any specific meaning.

Table 3.1. HTML Content tags

Example

<!-- Elemento <p> -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia beatae aliquam non natus aut id sint ea? Natus tempore hic reprehenderit temporibus minima nisi, quia, magnam omnis, officiis molestiae earum.</p>

<!-- Elemento <hr> -->
<hr>

<!-- Elemento <pre> -->
<pre>Contenido preformateado       Conserva los espacios,
            los saltos de línea y los tabuladores del texto original.
        </pre>

<!-- Elemento <blockquote> -->
<blockquote>Con blockquote representamos un contenido citado desde otra fuente.</blockquote>

<!-- Elemento <ol> -->
<ol>
  <li>Lista ordenada</li>
  <li>Lista ordenada</li>
  <li>Lista ordenada</li>
</ol>

<!-- Elemento <ul> -->
<ul>
  <li>Lista sin orden</li>
  <li>Lista sin orden</li>
  <li>Lista sin orden</li>
</ul>

<!-- Elementos <dl> <dt> <dd>-->
<dl>
  <dt>Término 1</dt>
  <dd>Definición del término 1.</dd>

  <dt>Término 2</dt>
  <dd>Definición del término 2.</dd>

  <dt>Término 3</dt>
  <dd>Definición del término 3.</dd>
</dl>

<!-- Elementos <figure> y <figurecaption>-->
<figure>
  <img src="https://www.eniun.com/wp-content/uploads/eniun-icon-user-experience.svg"
       alt="Usabilidad">
  <figcaption>Figura 1</figcaption>
</figure>

<!-- Elemento <div>-->
<div>Contenedor tipo div</div>

CodePen example

3.1.1. Most commonly used attributes in tags

The most commonly used attributes are id and class.

id: is used to uniquely identify an element. Since it’s a unique identifier attribute, we should not add two blocks with the same id value in the same HTML document.

<div id="identifier">Container</div>

class: is used to assign one or multiple classes to an HTML element. Classes are very useful for applying CSS styles. The same class value can be assigned to multiple elements

<div class="class1 class2">Container</div>

3.1.2. Attributes for lists

The attributes in HTML allow you to customize both ordered and unordered lists. Here’s a description of some of the common attributes for both types of lists:

«type» attribute (for ordered lists):

«1»: Decimal numbering (1, 2, 3, …).
«A»: Uppercase letters (A, B, C, …).
«a»: Lowercase letters (a, b, c, …).
«I»: Uppercase Roman numerals (I, II, III, …).
«i»: Lowercase Roman numerals (i, ii, iii, …).

«type» attribute (for unordered lists):

«disc»: Solid dots (●, ●, ●, …).
«circle»: Circles (○, ○, ○, …).
«square»: Squares (■, ■, ■, …).

«start» attribute (only for ordered lists): Sets the initial numbering value of the list.

«reversed» attribute (only for ordered lists): Reverses the numbering order of the list.

Here’s an example that demonstrates the use of these attributes:

<h3>Ordered list 1:</h3>
<ol type="A" start="3">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

<h3>Ordered list 2:</h3>
<ol type="1" reversed>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

<h3>Unordered lists:</h3>
<ul type="square">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

In this example, the ordered list 1 will start with the letter «C» and the ordered list 2 will reverse the numerical order of the elements. The unordered list will use squares as bullet points.

3.2. HTML Text tags

Text tags give meaning to the texts they contain.

Element	Description
`<a>`	Represents a hyperlink, allowing you to create clickable links to other web pages, resources, or locations within the same page.
`<em>`	Emphasize. It is used to emphasize text, typically displayed in italics. It gives importance to the enclosed text.
`<strong>`	It is used to indicate strong importance or emphasis. It typically renders the enclosed text in bold.
`<small>`	It is used to denote less significant text within a document. It is commonly used for legal disclaimers, copyright notices, or auxiliary information that is not essential for understanding the main content.
`<s>`	Strikethrough. It is used to indicate content that has been deleted or marked as obsolete, typically displayed with a strikethrough style.
`<cite>`	It is used to indicate the title or source of a work, such as a book, article, or publication.
`<q>`	Quotation marks. Defines a short quotation. Browsers normally insert quotation marks around the quotation. Use <blockquote> for long quotations.
`<dfn>`	It specifies a term that is going to be defined within the content.
`<abbr>`	It defines an abbreviation or an acronym, like «HTML», «Mr.», «Dr.». Use the global title attribute to show a tooltip with the definition when you mouse over the element.
`<time>`	It defines a specific time.
`<code>`	It is used to represent programming code or a code snippet within the document.
`<sub><sup>`	Subscript and superscript text.
`<i>`	Italic text.
`<b>`	Bold text.
`<u>`	Underline text
`<mark>`	Marked or highlighted text
`<span>`	It specifies inline text.
`<br>`	It inserts a single line break.
`<wbr>`	Word Break Opportunity. It specifies where in a text it would be right to add a line-break.

Table 3.2. HTML text tags

Example

<!-- Elemento <a>-->
<a href="https://www.eniun.com">Esto es un hiperenlace</a>

<!-- Elemento <em>-->
<em>Esto es un texto enfatizado.</em>

<!-- Elemento <strong>-->
<strong>Esto es un texto importante.</strong>

<!-- Elemento <small>-->
<small>Nota de derechos</small>

<!-- Elemento <s>-->
<s>Este texto no es exacto</s>

<!-- Elemento <cite>-->
<cite>Este es el título de una obra</cite>

<!-- Elemento <q>-->
<q>Representa una cita textual entre comillas.</q>

<!-- Elemento <dfn>-->
<p>El <dfn>HTML</dfn> es un lenguaje de marcado.</p>

<!-- Elemento <abbr>-->
<p>Pasa el puntero por encima de la siguiente etiqueta abbr: <abbr title="Hypertext Markup Language">HTML</abbr></p>

<!-- Elemento <time>-->
<time>15s</time>

<!-- Elemento <code>-->
<code>h1{color:red;}</code>  

<!-- Elemento <var>-->
<p>El bucle no se detiene hasta que <var>centinela</var> sea igual a 0.</p> 

<!-- Elemento <samp>-->
<p>Al presionar e botón aparecerá una ventana con el mensaje: <samp>Bienvenido</samp>
</p>

<!-- Elemento <kbd>-->
<p> Si está conforme escriba presione <kbd>sí</kbd>. Si no, pulse <kbd>no</kbd>.
</p>

<!-- Elementos <sub> <sup>-->
<p>La fórmula química de agua es H<sub>2</sub>O</p>
<p>Trade Mark <sup>TM</sup></p>

<!-- Elemento <i>-->
<i>Texto en italica</i>

<!-- Elemento <b>-->
<b>Texto en negrita</b>

<!-- Elemento <u>-->
<u>Texto subrayado</u>

<!-- Elemento <mark>-->
<p>El siguiente texto tiene mucha importancia y quiero resaltarlo: <mark>HTML5</mark></p>

<!-- Elemento <span>-->
<span>Texto </span><span>en </span><span>línea.</span>

<!-- Elemento <br>-->
<br>

<!-- Elemento <wbr>-->       <p>https://www.eniun.com<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages</p>

CodePen example

3.2.1. Hyperlinks: values of the href Attribute

In HTML, the href attribute is used in the anchor <a> tag to create clickable links. It accepts various values, each serving a different purpose. Two common cases are telephone links and email links. These links enable users to click on them to make calls or open their default email clients with the specified email address.

To create a telephone link, we use the value «tel» followed by the phone number. For example, <a href="tel:+1234567890">Call</a>.

To create an email link, we use the value «mailto» followed by the email address. For example, <a href="mailto:email@example.com">Send Email</a>.

Example

<!-- Enviar un correo con mailto-->
<a href="mailto:info@eniun.com">Enviar correo a Eniun</a><br>
<!-- Llamar por teléfono con tel-->
<a href="tel:+34666666666">Llamar por teléfono a 666 666 666</a>

CodePen example

dark

3.2.2. Hyperlinks: target attribute

The target attribute specifies where to open the linked document.

Value	Description
_blank	Opens the linked URL/document in a new window.
_self	Opens the linked URL/document in the same frame as it was clicked (this is default).

Table 3.3. Target attribute

Example

<!-- Abrir enlace en una página aparte -->
<a href="https://www.eniun.com" target="_blank">Enlace 1</a>
 
<!-- Abrir enlace en la misma página -->
<a href="https://www.eniun.com" target="_self">Enlace 2</a>

CodePen example

dark

3.2.3. Hyperlink: download attribute

The download attribute in HTML is used to specify that a hyperlink should be downloaded when clicked instead of navigating to it. It allows you to provide a suggested filename for the downloaded file. Here’s how the download attribute works:

<a href="path/to/file.pdf" download="myfile.pdf">Download PDF</a>

In this example, when the user clicks on the link «Download PDF,» the file specified in the «href» attribute (path/to/file.pdf) will be downloaded instead of opening in the browser. The «download» attribute specifies the suggested filename for the downloaded file (myfile.pdf).

3.3. Special Characters in HTML

HTML uses special character entities to display reserved characters that have special meanings in HTML. These characters are often used for formatting or to display symbols that cannot be directly represented in HTML.

The ASCII representation of HTML symbols can be done in three different ways: using entities, decimal codes, and hexadecimal codes. Here’s an explanation of the differences between them:

HTML Entities: HTML entities are character sequences that represent special symbols in HTML. They start with an ampersand (&), followed by a name or number, and end with a semicolon (;). HTML entities are easy to read and understand, making them convenient for use in HTML code.
Decimal Codes: Decimal codes are numerical values that represent symbols in the ASCII table. They are written in the form «&#x;», where «x» is the decimal number corresponding to the symbol. Decimal codes are useful when a specific HTML entity cannot be used or when a precise numerical representation of the symbol is needed.
Hexadecimal Codes: Hexadecimal codes are numerical values in base 16 that represent symbols in the ASCII table. Hexadecimal codes are similar to decimal codes but use a base 16 representation instead of base 10.

In summary, HTML entities are more readable and convenient to use in HTML code, while decimal and hexadecimal codes provide a precise numerical representation of symbols. The choice between them depends on the context and specific development needs.

Here are some commonly used special characters in HTML and their corresponding character entities and code:

Special character	Code	Character entity
&	&	&
<	<	<
“	"	"
>	>	>
©	©	©
÷	÷	÷
€	€	€
←	&#8592	←

Table 3.4. Special characters

You can find more characters here: ascii.cl/es/codigos-html.htm and more symbols here: webusable.com/CharsExtendedTable.htm

CodePen example

Different ways to represent a special character or symbol:

3.4. Exercise

Create a navigation menu with links to Home, About, Services and Contact.

To create a navigation menu in HTML, a commonly used approach is to use an unordered list (<ul>) along with list items (<li>) for each menu item. Links (<a>) are added within the list items to link to relevant pages or sections. Here’s a basic example of how to create a horizontal navigation menu:

<!DOCTYPE html>
<html>
<head>
    <title>Navigation Menu</title>
</head>
<body>
  <nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>
</html>

In this example:

<ul> creates an unordered list containing list items.
<li> creates list items for each menu item.
<a> creates links within the list items and uses the href attribute to specify the URL to which each link will navigate. In this case, we’ve used «#» as a placeholder since no actual URLs are provided.

You can style your navigation menu using CSS to control the appearance and layout.

Exercise

Test