This crash course is designed to teach the fundamentals of HTML in a way that’s beginner-friendly, concise, and packed with practical examples. It assumes no prior knowledge and can be read in about 30–40 minutes. The content is structured to cover the most critical concepts needed to start building basic web pages.
Table of Contents
- What is HTML?
- Setting Up Your Environment
- Basic HTML Structure
- Common HTML Elements
- Attributes and Links
- Lists and Tables
- Forms and Inputs
- Semantic HTML
- Best Practices
- Practice Project: Build a Simple Webpage
1. What is HTML?
- HTML (HyperText Markup Language) is the standard language for creating web pages.
- It structures content on the web using elements (tags) like headings, paragraphs, images, and links.
- HTML is not a programming language; it’s a markup language for describing content.
Example:
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>This is a Heading
This is a paragraph.
2. Setting Up Your Environment
To start coding HTML:
- Use a text editor like Visual Studio Code (VS Code) – free for Windows, Mac, and Linux.
- Download it here: https://code.visualstudio.com/Download
- Optional – Install Live Server Extension – Made by Ritwick Dey
- Create a new folder and open it in VS Code
- Create a new file named index.html
3. Basic HTML Structure
Every HTML document follows this structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is my first HTML page!</p>
</body>
</html>- <!DOCTYPE html>: Declares the document as HTML5.
- <html lang=”en”>: Root element, specifies language.
- <head>: Contains metadata (e.g., title, character set).
- <body>: Contains visible content.
4. Common HTML Elements
HTML uses tags to define elements. Tags are written as <tagname> (opening) and </tagname> (closing).
Headings:
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Level 3 Heading</h3>
<h4>Level 4 Heading</h4>
<h5>Level 5 Heading</h5>
<h6>Level 6 is the Smallest Heading</h6>Paragraphs:
<p>This is a paragraph.</p>Images:
<img src="image.jpg" alt="Description of image">- src: Path to the image.
- alt: Text for accessibility if the image fails to load.
Divs:
<div>
<p>Content inside a container.</p>
</div>- <div> groups elements for styling or organization.
5. Attributes and Links
Attributes provide additional information about elements.
- Written inside the opening tag, e.g., attribute=”value”
Links:
<!-- Link to another page -->
<a href="about.html">About Us</a><!-- Open external links in a new tab with the target attribute -->
<a href="https://example.com" target="_blank">Visit Example</a><!-- Link to an email address -->
<a href="mailto:info@example.com">Email Us</a><!-- Link to a phone number -->
<a href="tel:+1234567890">Call Us</a><!-- Link to a section within the same page -->
<a href="#section">Jump to Section</a>
<!-- Remember the section you want to link to will need a matching ID attribute -->
<section id="section">
<h2>Section Title</h2>
<p>Content of the section.</p>
</section>- href: URL destination.
- target=”_blank”: Opens link in a new tab.
- href=”#IDname” : scrolls the page to an html element with the matching id=”IDname” attribute.
ID and Class:
<div id="unique" class="group">Content</div>- id: Unique identifier for one element.
- class: Reusable identifier for multiple elements (used in CSS).
6. Lists and Tables Lists:
Unordered List (bullets):
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>Ordered List (numbers):
<ol>
<li>First</li>
<li>Second</li>
</ol>Tables:
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
</table>- <tr>: Table row.
- <th>: Table header.
- <td>: Table data.
7. Forms and Inputs
Forms collect user input (e.g., text, buttons).
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<input type="email" id="email" name="email" placeholder="Enter email">
<input type="submit" value="Send">
</form>- action: Where form data is sent.
- method: How data is sent (GET or POST).
- input types: text, email, password, submit, etc.
- required: Ensures the field isn’t empty.
8. Semantic HTML
Semantic tags improve accessibility and SEO by giving meaning to content.
<header>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
</nav>
</header>
<main>
<article>
<h2>Blog Post</h2>
<p>Content here...</p>
</article>
<aside>
<p>Sidebar info</p>
</aside>
</main>
<footer>
<p>Contact us at example@email.com</p>
</footer>Common semantic tags: <header>, <nav>, <main>, <article>, <aside>, <footer>.
9. Best Practices
- Validate your HTML: Use tools like W3C Validator.
- Use lowercase tags: <div> not <DIV>.
- Close all tags: <p>Text</p>, not <p>Text.
- Use alt text for images: Improves accessibility.
- Keep it simple: Avoid unnecessary nesting.
- Comment your code:
<!-- This is a comment -->10. Practice Project: Build a Simple Webpage
Create a personal portfolio page. Save as portfolio.html and open in your browser.
Instructions:
- Create a heading: “My Portfolio”.
- Add a navigation menu with links to “Home”, “About”, and “Contact”.
- Include an image (use a placeholder like https://via.placeholder.com/150).
- Write a paragraph about yourself.
- Add an ordered list of your skills.
- Create a contact form with fields for name, email, and a submit button.
- Use semantic tags like <header>, <main>, and <footer>.
Sample Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
</head>
<body>
<header>
<h1>My Portfolio</h1>
<nav>
<a href="#home">Home</a> |
<a href="#about">About</a> |
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<img src="https://via.placeholder.com/150" alt="Profile picture">
<h2 id="about">About Me</h2>
<p>Hi, I’m learning HTML and building my first webpage!</p>
<h3>My Skills</h3>
<ol>
<li>HTML</li>
<li>Problem Solving</li>
<li>Creativity</li>
</ol>
<h3 id="contact">Contact Me</h3>
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="Submit">
</form>
</main>
<footer>
<p>© 2025 My Portfolio</p>
</footer>
</body>
</html>Next Steps:
- Learn CSS to style your pages.
- Explore JavaScript for interactivity.
- Check out resources like MDN Web Docs or freeCodeCamp.
