This crash course introduces the fundamentals of HTML (HyperText Markup Language) for beginners. Designed to be concise and practical, it covers the essentials of HTML in ~30–40 minutes, with no prior knowledge required. By the end, you'll understand how to structure web pages and be ready to explore CSS and JavaScript.
Note: This guide assumes no coding experience. If you’re ready to build your first web page, follow along and try the examples in a code editor like VS Code.
- What is HTML?
- Setting Up Your Environment
- Basic HTML Structure
- Common HTML Elements
- Attributes in HTML
- Semantic HTML
- Forms and Input Elements
- Best Practices
- What's Next?
- Example Project
- Contributing
- License
- Acknowledgments
HTML is the backbone of every web page, defining its structure and content. It uses tags to organize elements like headings, paragraphs, images, and links. Think of HTML as the skeleton of a website, with CSS (styling) and JavaScript (interactivity) adding the skin and muscles.
- Key Facts:
- HTML stands for HyperText Markup Language.
- It’s not a programming language but a markup language.
- Current version: HTML5, widely supported by modern browsers.
To start coding HTML:
- Install a Code Editor: Use VS Code or alternatives like Sublime Text.
- Create a Project Folder: Save your files with a
.htmlextension (e.g.,index.html). - Open in a Browser: Drag your
.htmlfile into a browser or use VS Code’s Live Server extension.
Pro Tip: Use ! + Tab in VS Code to generate a basic HTML template.
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 Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph.</p>
</body>
</html><!DOCTYPE html>: Declares the document as HTML5.<html lang="en">: Root element, specifies language.<head>: Contains metadata (e.g., charset, title).<body>: Holds visible content.
HTML uses tags to define elements. Here are the most common:
<h1>Main Heading</h1>
<h2>Subheading</h2><p>This is a paragraph of text.</p><!-- 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><img src="image.jpg" alt="Description of image" />- Ordered (
<ol>): Numbered list. - Unordered (
<ul>): Bulleted list.
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
<ul>
<li>Item A</li>
<li>Item B</li>
</ul>Attributes provide additional information to tags, written as name="value". Common attributes:
id: Unique identifier for an element.class: Groups elements for styling or scripting.src: Specifies the source for images or scripts.href: Defines the URL for links.
<img src="logo.png" alt="Company Logo" class="logo" />Semantic tags improve accessibility and SEO by clearly defining content roles. Use these instead of generic <div> tags:
<header>: Page or section header.<nav>: Navigation menu.<main>: Primary content.<article>: Self-contained content.<footer>: Page or section footer.
Example:
<header>
<h1>My Blog</h1>
</header>
<main>
<article>
<h2>Post Title</h2>
<p>Post content...</p>
</article>
</main>
<footer>
<p>© 2025 My Blog</p>
</footer>Forms collect user input using the <form> tag. Common input types include text, email, password, and buttons.
Example:
<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 />
<button type="submit">Submit</button>
</form>action: URL where form data is sent.method: GET or POST for data submission.required: Ensures the field isn’t empty.
- Use Semantic Tags: Improve accessibility and SEO.
- Validate Your HTML: Use tools like W3C Validator.
- Test Responsiveness: Ensure your page works on mobile and desktop.
- Optimize Images: Use compressed images for faster loading.
- Keep Code Clean: Indent properly and comment complex sections.
<!-- This is a comment -->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 , , and .
<!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>Now that you know HTML basics:
- Learn CSS: Style your pages with colors, layouts, and animations. Check out Dev Path’s CSS Crash Course.
- Explore JavaScript: Add interactivity. See Dev Path’s JavaScript Crash Course.
- Build Projects: Create a portfolio website or a simple blog to practice.
This repository contains a sample project to practice the concepts covered in this crash course. It includes:
- A simple HTML page with semantic structure.
- Examples of headings, paragraphs, links, images, lists, and a form.
- A basic layout using semantic tags like
<header>,<main>, and<footer>.
- Clone this repository:
git clone https://github.com/TheDevPath/HTML-Crash-Course.git- Open the project folder in your code editor.
- Open
index.htmlin your browser to view the example page. - Challenge yourself to modify the HTML and add new elements. Try adding the about and contact sections, and link the navigation or create a new page for your portfolio.
your-repo/
├── index.html # Main HTML file
├── images/ # Folder for images
└── README.md # This file
Try It Out
- Add a new
<section>with a heading and paragraph. - Create a
<nav>with links to other pages. - Build a form to collect user feedback.
Feel free to fork this repository and submit pull requests with improvements or additional examples. For issues or suggestions, open an issue on the GitHub repository.
This project is licensed under the MIT License. See the LICENSE file for details.
This crash course is based on the Dev Path HTML Crash Course. Thanks to the Dev Path team for creating accessible learning resources for aspiring developers.