DEV Community

Cover image for Day 2: Text Formatting and Links in HTML
Dipak Ahirav
Dipak Ahirav

Posted on • Updated on

Day 2: Text Formatting and Links in HTML

Welcome back to Day 2 of your journey to mastering HTML and CSS! Today, we will dive deeper into HTML by exploring text formatting and links. By the end of this post, you'll be able to format text and create links to other web pages.

Text Formatting in HTML

HTML provides various tags to format text, making it more readable and visually appealing. Here are some essential text formatting tags:

  1. Headings: Headings are used to define the titles and subtitles in your content. HTML offers six levels of headings, from <h1> to <h6>, with <h1> being the highest (or most important) level and <h6> the lowest.
   <h1>This is an H1 heading</h1>
   <h2>This is an H2 heading</h2>
   <h3>This is an H3 heading</h3>
   <h4>This is an H4 heading</h4>
   <h5>This is an H5 heading</h5>
   <h6>This is an H6 heading</h6>
Enter fullscreen mode Exit fullscreen mode

2.Paragraphs: The <p> tag defines a paragraph.

   <p>This is a paragraph of text.</p>
Enter fullscreen mode Exit fullscreen mode

3.Bold and Italic Text: Use the <strong> tag for bold text and the <em> tag for italic text.

   <p>This is a <strong>bold</strong> text.</p>
   <p>This is an <em>italic</em> text.</p>
Enter fullscreen mode Exit fullscreen mode

4.Line Breaks: The <br> tag inserts a line break.

   <p>This is the first line.<br>This is the second line.</p>
Enter fullscreen mode Exit fullscreen mode

5.Horizontal Rule: The <hr> tag inserts a horizontal line, which can be used to separate content.

   <p>This is some text.</p>
   <hr>
   <p>This is more text.</p>
Enter fullscreen mode Exit fullscreen mode

Creating Links in HTML

Links are fundamental in HTML as they allow you to navigate from one page to another. The <a> (anchor) tag is used to create hyperlinks.

  1. Basic Link: The href attribute specifies the URL of the page the link goes to.
   <a href="https://www.example.com">Visit Example</a>
Enter fullscreen mode Exit fullscreen mode

2.Open Link in New Tab: Use the target="_blank" attribute to open the link in a new tab.

   <a href="https://www.example.com" target="_blank">Visit Example in a new tab</a>
Enter fullscreen mode Exit fullscreen mode

3.Link to an Email Address: Use the mailto: scheme in the href attribute.

   <a href="mailto:your.email@example.com">Send Email</a>
Enter fullscreen mode Exit fullscreen mode

4.Link to a Section on the Same Page: Use the id attribute to create a bookmark and link to it.

   <h2 id="section1">Section 1</h2>
   <a href="#section1">Go to Section 1</a>
Enter fullscreen mode Exit fullscreen mode

Creating Your HTML Document with Text Formatting and Links

Let's create an HTML document incorporating the tags we've learned today:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Formatting and Links</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a <strong>sample</strong> paragraph with <em>italic</em> and <strong>bold</strong> text.</p>
    <p>Here is a link to <a href="https://www.example.com" target="_blank">Example</a>.</p>
    <p>Send me an <a href="mailto:your.email@example.com">email</a>.</p>
    <p>Go to <a href="#section1">Section 1</a>.</p>
    <hr>
    <h2 id="section1">Section 1</h2>
    <p>This is the first section of the page.</p>
    <p>This is the end of the document.</p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Summary

In this blog post, we explored various text formatting tags and learned how to create links in HTML. Practice using these tags to format your content and create links to enhance navigation.

Series Index

Part Title Link
1 Day 1: Getting Started with HTML Read Part 1
2 Day 2: Text Formatting and Links in HTML Read Part 2
3 Day 3: Lists and Images in HTML Read Part 3
4 Day 4: Creating Tables in HTML Read Part 4
5 Day 5: Creating Forms in HTML Read Part 5
6 Day 6: Introduction to Semantic HTML Read Part 6
7 Day 7: Introduction to CSS Read Part 7

Stay tuned for Day 3, where we will cover lists and images, adding more structure and visual appeal to your web pages. Happy coding!


Follow me for more tutorials and tips on web development. Feel free to leave comments or questions below!

Follow and Subscribe:

Top comments (3)

Collapse
 
dipakahirav profile image
Dipak Ahirav

Your welcome @obedisolomon

Collapse
 
dipakahirav profile image
Dipak Ahirav

Next part -> Day-3