HTML Full Course for Beginners: Complete
All-in-One Notes
Based on the YouTube tutorial by Dave Gray (4 hours+)
Link: HTML Full Course for Beginners (Dave Gray)
Table of Contents
1. Introduction & Setup
2. Chapter 1: Start Here – What is HTML?
3. Chapter 2: HTML File Structure & Head Element
4. Chapter 3: Text Basics
5. Chapter 4: Lists in HTML
6. Chapter 5: Links and Navigation
7. Chapter 6: Images
8. Chapter 7: Semantic HTML5 Elements
9. Chapter 8: Tables
10. Chapter 9: Forms and User Input
11. Chapter 10: HTML Project – Little Taco Shop
12. Additional Resources, Tools & Best Practices
13. References
Introduction & Setup
HTML (HyperText Markup Language) is the standard markup for web pages. All websites
you use rely on HTML to define their structure and content.[1]
This guide covers the entire "HTML Full Course for Beginners" video, including every
chapter, concept, example, and many practical details.
Essential Tools
• Google Chrome: Suggested browser for viewing pages.
• Visual Studio Code (VS Code): Free code editor.
• Extensions for VS Code:
– Live Server (local dev server, auto reload)
– Prettier (code formatting)
– VS Code Icons & GitHub Theme (appearance)
• W3C HTML Validator: For checking code quality and standards compliance.
Chapter 1: Start Here – What is HTML?
Definition: HTML stands for HyperText Markup Language.
Hypertext is the system of linking documents.
Markup means the use of elements (tags) to instruct browsers.
Getting Started
1. Create a main project folder, then a specific lesson folder inside.
2. Always use lowercase file names, hyphens instead of spaces, .html extension.
3. Open a new file ([Link]).
4. Use VS Code with Live Server for instant preview.
Chapter 2: HTML File Structure & Head Element
Element Purpose/Explanation
Declares HTML5 (must be first line)
<html lang="en"> Sets root & language
<head> Contains metadata, resources
Declares document encoding
<title> Sets browser tab title
<body> Page content visible to users
Table 1: Key HTML Skeleton Elements
Meta tags: Add extra info (author, description), improving SEO and clarity.
Practice: Validate code often using the W3C validator.
Chapter 3: Text Basics (Headings, Paragraphs, Block vs
Inline, Comments)
Headings
• Use <h1> for main topic (only once)
• Use <h2>-<h6> for lower-level headings
Paragraphs & Separators
• <p>: Paragraph block
•
: Horizontal rule (visual divider)
•
: Line break (within a block, inline)
Inline Text Markup
Element Purpose/Typical rendering
<em> Emphasis (italicized)
<strong> Strong importance (bold)
<abbr> Abbreviation, tooltip via title attribute
<address> Contact/location info (often italic)
Table 2: Semantic Inline Elements
Entities & Special Characters
<, > for <, >
© for ©
for non-breaking space
Comments
Use <!-- ... --> for internal notes. Visible in source, not page!
Chapter 4: Lists in HTML
Element Use
<ul> Unordered list (bullets)
<ol> Ordered list (numbers)
<li> List item, inside ul or ol
<dl> Description list
<dt> Term (within description list)
<dd> Description/definition
Table 3: HTML List Types
Lists can be nested.
Chapter 5: Links and Navigation
• Basic link: <a href="[Link] Site</a>
• Internal: <a href="#section1">Go to Section</a>
• Mail: <a href="[Link] tel: links work on phones
• Open in new tab: target="_blank" rel="noopener"
• Nav: Use <nav> to group navigation links (semantic)
Chapter 6: Images
• Basic usage: <img src="[Link]" alt="description">
• Always use alt text for accessibility.
• Use <figure> and <figcaption> for images with captions.
• Optimize images for web (size/compression tools).
Chapter 7: Semantic HTML5 Elements
• <header>, <footer>, <main>, <nav>, <article>, <section>, <aside>
• Use these to outline page structure and improve accessibility/SEO.
Tip: Use <div> only for generic containers; prefer semantic elements where possible.
Chapter 8: Tables
Element Use
<table> Table root
<tr> Table row
<th> Header cell (bold/centered)
<td> Data cell
<caption> Title / summary for table
<thead> Row group at start (for headers)
<tbody> Main table body
<tfoot> Summary/footer rows
Table 4: HTML Table Structure
Use colspan, rowspan for merged cells.
<th scope="..."> for accessibility (row/col context).
Chapter 9: Forms and User Input
• <form>: Main form container.
• <label for="id">: Always label every input!
• <input>: Many types (text, password, email, number...)
• <select> + <option>: Dropdowns.
• <textarea>: Multi-line input.
• <fieldset>, <legend>: Visually/logically group related controls.
• <input type="radio">, <input type="checkbox">: Choices.
• <input type="submit">, <input type="reset">: Form buttons.
• HTML5 validation attributes: required, minlength, maxlength, pattern,
autocomplete, etc.
• <datalist>: List of suggestions for text input.
Attribute Use
required Field must be filled
autofocus Focus input on page load
autocomplete Suggest previous values
placeholder Example hint in the field
pattern Regexp for input validation
Table 5: Common Input Attributes
Chapter 10: HTML Project – Little Taco Shop
What is built:
• Multiple pages: [Link], [Link], [Link]
• Navigation (<nav>) bar
• Clear semantic structure (<main>, <header>, <footer>, etc.)
• Menu with lists, links, images, and captions
• Opening hours table and contact/address section
• Contact form with validation and accessibility
• All best practices from course are combined
• Validate every page before considering it "done"
Additional Resources, Tools & Best Practices
• MDN HTML Reference: Extensive, reliable documentation:
[Link]
• W3C Validator: [Link]
• GitHub Source Code (by Dave Gray): [Link]
• HTML Entities Chart: [Link]
[Link]#named-character-references
• Always test with screen readers and keyboard navigation for accessibility.
• Organize folders: separate assets (images, CSS) from HTML
• Frequently re-validate, and use Prettier to auto-format code
• Comment your code, but never put sensitive info in HTML comments (visible in
source)
• Always pair <label> with form fields for accessibility
References
[1] Dave Gray, "HTML Full Course for Beginners | Complete All-in-One Tutorial | 4 Hours",
YouTube, Feb 18, 2022. [Link]
[2] MDN Web Docs, "HTML Reference", [Link]
[3] World Wide Web Consortium, "Markup Validation Service", [Link]
[4] Dave Gray, "HTML Course Source Code", GitHub,
[Link]
[5] WHATWG, "HTML Named Character References", [Link]
e/[Link]#named-character-references