HTML Essentials Study Guide

1. HTML Structure & Document Elements

<html> – Defines the HTML document.

<head> – Contains metadata (title, styles, scripts, etc.).

<title> – Sets the title of the webpage (shown on the browser tab).

<body> – Contains the main content displayed on the webpage.

🔹 Study Tip: Memorize these foundational tags since every HTML document starts with them.

2. Text Formatting Tags

<h1> to <h6> – Define headings, with <h1> being the largest.

<p> – Defines a paragraph of text.

<br> – Inserts a line break (self-closing tag).

<hr> – Inserts a horizontal line for section separation.

🔹 Practice: Create an HTML file and test different heading sizes to see their hierarchy.

3. Links & Navigation

<a href="URL"> – Creates a hyperlink to another webpage.

<nav> – Defines a navigation section (commonly used for menus).

🔹 Exercise: Build a simple webpage with a navigation menu using <a> links.

4. Lists (Ordered & Unordered)

<ul> – Unordered list (bulleted).

<ol> – Ordered list (numbered).

<li> – List item (used inside <ul> or <ol>).

🔹 Activity: Create a grocery list using both ordered and unordered lists.

5. Tables (Displaying Data)

<table> – Creates a table.

<tr> – Defines a row inside a table.

<td> – Defines a data cell inside a row.

<th> – Defines a header cell inside a row.

🔹 Challenge: Build a table with three columns (e.g., Name, Age, City).

6. Forms & User Input

<form> – Creates a form for user input.

<input> – Defines an input field (text, password, checkbox, etc.).

<button> – Creates a clickable button.

<label> – Associates text with an input field.

🔹 Practice: Design a login form with username and password fields.

7. Containers & Layout Control

<div> – Block-level container for grouping content.

<span> – Inline container for styling specific text.

🔹 Try it out: Use <div> to create a basic webpage layout with sections.

8. Multimedia & Graphics

<img src="URL" alt="description"> – Embeds an image.

<video> – Embeds a video.

<audio> – Embeds an audio file.

🔹 Hands-on: Insert an image with an "alt" text for accessibility.

9. Meta Information & Scripts

<meta> – Provides metadata (e.g., character encoding, viewport settings).

<script> – Embeds or links JavaScript code.

🔹 Explore: Add a <meta> tag for mobile-friendly responsiveness.

Study Tips & Exercises