Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Special Text Markup | HTML Fundamentals
HTML Essentials
course content

Contenido del Curso

HTML Essentials

HTML Essentials

1. Understanding the Web and HTML
2. HTML Fundamentals
3. Images and Media
4. Tables and Forms
5. Advanced HTML

bookSpecial Text Markup

Text formatting tags

HTML provides several text formatting tags that allow you to add emphasis, underline, or strikethrough text as needed.

The <strong> and <em> tags are used to emphasize text. The <strong> tag renders text in bold, indicating strong importance, while the <em> tag renders text in italics, indicating emphasis.

The <u> tag underlines text to provide visual clarity and highlight important information. However, use underlining sparingly to avoid cluttering the text.

The <s> tag strikes through text, indicating deletion or irrelevance. It is commonly used to show that certain text has been removed or is no longer valid.
Example:

html

index

css

index

js

index

copy

In the example above:

  • <strong> and <em> tags provide emphasis to text, with <strong> rendering text in bold and <em> rendering it in italics;
  • The <u> tag underlines text, highlighting it visually;
  • The <s> tag strikes through text, indicating deletion or irrelevance.

Links

Links, also known as hyperlinks, enable users to navigate between web pages, resources, and various forms of communication. In HTML, links are created using the <a> (anchor) tag.

The href attribute within the <a> tag specifies the destination of the link. It can accept various types of URLs, including:

  • Absolute URLs: Specify the complete address of the linked resource, including the protocol (e.g., "https://www.example.com");
  • Telephone URLs: Allows users to initiate phone calls directly from the browser when clicked. Formatted as "tel:phone-number". It's essential to include the country code and remove any special characters or spaces from the phone number (e.g., "tel:+123456789");
  • Email URLs: Allows users to compose emails when clicked. Formatted as "mailto:email-address". It's important to include the complete email address after mailto: (e.g., "mailto:example@example.com").

Example:

html

index

css

index

js

index

copy

In the example above:

  • The <a> tag creates hyperlinks with different destinations;
  • The href attribute specifies various URLs, including absolute URLs, telephone numbers, and email addresses.

Other useful attributes

The <a> tag has several attributes that can be used to specify hyperlink properties. Some common attributes include:

  • target="_blank": Specifies where to open the linked document. "_blank" opens the link in a new window or tab;
  • download: Specifies that the target will be downloaded when the user clicks the hyperlink. This attribute can have a value to specify the filename for saving the resource.

Example:

html

index

css

index

js

index

copy

In this example:

  • The href attribute specifies the URL of the linked resource;
  • The target attribute opens the link in a new window or tab.

Buttons

The <button> tag creates clickable buttons on web pages. It allows users to interact with the webpage by triggering actions such as submitting a form or executing JavaScript code. Although we won't focus on JavaScript in this course, it's important to know that such a possibility exists.

Types of buttons

  • Standard button (<button type="button">): A general-purpose button used for various actions on the webpage, such as triggering JavaScript functions or navigating to another page;
  • Submit button (<button type="submit">): Used inside a form to submit the form data to a server;
  • Reset button (<button type="reset">): Used inside a form to reset the form's fields to their default values.

Example:

html

index

css

index

js

index

copy

In the example above:

  • The first button is a standard button with an onclick attribute that triggers an alert when clicked;
  • The second button is a submit button that submits the form data to the server;
  • The third button is a reset button that resets the form fields to their default values.

Video Tutorial

1. Select the correct statement from the options provided.
2. How are links created?
3. What does the `href` attribute specify in an `<a>` tag?
4. What does the `<button type="submit">` tag do?
Select the correct statement from the options provided.

Select the correct statement from the options provided.

Selecciona la respuesta correcta

How are links created?

How are links created?

Selecciona la respuesta correcta

What does the `href` attribute specify in an `<a>` tag?

What does the href attribute specify in an <a> tag?

Selecciona la respuesta correcta

What does the `<button type="submit">` tag do?

What does the <button type="submit"> tag do?

Selecciona la respuesta correcta

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 2. Capítulo 5
some-alt