---
# System prepended metadata

title: What I Learned About HTML from a 4-Hour YouTube Video

---

# What I Learned About HTML from a 4-Hour YouTube Video

## Introduction to HTML

First of all, what is HTML?
HTML stands for **Hypertext Markup Language**.

### What is HTML?
HTML is a markup language for creating and linking web pages, and for displaying information on the World Wide Web. It serves as the **building block of the web**, defining the meaning and structure of web content.

- **Hypertext** refers to links that connect web pages to one another, either within a single website or between websites.

---

## Basic HTML Web Structure
```html
<title></title>
</head>
<body>
</body>
```

### The `<head>` Tag
The `<head>` section contains information that is not displayed as content on the web page. It typically includes:

```html
<meta charset="UTF-8">
<meta name="author" content="bigwanluther">
<meta name="description" content="This is my article">
</head>
```

### The `<body>` Tag
The `<body>` section contains the actual content of the web page. This is where different tags are used to display content.

---

## Creating a Table in HTML
I learned how to create tables using specific tags. Here’s a breakdown of the table-related tags:

| Tag        | Description                                  |
|------------|----------------------------------------------|
| `<table>`  | Defines a table                              |
| `<th>`     | Defines a header cell in a table            |
| `<tr>`     | Defines a row in a table                    |
| `<td>`     | Defines a cell in a table                   |
| `<caption>`| Defines a table caption                     |
| `<colgroup>`| Specifies a group of columns for formatting |
| `<col>`    | Specifies properties for each column        |
| `<thead>`  | Groups header content in a table            |
| `<tbody>`  | Groups body content in a table              |
| `<tfoot>`  | Groups footer content in a table            |

---

## Creating Forms in HTML

### How to Create a Simple Form
A form is created using semantic tags like `<form>`, `<label>`, and `<input>`. Below is an example of a simple job application form:

```html
<form>
  <h1>JOB APPLICATION FORM</h1>
  <label>FULL NAME</label>
  <input type="text"><br><br>

  <label>EMAIL</label>
  <input type="email"><br><br>

  <label>DATE OF BIRTH</label>
  <input type="date"><br><br>

  <label>HOBBIES:</label>
  <label>Football</label>
  <input type="checkbox">
  <label>Singing</label>
  <input type="checkbox"><br><br>

  <label>CONTINENT OF RESIDENCE</label>
  <select>
    <option>AFRICA</option>
    <option>NORTH AMERICA</option>
    <option>SOUTH AMERICA</option>
    <option>EUROPE</option>
    <option>ASIA</option>
    <option>AUSTRALIA</option>
  </select><br><br>

  <label>WOULD YOU LIKE TO WORK REMOTELY?</label>
  <label>Yes</label>
  <input type="radio" name="remote" value="yes">
  <label>No</label>
  <input type="radio" name="remote" value="no"><br><br>

  <button type="submit">Submit</button>
  <button type="reset">Clear</button>
</form>
```

### Key Notes on Forms
- Use the `<br>` tag to separate fields since they are inline elements.
- Always use proper attributes for `<input>` to clearly define the type of data.

---

## Adding a Footer
A footer contains small but important information about the web page. It is often structured using an unordered list (`<ul>`) to include:

```html
<footer>
  &copy; 2025 learning-html.com. All rights reserved.
  <ul>
    <li><a href="#about">ABOUT</a></li>
    <li>MISSION AND VISION</li>
    <li>ACHIEVEMENTS</li>
    <li>DONATIONS</li>
  </ul>
</footer>
```

---

## Final Note
The most important takeaway from this video is that **HTML is a forgiving language**. Mistakes may not always break a page, but writing clean and structured code is crucial for creating effective and maintainable websites.

