MyCodeNest

Learn HTML: Step by Step

Learn HTML fundamentals. 27 lessons, in order, each with a code editor to practice in.

Start with lesson 1: What Is HTML? Your First Web Page →

Getting Started

  1. What Is HTML? Your First Web PageLearn what HTML is, how browsers turn it into a page, and write and run your first web page in a few minutes.Beginner3 min read
  2. HTML Document Structure: doctype, head and bodyUnderstand every part of an HTML page: the doctype, the html, head and body elements, meta tags, comments and nesting.Beginner3 min read
  3. HTML Elements and Tags Explained in DetailLearn the difference between an HTML element, a tag and an attribute, how nesting works, and why void elements are not really self-closing.Beginner8 min read
  4. HTML Attributes In Depth: Global Attributes You Should KnowGo beyond href and src: learn HTML's global attributes — id, class, style, title, lang, data-*, hidden, tabindex — and why inline style is a last resort.Beginner10 min read
  5. HTML Text Basics: Paragraphs, Headings, Lines and SpansStructure text the right way with paragraphs, six heading levels, line breaks, horizontal rules and spans, and avoid the most common beginner mistakes.Beginner8 min read
  6. HTML Block and Inline Elements Explained with ExamplesLearn how block and inline elements take space, why width, height and margin behave differently, how to switch them with CSS display, and how to spot them.Beginner13 min read
  7. HTML Grouping: div, span, class and id ExplainedLearn how to group HTML elements with div and span, name groups with class and id, nest containers, and know when a semantic element is the better choice.Beginner9 min read
  8. HTML Text Formatting Tags: strong, em, mark, sub, sup and MoreLearn every HTML text formatting tag with real meaning, not just looks: strong vs b, em vs i, mark, small, del, ins, sub, sup, s, and why big is deprecated.Beginner9 min read

Links, Media, Lists and Tables

  1. HTML Links: The Anchor Tag, href, target and rel ExplainedLearn the HTML anchor tag in depth: absolute and relative URLs, target values, jumping to a section, mailto and tel links, download links, and rel security.Beginner10 min read
  2. HTML Images In Depth: img, alt, figure and Lazy LoadingLearn the HTML img element properly: src, meaningful alt text, width and height to avoid layout shift, lazy loading, figure/figcaption, and image formats.Beginner13 min read
  3. HTML Audio: The audio Tag, source, controls and AutoplayLearn the HTML audio element in depth: controls, multiple formats with source, autoplay problems, loop, muted, preload values, and accessible audio.Beginner8 min read
  4. HTML Video: The video Tag, poster, source and CaptionsLearn the HTML video element in depth: controls, source for multiple formats, poster, width and height, autoplay rules, and adding captions with track.Beginner8 min read
  5. HTML iframe In Depth: Embedding, sandbox and SecurityLearn the HTML iframe element properly: src, width/height, the required title attribute, sandbox for security, lazy loading, and why some sites block embedding.Beginner8 min read
  6. HTML Lists In Depth: ul, ol, dl and Nesting ExplainedLearn unordered, ordered and definition lists in HTML, custom numbering with type and start, nested lists, styling with CSS, and when to use each list.Beginner8 min read
  7. HTML Tables In Depth: thead, tbody, rowspan, colspanLearn HTML tables: table, tr, th, td, thead/tbody/tfoot, merging cells with rowspan and colspan, captions, accessible headers, and when to avoid tables.Beginner8 min read

Building Real Pages

  1. HTML Forms Basics: form, input, label and button ExplainedLearn HTML forms from the ground up: the form element, action and method, input and name, connecting label to input, button types, and a full example.Beginner8 min read
  2. HTML Input Types: text, email, number, date, checkbox and MoreA practical guide to HTML input types — text, email, password, number, date, checkbox, radio, range and file — with real attributes and use cases.Beginner9 min read
  3. HTML select, textarea, fieldset and legend ExplainedLearn the HTML select dropdown with optgroup, the textarea for multi-line text, and how fieldset and legend group related form fields properly.Beginner7 min read
  4. HTML Form Validation: required, pattern, min, max ExplainedLearn HTML's built-in form validation: required, pattern with regex, minlength/maxlength, min/max/step, custom messages, novalidate, and its real limits.Beginner8 min read
  5. HTML Entities: &lt;, &amp;, &nbsp; and Special CharactersLearn why HTML needs character entities for symbols like <, >, & and quotes, the most useful named and numeric entities, and when nbsp actually helps.Beginner9 min read

Professional HTML

  1. HTML Semantic Elements: header, nav, main, article, sectionLearn semantic HTML: when to use header, nav, main, article, section, aside, footer, figure and time instead of div, and why it helps accessibility and SEO.Beginner6 min read
  2. HTML Head and Meta Tags: SEO, Open Graph, Favicons, CanonicalLearn the meta tags that matter beyond charset and viewport: description, Open Graph and Twitter Card previews, favicons, canonical URLs, and robots.Intermediate10 min read
  3. HTML Accessibility Basics: Landmarks, Keyboard and FocusLearn web accessibility fundamentals: alt text, heading order, form labels, landmark elements, keyboard navigation, visible focus styles, and skip links.Intermediate10 min read
  4. ARIA Basics: When (and When Not) to Use ItLearn the first rule of ARIA, plus aria-label, aria-labelledby, aria-describedby, aria-hidden, aria-expanded and aria-live, with real custom-widget examples.Intermediate9 min read
  5. HTML details, dialog, progress and meter ElementsLearn HTML's native interactive elements: details/summary for accordions and FAQs, dialog for modals, progress for task completion, and meter for gauges.Intermediate8 min read
  6. HTML SEO Basics: Titles, Headings and Structured DataLearn how HTML itself affects search rankings: titles, heading hierarchy, meta description, semantic markup, alt text, canonical URLs, and JSON-LD.Intermediate9 min read
  7. HTML Best Practices and Validation: Write Clean, Correct HTMLLearn to validate HTML with the W3C validator, fix the most common errors, follow consistent code style, and use a pre-launch checklist for real pages.Intermediate9 min read