The Complete Guide to HTML

Learn how HTML, which stands for Hypertext Markup Language, marks up text to create web pages, turning content into headings, paragraphs, and buttons, images, and forms rendered by the browser.

Create a new file with a .html extension, write your HTML, and open it in a browser to render a local file. Save and refresh to see changes.

Learn to use the HTML paragraph element with opening and closing p tags to create separate paragraphs, understand how browsers render them, and see how VS Code auto formats markup.

Learn to use the Chrome inspector to view and inspect HTML, CSS, and JavaScript on any web page, highlight underlying elements, and navigate the elements tab.

Learn how to use h1 to h6 to structure a page, distinguish main and subheadings, and follow the single h1 rule for accessible headings used by screen readers.

Discover how VS Code autocomplete speeds up HTML editing by typing a tag name (like h1, h4, p) and pressing tab to auto complete the full element with cursor inside.

Discover how HTML comments use the <!-- --> syntax to add notes and temporarily disable code, with keyboard shortcuts to comment and uncomment in VS Code.

Discover Mozilla Developer Network as a comprehensive reference for learning HTML, CSS, and JavaScript, with HTML element references like h1–h6 and paragraphs to guide proper structure and syntax.

Master proper document structure by placing content in the body and metadata in the head, including the doctype and title element that appears in tabs and search results.

Practice turning starter text into a structured HTML page with proper doc structure, headings (h1-h4), and paragraphs, using regions like the Americas and Europe.

Learn how the strong element adds significance to text beyond bold, and how CSS can style it. See an example emphasizing a phrase for accessibility and screen readers.

Explore the b tag, now called the bring attention to element, used to bold text without strong emphasis, and compare it to the strong tag and CSS styling.

Explore the HTML emphasis element, the M tag, which renders text in italics by default but carries stressed emphasis and meaning relative to surrounding text, aiding screen readers.

Discover how the idiomatic text element renders text in italics for Latin terms, technical terms, and taxonomic designations without stressed emphasis, and how it differs from the em element.

Explore how nesting elements in HTML expresses relationships: paragraphs contain strong, links, and other tags, with body inside HTML. Learn common nesting rules, like avoiding paragraphs inside paragraphs.

Learn to use the sup and sub tags to create superscript and subscript text, including exponents like e=mc^2 and chemical formulas such as h2o, with nesting.

Explore how to create unordered (ul) and ordered (ol) lists using list items (li) in HTML, understand when to use each, and how styling changes their appearance.

Learn to nest unordered and ordered lists by placing nested lists inside the corresponding list item, using hot with coffee and tea and cold with juices, for valid html structure.

Explore inline and block elements, learning how inline elements like strong and b fit within text, while block elements like headings and paragraphs push content to a new line.

recreate a pet sitting instructions page in HTML, practicing headings, paragraphs, bold and strong emphasis, superscript and subscript for fractions, italics, and nested unordered and ordered lists.

Learn to create hyperlinks with the anchor element (a tag) using the href attribute to specify the destination URL and visible link text.

Create relative links using anchor tags and hrefs to connect to other HTML documents in the same folder or subdirectories, like about.html or stuff/about.html.

Learn how to create internal page links using anchor tags and the id attribute to jump to sections within the same document, enabling table of contents navigation.

Explore how to create mailto and tel links using anchor elements, with examples that open the default email client and initiate calls on mobile devices.

Learn how to insert images with the self-closing img tag, specify the src attribute, and use local or external image sources, while adjusting size with CSS.

Learn how the alt attribute provides alternate text for images, improving accessibility for screen readers. Place descriptive alt text for informative images, and use empty alt text for decorative images.

Practice making links and images in HTML by building a link list to MDN, a relative contact page link, an in-page anchor to my pets, and images with alt text.

Learn to create HTML tables that organize information into rows and columns, using headers, footers, and body sections, and understand when not to use tables for layout.

