HTML Introduction | HTML Elements and Attributes - Nesting and Document Structure - Common HTML Tags

Introduction to HTML

HTML, or HyperText Markup Language, is the standard language used to create and design websites and webpages. It provides the basic structure for web content and defines elements such as headings, paragraphs, links, images, tables, and more. HTML is the backbone of most web content, allowing web browsers to interpret and display information on the internet.

Here are some fundamental concepts to understand about HTML:

1. HTML Elements: HTML documents consist of elements represented by tags. Tags are enclosed in angle brackets (< >) and come in pairs: opening tags and closing tags. The content goes between these tags. For example, a paragraph is defined by the `<p>` tag: `<p>This is a paragraph.</p>`.

2. Attributes: HTML elements can have attributes, which provide additional information about an element. Attributes are always included in the opening tag and are written as name/value pairs like `attribute="value"`. For example, the `<img>` tag can have an `src` attribute to specify the image file: `<img src="example.jpg" alt="Example Image">`.

3. Nesting: HTML elements can be nested inside other elements. Proper nesting is essential for creating a well-structured document. For instance, you can have a heading inside a `<div>` element: `<div><h1>Heading Inside a Division</h1></div>`.

4. Document Structure: An HTML document typically includes the following structure:

   ```html

   <!DOCTYPE html>

   <html>

   <head>

       <title>Page Title</title>

   </head>

   <body>

       <h1>This is a Heading</h1>

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

   </body>

   </html>

   ```

   - `<!DOCTYPE html>`: Defines the document type and version.

   - `<html>`: The root element of the HTML document.

   - `<head>`: Contains meta-information about the HTML document, such as the title displayed on the browser tab.

   - `<body>`: Contains the content of the HTML document, such as headings, paragraphs, images, etc.

5. Common HTML Tags:

   - `<h1>`, `<h2>`, `<h3>`, ... `<h6>`: Headings of different levels.

   - `<p>`: Paragraph.

   - `<a href="URL">Link Text</a>`: Hyperlink.

   - `<img src="URL" alt="Description">`: Image.

   - `<ul>`: Unordered list.

   - `<ol>`: Ordered list.

   - `<li>`: List item.

   - `<table>`, `<tr>`, `<th>`, `<td>`: Table and its elements.

   - `<div>`: Division or a section in the document.

   - `<span>`: Inline container for a section of text.

HTML is easy to learn and forms the foundation for web development. It is often used in conjunction with CSS (Cascading Style Sheets) for styling and JavaScript for interactivity, collectively forming the backbone of modern web development.