# HTML (HyperText Markup Language)

HTML is the standard markup language for creating Web pages. It describes the structure of a Web page and consists of a series of elements which tell the browser how to display the content.

## 1. Introduction

*   **HTML** stands for **H**yper **T**ext **M**arkup **L**anguage.
*   **HyperText**: The method by which you move around on the web — by clicking on special text called hyperlinks which bring you to the next page.
*   **Markup**: HTML tags mark the text inside them as a certain type of string (like a bold string, or a header string).
*   **Language**: It is a language, as it has code-words and syntax like any other language.

## 2. The Building Blocks: Elements

An HTML element usually consists of a **start tag**, **content**, and an **end tag**.

```html
<tagname>Content goes here...</tagname>
```

*   **Start tag**: `<p>`
*   **Content**: `Hello World`
*   **End tag**: `</p>`
*   **Element**: `<p>Hello World</p>`

Some elements are **void elements** (or empty elements) and do not have an end tag, such as `<br>` (line break) or `<img>` (image).

## 3. Attributes

Attributes provide additional information about HTML elements.
*   All HTML elements can have attributes.
*   Attributes are always specified in the **start tag**.
*   Attributes usually come in name/value pairs like: `name="value"`.

**Example:**
The `<a>` tag defines a hyperlink. The `href` attribute specifies the URL of the page the link goes to.

```html
<a href="https://www.google.com">Visit Google</a>
```

## 4. The DOM (Document Object Model)

When a web page is loaded, the browser creates a **D**ocument **O**bject **M**odel of the page. The HTML DOM is constructed as a tree of Objects.

```
 Document
    └── html
         ├── head
         │    └── title
         └── body
              ├── h1
              └── a (href)
```

This structure allows JavaScript to access and manipulate all the elements of an HTML document.

## 5. Semantic HTML

Semantic HTML means using HTML elements to reinforce the meaning of the information in web pages and web applications rather than merely to define its presentation or look.

*   **Non-semantic elements**: `<div>` and `<span>` - Tells nothing about its content.
*   **Semantic elements**: `<form>`, `<table>`, and `<article>` - Clearly defines its content.

Using semantic tags is important for:
*   **Accessibility**: Screen readers can use the tags to navigate the page.
*   **SEO**: Search engines can better understand the content structure.
*   **Readability**: It makes code easier to read and maintain for developers.

## 6. Evolution to HTML5

HTML has evolved significantly since its inception in the early 90s.
*   **HTML 4.01 (1999):** A very successful version, but lacked support for modern web application needs (video, audio, local storage).
*   **XHTML (2000):** A stricter, XML-based version of HTML. It was unforgiving of syntax errors.
*   **HTML5 (2014):** Designed to replace both HTML 4, XHTML, and the DOM Level 2 HTML. It was built to handle rich media and web applications natively.

HTML5 is not just a markup language; it's a collection of standards and APIs that power the modern web.

For a detailed breakdown of HTML5 features, semantic elements, and new APIs, proceed to the HTML5 section:

[[programming/html/html5/html5]]