What is HTML?

HTML Defined

HTML stands for HyperText Markup Language. It is the standard language used to create and design web pages. HTML structures content on the web by using a system of elements and tags, making it possible to display text, images, videos, links, and other media in a browser.

Key Features of HTML

  • HyperText: Refers to the ability to link text and resources across different pages or websites using hyperlinks.
  • Markup Language: A system for annotating documents, defining the structure and presentation of web content.
  • Platform-Independent: Works on any device with a web browser.
  • Foundation of the Web: It is the backbone of web development, enabling developers to create structured, readable content.

Basic Structure of an HTML Document

An HTML document is made up of elements enclosed in tags. Here is a basic example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Introduction to HTML</title>
</head>
<body>
    <h1>Welcome to HTML</h1>
    <p>This is a simple HTML document.</p>
</body>
</html>

Explanation:

  1. <!DOCTYPE html>: Declares the document type and version of HTML.
  2. <html>: The root element that contains all the other elements.
  3. <head>: Contains metadata like the title, character encoding, and links to styles or scripts.
  4. <body>: Contains the visible content of the page, such as headings, paragraphs, and images.

What Can HTML Do?

Text Formatting: Display and style headings, paragraphs, and lists.

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

Images and Media: Embed images, videos, and audio.

<img src="image.jpg" alt="A description of the image">

Links: Create hyperlinks to navigate to other pages.

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

Tables: Organize data in rows and columns.

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
    </tr>
</table>

Forms: Collect user input.

<form action="/submit">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="Submit">
</form>

Best Practices When Writing HTML

Use Semantic Tags

Use Semantic Tags: Use tags that convey meaning (e.g., <header>, <footer>, <main>).

 
<header>
    <h1>Website Header</h1>
</header>

Close All Tags: Ensure every opening tag has a corresponding closing tag.

<p>This is a paragraph.</p>

Indentation: Properly indent your code for readability.

Alt Text for Images: Provide meaningful descriptions for accessibility.

<img src="image.jpg" alt="A scenic view of the mountains">

Validate Your Code: Use tools like the W3C Validator to check for errors.