Learn Text Formatting and Creating Links in HTML

Introduction:

Welcome to Day 2 of our "Learn HTML in 7 Days" series! In this article, we will dive deep into text formatting and creating links in HTML. These are essential skills for enhancing the visual appeal, readability, and interactivity of your web pages. Let's explore the power of text formatting and learn how to create meaningful links!

Formatting Text:

Bold and Italic: We'll start by examining the <strong> and <em> tags to create bold and italic text, respectively. To highlight something as important we can use these tags. We also can use <b> and <i> tag for the same purpose.

 <!-- BOLD TEXT -->
 <strong>This text is bold.</strong>
 <!-- OR -->
 <b>This text is also bold.</b>

 <!-- ITALIC TEXT -->
 <em>This text is italicized.</em>
 <!-- OR -->
 <i>This text is also italicized.</i>

Underline and Strikethrough: Discover how to add emphasis to your text by using the <u> and <del> tags to underline and strikethrough text. We can use these tags to mark a text as important or to grab the attention of the user.
```
 
 <u>This text is underlined.</u>
 
 <s>This text has a strikethrough.</s>
```
Subscript and Superscript: We can create subscript and superscript text using the <sub> and <sup> tags. These tags are useful for mathematical equations, chemical formulas, and footnotes.
```
 
 H<sub>2</sub>O
 
 x<sup>2</sup>
```
Text Color: We'll discuss how to use CSS inline styles or external stylesheets to set the colour and size of your text in our later blogs but for now as an example.
```
 <span style="color: red;">This text is red.</span>
```

Creating Meaningful Links:

Linking to Other Web Pages: To link anything in a webpage we use <a> tag, one of the most fundamental HTML tags for creating hyperlinks. Let's explore how to link to other web pages by specifying the destination URL and adding descriptive anchor text.
```
 <a href="https://www.example.com">Visit Example Website</a>
```
Linking to Specific Sections: Discover how to create internal links within a web page, allowing users to jump to specific sections of the page with ease. This technique is especially useful for long articles or documents. Below is an example where clicking on Go to Section 1 will scroll the page to <h2 id="section1">Section 1</h2>
```
 <a href="#section1">Go to Section 1</a>
 ...
 <h2 id="section1">Section 1</h2>
```
Opening Links in a New Tab: Let's see how to specify the target attribute to open links in a new browser tab or window. This helps users maintain their current page while exploring linked content. In this example, when the user clicks on the link, it will open the `https://www.example.com` URL in a new tab or window, depending on the user's browser settings.
```
 <a href="https://www.example.com" target="_blank">Visit Example Website</a>
```
Adding Images as Links: Explore the combination of the <a> tag and the <img> tag to create image links. This technique is commonly used for creating interactive buttons or linking images to related content.
```
 <a href="https://www.example.com">
   <img src="image.jpg" alt="Image Description">
 </a>
```

Best Practices and Accessibility Considerations:

Link Accessibility: It refers to making links inclusive and usable for all users, including those with disabilities. It involves providing descriptive text alternatives, using clear and meaningful link text, ensuring keyboard accessibility, maintaining colour contrast, indicating focus, and organizing links in a logical order. These practices ensure that everyone, regardless of their abilities, can navigate and understand the purpose of links on a webpage.
SEO Benefits of Linking: Linking plays a crucial role in search engine optimization (SEO) by providing numerous benefits. When a website receives inbound links from reputable sources, search engines perceive it as a sign of credibility and authority, resulting in higher rankings in search results. Internal linking, which connects different pages within a website, helps search engines understand the structure and hierarchy of the site's content. Additionally, outbound links to high-quality and relevant websites can enhance the user experience and establish the website's relevance within a particular industry or topic. Overall, strategic linking practices can improve a website's visibility, organic traffic, and overall SEO performance.

Conclusion:

Congratulations on mastering text formatting and creating meaningful links in HTML! These skills are crucial for creating visually appealing and interactive web pages. By understanding the different formatting options, techniques for linking, and additional text formatting options, you can enhance the usability, accessibility, and SEO of your website.

Remember to experiment with different formatting styles, colours, and sizes to find the perfect balance for your content. Additionally, create descriptive and well-structured links that provide value to your users and improve SEO.

Stay tuned for Day 3 of our "Mastering HTML Essentials" series, where we'll explore another exciting topic. Feel free to leave your comments and questions below. Let's continue our HTML learning journey together!

If you want to learn more about it please refer here.

You can also find me on

Day-2: Mastering Text Formatting and Creating Links