# 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.