Basic tags in HTML

Introduction

Welcome to our beginner-friendly guide to mastering basic HTML tags! Whether you're just starting your journey into web development or looking to refresh your knowledge, this comprehensive tutorial will walk you through essential HTML tags with clear examples.

  1. HTML Document Structure: Let's begin with the skeleton of an HTML document. Below is a simple HTML structure:

<!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to My Website!</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

Explanation:

  • <!DOCTYPE html>: Declares the document type as HTML5.

  • <html>: Represents the root element of the HTML document.

  • <head>: Contains meta-information about the document.

  • <title>: Sets the title of the web page.

  • <body>: Contains the visible content of the web page.

  1. Text Formatting Tags: HTML offers tags to format text in various ways. Let's see some examples:

<h1>This is a Heading</h1>
<p><strong>This text is bold.</strong></p>
<p><em>This text is italicized.</em></p>
<p><u>This text is underlined.</u></p>

Explanation:

  • <h1>: Defines a top-level heading.

  • <strong>: Makes text bold.

  • <em>: Emphasizes text by italicizing it.

  • <u>: Underlines text.

  1. Link Tags: Hyperlinks are essential for navigation. Here's how to create them:

<a href="https://www.example.com">Visit Example Website</a>

Explanation:

  • <a>: Defines a hyperlink.

  • href: Specifies the URL the link points to.

  1. Image Tags: Images enhance the visual appeal of a web page. Here's how to add an image:

<img src="example.jpg" alt="Example Image">

Explanation:

  • <img>: Inserts an image.

  • src: Specifies the path to the image file.

  • alt: Provides alternative text for accessibility.

  1. List Tags: Lists organize content in a structured manner. Let's look at examples of both unordered and ordered lists:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

Explanation:

  • <ul>: Defines an unordered list.

  • <ol>: Defines an ordered list.

  • <li>: Represents a list item.

Conclusion: Congratulations! You've now mastered the basic HTML tags. With these foundational elements, you're well on your way to creating engaging web pages. As you continue your learning journey, explore more HTML tags and their functionalities to unlock endless possibilities in web development. Keep practicing, and happy coding!

PreviousWhat is HTML?NextInline vs. Block Elements