Explore how to construct an html table using table, thead, tbody, and tfoot, with rows (tr), headers (th), and data cells (td), illustrated by a simple movies example.

Create table headers by using the th element in a header row, with tr and td replaced by th for columns like movie title, release, and IMDb rating.

Structure html tables with thead, tbody, and tfoot to clearly separate header, body, and footer content, enabling targeted styling and improved accessibility for screen readers.

Add a caption element as the first child of a table to describe its contents and link the caption for better accessibility with screen readers.

Explore how colspan and rowspan control table layouts by spanning multiple columns or rows, using live demos of subtotals and taxes to visualize cell merging in HTML tables.

Recreate a styled HTML table using thead, tbody, tfoot, th, td, and caption, building a two-column character age table with an average footer from a starter file.

HTML forms work by using the input element and its type attribute to create text and password fields, with placeholders and labels guiding user input, as self-closing elements.

Group form controls with the form element to bundle inputs, labels, and buttons for submission. The action and method attributes determine the submission url and http request type.

Learn how to create and use HTML buttons, including default submit behavior inside forms, non-submitting buttons, and the differences between button and input submit options.

Go beyond text and password inputs to explore email, URL, and number input types, and observe how the type attribute guides input, with placeholders and simple validation inside a form.

Learn how to properly label form controls with the label element, connect it to inputs using the for attribute and id, and boost accessibility for screen readers and all users.

Learn how the name attribute assigns a label to input values when a form is submitted to a server. See how state and city inputs produce name=value pairs in URL.

Apply the required attribute to form inputs to force username and password values during submission. Observe how the presence of the word required marks an input as required, enabling validation.

Use a div to group a label with its input as a generic container and block element that structures form content, while CSS can style the grouped blocks later.

Practice building a basic HTML form with username, email, and password, with labels connected to inputs, required fields, placeholders, and a button submitting to /login.

Create and customize text areas for multi-line input in forms, label them with an id, control initial size with rows and columns, and note the opening and closing tag structure.

Create a checkbox input with a label and a name in a form; when checked, subscribe equals on, otherwise no value is sent, and use boolean checked attribute to default.

Learn how the range input creates a slider with min and max values. See how a volume example uses name, value, and form submission to show when precision isn't required.

Build an accessible dropdown with a select element wrapping option elements, label it, set name and value attributes for submission, and use the selected attribute for a default option.

Discover how to build radio button groups in HTML by using input type=radio, labeling each option, naming the group, and assigning values so only one selection submits with a value.

Master the full spectrum of HTML input types, from color pickers and date to time, file, and month inputs, all via the input element with varying type attributes.

Apply the disabled attribute to form inputs to prevent interaction, understand when to use permanent versus dynamic disabling, and learn how JavaScript can toggle disabled states.

Learn how to group form controls with fieldset and explain the group with legend, improving association for screen readers and enabling bulk disable of related inputs like radios or checkboxes.

Build an html checkout form with a payment select, three shipping radio options in a fieldset with a legend, and a gift checkbox, ensuring labels, names, and values for submission.

The span element is a generic inline element with no inherent meaning, used to wrap text for styling, often via a class to color parts of text.

Learn how the div acts as a generic block-level container to group content for later styling with CSS, illustrated by card layouts with borders.

Explore semantic markup and use meaningful html elements like main, nav, article, and section instead of divs to convey content meaning, improving accessibility and search engine understanding.

Explore semantic elements like main, header, footer, nav, aside, and time, learning how semantic markup improves accessibility and SEO by adding meaningful structure over generic divs.

Set up an audio element with a source and controls, then understand autoplay, loop, and muted behavior across browsers, plus fallback content for older browsers.

Create HTML video elements with single or multiple sources, using nested source elements for different file types, add controls, and learn autoplay rules in Chrome and general browser behavior.

Complete the HTML course and leave a review to share feedback. Move on to a CSS course, since CSS is closely linked with HTML.