Special 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:

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:

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:

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:

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