Learn how to test a web page for accessibility: automated tools, a five-minute keyboard and zoom check, screen reader checks, and testing with real people. Understand what automation can and cannot catch, how to report and fix problems, and how to keep them from coming back. Includes a manual test plan lab, a what-can-a-tool-catch quiz, and a live mini page auditor.
Make HTML audio and video work for everyone: captions, transcripts and audio description, keyboard-friendly controls, autoplay and audio control, reduced motion, flashing and seizure safety, labelling embedded players, and a practical checklist for every kind of media, with live demos.
Learn how to build buttons that work for everyone: use the real button element, set the type, name icon buttons, make toggle and disclosure buttons with aria-pressed and aria-expanded, handle disabled and loading states, and avoid fake buttons made from div and span. Includes a toggle lab, a disabled-button lab, and a live button checker.
Learn how to build forms that everyone can complete: visible labels, fieldset and legend, hints and required fields with aria-describedby, the right input types and autocomplete, clear error messages, sensible validation timing, and safe, accessible sign-in. Includes a live field builder, a validation timing lab, and a form checker.
Learn how to build accessible HTML forms: visible labels, grouping with fieldset and legend, hints and instructions, marking required fields, clear error messages with aria-invalid and aria-describedby, autocomplete, keyboard and focus, touch target size, WCAG 2.2 rules for forms, redundant entry and accessible authentication, and a practical testing checklist.
Learn how to make HTML lists accessible to everyone. Understand how screen readers announce lists, why real list markup matters, how to label lists, keep list semantics when removing bullets, build accessible navigation, breadcrumbs, and checklists, and test your lists on CodeHarborHub.
Learn how to build accessible HTML tables. Understand how screen readers navigate tables, use captions, th and scope, the headers and id attributes for complex tables, sortable headers with aria-sort, scrollable regions, layout table pitfalls, and how to test tables on CodeHarborHub.
Learn how to make every image in your HTML pages accessible. Decide between informative, decorative, functional, and complex images, write useful alt text, handle text in images, linked images, SVG, animated GIFs, and test with real tools on CodeHarborHub.
Learn how to build links that everyone can understand and use: meaningful link text, links versus buttons, keyboard and focus, visual styling, links that open new tabs, file and email links, and safe external links. Includes a links-list lab, a link builder, and a live link checker.
Learn what an accessible name is, where browsers get it from (aria-labelledby, aria-label, labels, alt text, content, title), how to write good names, and why the visible label must be part of the name. Includes a live name calculator, a page name audit, and a short drill.
Learn how to build data tables that work for screen reader and keyboard users: when to use a table, captions, th and scope, complex tables, empty cells, sortable columns, buttons and checkboxes in rows, and scrollable wide tables. Includes a table reader lab, a scrolling region lab, and a live table checker.
Learn how to write good alt text: the five kinds of images (informative, decorative, functional, images of text, complex), how to decide which one you have, how to write short, useful descriptions, and how to handle links, charts, SVG, and figures. Includes a decision guide, an alt text writing practice lab, and a live alt text checker.
Learn how aria-describedby adds extra help to a control: form hints and errors, warnings on buttons, dialog text, and accessible tooltips. Understand the difference between a name and a description, why descriptions can be missed, and how to keep them accurate. Includes a description builder lab, a tooltip lab for WCAG 1.4.13, and a live aria-describedby checker.
Learn what aria-hidden really does, when it is safe, and when it quietly breaks your page. Compare hidden, display none, visibility hidden, aria-hidden, inert, and visually hidden text. Never put aria-hidden on something focusable. Includes a hiding-methods lab with real focus tests, a modal background lab, and a live aria-hidden checker.
Learn when and how to use aria-label: naming icon-only buttons, search fields, repeated landmarks, and SVG images; when not to use it (elements that cannot be named, visible text that already works); the Label in Name rule; and how to write short, unique, translatable labels. Includes a name override lab, a label writing practice, and a live aria-label audit.
Learn how aria-labelledby names an element from text that is already on the page: naming dialogs and sections from their headings, building names from several pieces, making repeated buttons unique, how hidden text and self-reference work, and why unique ids matter. Includes a name builder lab, a duplicate id lab, and a live aria-labelledby checker.
Learn how aria-live and live region roles announce changes to screen reader users without moving focus: status messages, errors, search results, chat, and timers. Understand polite versus assertive, aria-atomic, aria-relevant, and why a live region must exist before it changes. Includes a live region lab with real regions, an atomic lab, and a live aria-live checker.
Learn what ARIA roles are, how native HTML elements already have them, and which roles are worth knowing: landmark, widget, live region, and structure roles. Includes a searchable role explorer, a landmark lab that shows what a screen reader's landmark list looks like, and a live roles lab for status, alert, and log.
Learn the difference between ARIA states and properties, the kinds of values they take, and the most useful ones: aria-expanded, aria-pressed, aria-checked, aria-selected, aria-current, aria-disabled, aria-invalid, aria-busy, and aria-controls. Includes a state sync lab that shows what goes wrong when state is not updated, a value tester, and a lab for aria-current and aria-busy.
Learn how to open and use browser developer tools in Chrome, Firefox, and Edge. Master the Elements panel, live-edit HTML and CSS, use the Console, check responsive design, and debug your first web page like a professional.
Learn how rel=canonical tells search engines which address is the main version of a page. Understand duplicate URLs, self-referencing canonicals, cross-domain canonicals, redirects versus canonicals versus noindex, pagination, parameters, and common mistakes. Includes a URL normaliser, a canonical decision quiz, and a live canonical checker.
Follow this hands-on, step-by-step tutorial to write, save, and open your very first HTML page. Set up VS Code, use Live Server, and build a small personal profile page from scratch.
Learn how to add a favicon to your website: which files you need (SVG, ICO, Apple touch icon, manifest icons), the link tags to use, how to design an icon that stays readable at 16 pixels, and how to fix caching problems. Includes a live icon designer that changes this page's real tab icon.
Learn how to move keyboard focus on purpose: how focus() and document.activeElement work, when to move focus (dialogs, deleted items, form errors, page changes), how to return focus, and how to avoid stealing it. Includes three live labs: a delete-and-lose-focus lab, a dialog focus lab, and a form error summary lab.
Master the basics of HTML from scratch. Explore web architecture, document structures, browser tools, and create your first web page with CodeHarborHub.
Learn how headings help search engines and readers understand a page: the h1 to h6 outline, how many h1 elements to use, writing clear and natural headings, avoiding fake headings and stuffing, jump links, FAQs, and templates. Includes a live heading outline checker, a heading level sorter, and a heading duel quiz.
Explore the complete history of HTML, from Tim Berners-Lee's invention at CERN to HTML 2.0, HTML 4, XHTML, HTML5, and today's HTML Living Standard. A clear, beginner-friendly timeline.
Learn how the web works step by step. Understand clients and servers, URLs, DNS, IP addresses, HTTP and HTTPS requests, status codes, and how browsers render HTML into web pages. Beginner-friendly guide.
Learn how to use the HTML abbr tag to explain abbreviations, acronyms, and initialisms. Understand the title attribute, first-use best practices, accessibility on touch and keyboard, styling with CSS, and global language tips on CodeHarborHub.
Learn what absolute URLs are in HTML and when to use them. Understand the parts of a full web address, schemes like https, mailto and tel, URL encoding, international domain names, query strings, common mistakes, and best practices on CodeHarborHub.
Start learning web accessibility: why it matters, who it helps, the four WCAG principles (perceivable, operable, understandable, robust), and a map of every lesson in this section. Includes a live experience simulator, a contrast checker, and a short drill that sorts real barriers into the four principles.
Learn the HTML address element: marking contact information for a page or an article's author, what it is not for (postal addresses in general), mailto and tel links, line breaks, resetting italic styling, privacy and spam concerns, international phone and address formats, and common mistakes, with live examples.
Learn how the HTML anchor element works. Understand the a tag, the href attribute, link text, link states, styling links with CSS, linking images, accessibility, hreflang for multilingual sites, and common mistakes on CodeHarborHub.
Learn the HTML article element: marking self-contained content such as blog posts, news stories, comments, and product cards, the stand-alone test for choosing article over section, nesting comments, header and footer inside an article, the time element, clickable cards, user-generated content safety, and common mistakes, with live examples.
Learn the HTML aside element: marking content that is related to the main content but separate from it, such as sidebars, related links, pull quotes, author bios, and advertisements, the remove-it test, the complementary landmark, naming asides, responsive sidebar layouts, safe ads and third-party widgets, and common mistakes, with live examples.
Learn how HTML attributes work: syntax and quoting rules, required vs optional attributes, boolean attributes, data-* attributes, and common mistakes. A clear, example-driven guide for beginners.
Start learning HTML audio and video: the audio, video, source and track elements, built-in controls, captions and subtitles, accessible and responsive media, and the formats browsers can play, with a live format checker and a map of this section.
Learn the HTML audio element: adding sound with src, controls, loop, muted, preload and autoplay, choosing MP3, AAC, Ogg or WAV, fallback content, the autoplay rules, controlling playback with JavaScript, transcripts, and accessibility, with a live audio player you can try.
Learn the HTML autocomplete attribute: helping browsers and password managers fill in names, emails, addresses, phone numbers, and payment details, the most useful autocomplete tokens, shipping and billing sections, current-password, new-password, and one-time-code, when autocomplete off is appropriate, accessibility benefits (WCAG 1.3.5), and security and privacy notes.
Learn the HTML button element: the type attribute (submit, reset, button) and why submit is the default, stable name and value for multiple actions, icons and rich content inside a button, toggle buttons with aria-pressed, disabled versus aria-disabled, loading states, button versus link, styling, accessibility, and common mistakes on CodeHarborHub.
Learn the HTML canvas element: drawing shapes, paths and text with the 2D context, animating with requestAnimationFrame, keeping drawings sharp on high-resolution screens, handling clicks with correct coordinates, making canvas accessible, performance, security and tainted canvases, with live demos.
Learn how to add and write good captions for HTML video: the track element with kind captions, what captions must include (speech, speakers, sounds), timing and reading speed, line length, styling and contrast, open versus closed captions, reviewing automatic captions, and common mistakes, with live checkers.
Learn how character encoding works in HTML. Understand ASCII, Unicode, and UTF-8, why the meta charset tag matters, how to fix garbled text (mojibake), and how to save your files correctly. Beginner-friendly with examples.
Learn how character encoding works in HTML: what UTF-8 is, how meta charset tells the browser how to read your page, why text turns into garbled symbols, and how to fix it. Includes a live encoding lab with real bytes and a real page rendered with different encodings.
Learn how to use the HTML cite element to mark the title of a creative work such as a book, film, song, or article. Understand cite vs the cite attribute, what not to wrap, reference lists, styling with CSS, and global considerations on CodeHarborHub.
Learn how to show code in HTML with the code, pre, kbd, samp, and var tags. Understand whitespace, escaping special characters, styling with CSS, accessibility, and global tips like translate=no, explained clearly on CodeHarborHub.
Learn how to style and size whole table columns with the HTML colgroup and col elements. Understand placement, the span attribute, which CSS properties work on columns, setting column widths, highlighting columns, and how colgroup relates to accessibility on CodeHarborHub.
Learn how to merge cells in HTML tables with colspan and rowspan. Understand how to count cells correctly, build grouped headers, schedules, and totals rows, avoid overlap errors, keep merged tables accessible, and decide when to split a table instead on CodeHarborHub.
Learn how to write HTML comments correctly. Understand comment syntax, conditional comments, why comments are not private, common mistakes, and best practices for documenting your HTML code.
Learn the HTML datalist element for suggestions: connecting an input with the list attribute, suggestions versus restrictions, option value and label, using datalist with search, email, number, range, and color inputs, limiting input to the list with JavaScript, loading suggestions dynamically, accessibility limits, and common mistakes on CodeHarborHub.
Learn how to create HTML description lists with the dl, dt, and dd elements. Pair terms with meanings for glossaries, FAQs, product specs, and metadata. Covers grouping with div, multiple terms and descriptions, styling, accessibility, and common mistakes on CodeHarborHub.
Learn the HTML details element: building expandable and collapsible content with no JavaScript, the open attribute, exclusive accordions with the name attribute, the toggle event, FAQ patterns, styling the marker, accessibility and keyboard behaviour, printing and find-in-page notes, what not to hide, and common mistakes, with live examples.
Learn the HTML dialog element: modal and non-modal dialogs, showModal() and close(), forms with method dialog, the returnValue, the backdrop, focus handling, closing with Escape or a click outside, alert dialogs, accessibility, security, and common mistakes, with live examples.
Learn the basic structure of an HTML document. Understand DOCTYPE, the html, head, and body elements, meta tags, the title, comments, and nesting rules with clear examples and a ready-to-use template.
Learn how to create download links in HTML with the download attribute. Suggest file names, understand same-origin limits and Content-Disposition, generate files with JavaScript, show file type and size, keep downloads safe, and make them accessible on CodeHarborHub.
Understand HTML elements in depth: how tags and content combine to form elements, void elements, nested elements, block vs inline elements, and the difference between elements and tags. Beginner-friendly with examples.
Learn how to create email links in HTML with mailto. Add recipients, cc, bcc, subject and body text, encode special characters and line breaks, protect addresses from spam, write accessible link text, and know when a contact form is better. Explained on CodeHarborHub.
Learn the HTML embed element: what it was built for, how src, type, width and height work, why it has no fallback content, how it compares with object, iframe and img, accessibility and security limits, and when to choose something else, with live demos.
Start learning HTML embedded content: iframe, embed, object, SVG, canvas, and maps. See what each element is for, how they differ, how to choose between them, and why third-party content needs security care, with a live sampler of four embedding methods.
Learn the difference between the HTML em and i tags. Understand stress emphasis vs alternate voice, accessibility, CSS font-style, italic challenges in global scripts, and best practices, explained in simple language on CodeHarborHub.
Learn HTML entities and character references. Understand why reserved characters like less-than and ampersand need escaping, named vs numeric entities, common symbols like copyright and non-breaking space, and best practices with UTF-8.
Learn how to create external links in HTML. Link to other websites with absolute URLs, show readers a link leaves your site, use rel values like nofollow and sponsored, link to the right language version, and keep outside links healthy. Explained on CodeHarborHub.
Learn the HTML fieldset and legend elements: grouping related form controls, naming a group for screen readers, radio and checkbox groups, split date fields, address blocks, disabling a whole group with the disabled attribute, styling the border and legend, nesting rules, and common mistakes on CodeHarborHub.
Learn how to use the HTML figure and figcaption elements to add captions to images, diagrams, code, quotes and tables. Understand captions versus alt text, numbering with CSS counters, credits and licenses, accessibility, styling, and common mistakes on CodeHarborHub.
Learn the HTML footer element: closing information for a page, article, or section, how a page-level footer becomes a contentinfo landmark, what belongs in a footer (copyright, legal links, contact, sitemap, social links), the small element, sticky footer layouts, accessibility, privacy and consent links, global legal notes, and common mistakes, with live examples.
Learn the HTML form action attribute: where a form sends its data, absolute and relative URLs, what happens when action is left out, the GET query string trap, formaction on buttons, the target attribute, third-party form services, mailto actions, progressive enhancement with fetch, and security notes on HTTPS, CSRF, and the Content-Security-Policy form-action rule.
Learn the HTML form element: what it does, how browsers collect and send name and value pairs, the main attributes (action, method, enctype, target, autocomplete, novalidate), submitting with buttons and the Enter key, search forms, the form attribute, accessibility, and common mistakes on CodeHarborHub.
Learn the HTML form method attribute: how GET puts data in the URL and POST sends it in the request body, when to use each one, URL encoding, the post-redirect-get pattern, method dialog, why HTML forms cannot send PUT or DELETE, CSRF and privacy notes, and how to choose the safe method for search, login, and checkout forms.
Learn HTML form validation: the built-in constraint validation attributes, the ValidityState flags, checkValidity, reportValidity, and setCustomValidity, the :valid, :invalid, and :user-invalid CSS pseudo-classes, novalidate, writing friendly accessible error messages with aria-invalid and an error summary, and why the server must always validate again.
Learn how to collect information from visitors with HTML forms. Understand the form element, labels, inputs, input types, textarea, select, buttons, validation attributes, submitting data, accessible forms, and secure form design with live examples on CodeHarborHub.
Learn HTML global attributes that work on every element: id, class, style, title, lang, dir, hidden, tabindex, contenteditable, draggable, data-*, and more. Clear examples, best practices, and common mistakes for beginners.
Start learning the HTML head: what goes inside it, how html, head, title, meta, charset, viewport, link, favicon, style, script and base work together, who reads each tag, and a live look at the head of a real page, with a clickable map of every head element.
Learn the HTML header element: introductory content for a page, article, or section, how it becomes a banner landmark only at page level, the difference between header, head, and headings, skip links, sticky headers and keyboard focus, accessible logos, language switchers, and common mistakes, with live examples.
Learn how to use HTML headings h1 to h6 to build a clear page outline. Understand heading hierarchy, best practices for SEO and accessibility, common mistakes, and how to style headings with CSS on CodeHarborHub.
Learn how to use the HTML hr tag to mark a thematic break between topics. Understand its meaning, default look, how to style it with CSS, accessibility tips, and common mistakes, explained clearly on CodeHarborHub.
Learn the HTML iframe element: embedding another page with src and srcdoc, titles for accessibility, size and aspect-ratio, lazy loading, the sandbox attribute, allow and referrerpolicy, why some sites refuse to be framed, and talking to a frame with postMessage, with live demos.
Learn how to write the src and alt attributes of an HTML image. Point to the right file with relative, root-relative and absolute paths, name files well, and write alt text for photos, icons, charts, logos, linked images and decorative graphics in any language on CodeHarborHub.
Learn how the width and height attributes stop layout shift in HTML. Understand aspect ratio, how browsers reserve space, responsive sizing with CSS, the aspect-ratio property, high-density screens, and Cumulative Layout Shift on CodeHarborHub.
Learn how to add and manage images in HTML. Master the img element, src and alt, width and height, image formats, responsive images with srcset and the picture element, lazy loading, figure and figcaption, and accessible images with CodeHarborHub.
Learn the HTML input element: the void element behind most form fields. Understand type, name, id, value, placeholder, required, disabled versus readonly, autofocus, size, inputmode, and other key attributes, how values are sent, and common mistakes with live examples on CodeHarborHub.
Learn the HTML input type checkbox: single and grouped checkboxes, the checked attribute, what is sent when a box is ticked or not (and the default value on), required consent boxes, the indeterminate state, select all, fieldset groups, accent-color styling, accessibility, and common mistakes on CodeHarborHub.
Learn the HTML input type color: the colour picker, the #rrggbb value format, the black default, input versus change events, preset swatches with datalist, converting hex to RGB, checking contrast for accessibility, and common mistakes on CodeHarborHub.
Learn the HTML input type date: the date picker, the yyyy-mm-dd value format, min, max, and step, valueAsDate, time zone and off-by-one-day traps, setting today as the minimum, birthdays and autocomplete, accessibility, and common mistakes on CodeHarborHub.
Learn the HTML input type datetime-local: choosing a date and time together, the yyyy-mm-ddThh:mm value format, why it has no time zone, min, max, and step, converting to UTC, setting the current time as a default, daylight saving traps, and common mistakes on CodeHarborHub.
Learn the HTML input type email: built-in format checking, the @ keyboard on phones, the multiple attribute, autocomplete values, trimming, international addresses, why the browser check is not proof, and common mistakes on CodeHarborHub.
Learn the HTML input type file: uploading one or many files, the accept, multiple, capture, and required attributes, why a form needs method=post and enctype=multipart/form-data, reading file name, size, and type with JavaScript, image previews, size checks, styling the button, and safe server-side handling on CodeHarborHub.
Learn the HTML input type hidden: sending values the visitor does not see, such as record ids, CSRF tokens, return pages, and multi-step state. Understand why hidden is not secret, why the server must never trust it, how it differs from the hidden attribute, disabled, and readonly, and common mistakes on CodeHarborHub.
Learn the HTML input type month: picking a year and month, the yyyy-mm value format, min, max, and step in months, valueAsNumber (months since 1970), browser support and a text fallback with pattern, card expiry and billing periods, accessibility, and common mistakes on CodeHarborHub.
Learn the HTML input type number: min, max, and step, how validation works (rangeUnderflow, rangeOverflow, stepMismatch, badInput), decimals and money, spinner arrows and mouse-wheel surprises, when not to use number (phones, postal codes, card numbers), and common mistakes on CodeHarborHub.
Learn the HTML input type password: how it masks characters, what it does not protect, the autocomplete values current-password and new-password, a show-password toggle that is accessible, minlength and pattern rules, password managers, HTTPS, and common security mistakes on CodeHarborHub.
Learn the HTML input type radio: radio button groups with the same name, the value attribute, what is sent, checked and required, keyboard arrow-key behaviour, why you cannot untick a radio, fieldset and legend, an Other option with a text field, styling, accessibility, and common mistakes on CodeHarborHub.
Learn the HTML input type range: the slider, its min, max, and step defaults, the always-present midpoint value, showing the value with the output element, tick marks with datalist, pairing a slider with a number field, keyboard controls, styling the track and thumb, accessibility with aria-valuetext, and common mistakes on CodeHarborHub.
Learn the HTML input type search: how it differs from text, the clear button, the search keyboard key, the search landmark (the search element and role=search), GET forms with name=q, live filtering, accessible result counts, and common mistakes on CodeHarborHub.
Learn the HTML input type tel for phone numbers: the phone keypad, why the browser does not validate or format numbers, pattern and inputmode, autocomplete values, international formats (E.164), tel links, and common mistakes on CodeHarborHub.
Learn the HTML input type text: the default single-line text field. Understand its attributes (value, placeholder, maxlength, minlength, size, pattern, readonly, autocomplete, spellcheck, dirname), when to choose a more specific type, how whitespace is handled, names and usernames for a global audience, and common mistakes on CodeHarborHub.
Learn the HTML input type url for web addresses: what counts as a valid URL, why a scheme like https:// is required, restricting to http and https with pattern, autocomplete, trimming, the javascript: danger, safe ways to display user links, and common mistakes on CodeHarborHub.
Learn the HTML input type week: picking a week of the year, the yyyy-Www value format, ISO 8601 week rules (Monday start, 52 or 53 weeks), min, max, and step, converting a week to dates, browser support and a fallback, timesheets and weekly planners, and common mistakes on CodeHarborHub.
Learn the HTML input types submit, reset, button, and image: how the submit button sends a form, how to use several submit buttons with name and value, formaction and formnovalidate overrides, why reset restores default values (not blanks), implicit submission with the Enter key, preventing double submits, and common mistakes on CodeHarborHub.
Learn how to create internal links in HTML. Link between pages of your own site, jump to sections with id and fragment links, build a table of contents, add skip links and back-to-top links, and make them accessible. Explained clearly on CodeHarborHub.
Learn the HTML label element: how to name every form field with for and id, wrap controls inside labels, why placeholders are not labels, how labels improve clicking and screen reader support, visually hidden labels, hints and required markers, and common mistakes on CodeHarborHub.
Learn how to lazy load images in HTML with the loading attribute. Understand which images to lazy load and which not to, protect your main image, reserve space with width and height, lazy load iframes, use IntersectionObserver, and measure the results on CodeHarborHub.
Understand how the HTML br tag works, when to use a line break instead of a new paragraph, how to handle addresses and poems, and which CSS options and mistakes to know. A clear, step-by-step guide on CodeHarborHub.
Learn how to keep HTML links safe. Understand reverse tabnabbing, rel noopener and noreferrer, referrer policy, dangerous javascript and data URLs, user-submitted links, look-alike addresses, HTTPS, and how to protect your visitors on CodeHarborHub.
Learn how links connect the web. Master the HTML anchor element, absolute and relative URLs, internal and external links, the target attribute, link security, email, telephone and download links, and navigation menus with CodeHarborHub.
Learn how to organize content with HTML lists. Understand unordered lists, ordered lists, description lists, nested lists, list styling with CSS, and accessible lists, with live examples and beginner-friendly explanations on CodeHarborHub.
Learn the HTML main element: marking the dominant content of a page, why a page should have only one visible main, what belongs inside and outside it, skip link targets with tabindex, single-page app focus handling, reader modes, layout CSS, and common mistakes, with live examples.
Learn how to add maps to an HTML page: map links, static images, iframe embeds and interactive libraries, building an OpenStreetMap embed from coordinates, click-to-load for privacy, text alternatives with address and directions, keys and terms, accessibility, responsive sizing, and common mistakes, with live demos.
Learn HTML media controls: the built-in controls attribute, what browsers add, how to build your own accessible player with buttons and sliders using the media API (play, pause, currentTime, volume, playbackRate and events), keyboard support, and common mistakes, with a live custom player.
Bring the whole HTML head together: a complete, correctly ordered head template, a checklist for essentials, search, sharing, performance, accessibility, security and global audiences, and tools to test it. Includes a live head auditor that scores your page, and a head generator that builds a complete head for you.
Learn the HTML min, max, and step attributes: limiting numbers, ranges, dates, times, months, and weeks, how the step base works, the rangeUnderflow, rangeOverflow, and stepMismatch validity flags, setting today as a minimum date, linking two date fields, money and decimal pitfalls, and why the server must check ranges again.
Learn the HTML minlength and maxlength attributes: setting minimum and maximum text lengths on inputs and textareas, how browsers count characters (UTF-16 code units, emoji, and line breaks), the tooShort and tooLong validity flags, accessible character counters, sensible limits for passwords and names, and why the server must enforce limits too.
Learn the HTML form enctype attribute: application/x-www-form-urlencoded, multipart/form-data, and text/plain, why file uploads need multipart, what a multipart request body looks like, using FormData with fetch without setting the Content-Type, formenctype on buttons, and safe server-side handling of uploaded files, size limits, and filenames.
Learn the HTML nav element: marking major navigation blocks as landmarks, building menus with lists, naming several navs with aria-label, showing the current page with aria-current, breadcrumbs and pagination, accessible mobile menu buttons with aria-expanded, which link groups should not use nav, and common mistakes, with live examples.
Learn how to build accessible HTML navigation menus. Use the nav element with lists, mark the current page, style a horizontal menu with CSS, add a mobile toggle button, create breadcrumbs, dropdown safely, and support right-to-left languages on CodeHarborHub.
Learn how to nest HTML lists correctly. Put a ul or ol inside an li to build outlines, sub-menus, and multi-level steps. Covers mixing list types, default marker changes, the most common nesting mistake, multi-level numbering with CSS counters, accessibility, and best practices on CodeHarborHub.
Learn how HTML nesting works: parent, child, and sibling relationships, correct closing order, invalid nesting patterns, how browsers auto-correct mistakes, and best practices for clean, indented, valid HTML.
Learn the HTML object element: embedding PDFs, SVG and other files with data and type, fallback content that appears when a file cannot be shown, nested fallback chains, sizing, scripting a same-origin SVG, accessibility and security limits, and when to use iframe or img instead, with live demos.
Learn the HTML option and optgroup elements: the value, selected, disabled, and label attributes, how text and value differ, grouping long lists with optgroup, disabled options and groups, how the default choice is picked, adding and removing options with JavaScript, accessibility, and common mistakes on CodeHarborHub.
Learn how to create HTML ordered (numbered) lists with the ol and li elements. Master the start, reversed, and type attributes, the li value attribute, when order really matters, step-by-step instructions, rankings, accessibility, and common mistakes on CodeHarborHub.
Learn how to write paragraphs in HTML with the p tag. Understand how browsers handle spaces and line breaks, how to style paragraphs with CSS, and how to avoid common beginner mistakes, explained in simple language on CodeHarborHub.
Learn the HTML pattern attribute: how regular expressions validate text fields, which input types support it, the implicit anchoring rule, writing helpful title messages, common patterns for codes and usernames, why strict patterns for names and phone numbers fail global visitors, the patternMismatch validity flag, and why the server must validate again.
Start learning web performance with HTML: how a browser loads a page, what blocks it, which HTML attributes and tags speed things up (preload, preconnect, defer, async, lazy loading, responsive images), the Core Web Vitals, and a map of every lesson in this section. Includes a loading timeline simulator, a Core Web Vitals quiz, and a which-tool-fits matcher.
Learn how to mark up quotations in HTML with the blockquote and q tags. Understand the cite attribute, figure and figcaption for attribution, quotation marks in different languages, CSS styling, and common mistakes on CodeHarborHub.
Learn how relative URLs work in HTML. Understand file paths, same-folder links, subfolders, the parent folder with ../, root-relative paths, the base element, case sensitivity, and common mistakes, explained step by step on CodeHarborHub.
Learn the HTML required attribute: which form controls support it, how it behaves for text, checkboxes, radio groups, selects, and files, the :required and :optional CSS pseudo-classes, how to mark required fields accessibly with aria-required and clear labels, whitespace-only values, and why the server must still check for missing data.
Learn the HTML section element: grouping content by theme with a heading, when to use section instead of div, article, or main, naming a section as a region landmark with aria-labelledby, heading levels and why the document outline algorithm does not work, landing page patterns, and common mistakes, with live examples.
Learn the HTML select element for dropdown lists: building a dropdown with option, the placeholder option pattern with required, what is sent, multiple selection and the size attribute, change events, dependent dropdowns, keyboard use, styling limits, accessibility, and common mistakes on CodeHarborHub.
Learn how HTML semantic text elements such as mark, time, small, del, ins, s, dfn, bdi, bdo, data, and ruby add meaning to your content. Improve accessibility, SEO, and global readability with CodeHarborHub.
Learn the HTML basics that help search engines find and understand a page: the head essentials, real headings and text, crawlable links, images, clean URLs, mobile and speed basics, and how JavaScript can hide content. Includes a crawler's-view lab, a URL checker, and a live HTML SEO basics checker with a messy and a fixed page.
Start learning SEO with HTML: how search engines crawl, index, and rank pages, which tags help (title, description, headings, canonical, robots, structured data, Open Graph), what HTML cannot do, and a map of every lesson in this section. Includes a live search result preview, a crawl-to-rank explorer, and a short true-or-false myth drill.
Learn the HTML source element: offering several formats for audio and video with src and type, how the browser picks the first source it can play, codecs in the type attribute, the media attribute, fallback content, and common mistakes, with a live demo that shows the browser choosing.
Learn how srcset and sizes work in HTML. Understand width descriptors and pixel density descriptors, how to write the sizes attribute with media conditions and calc, how browsers choose a file, how to plan image widths, test results, and avoid common mistakes on CodeHarborHub.
Learn the difference between the HTML strong and b tags. Understand semantic importance vs visual style, accessibility, font-weight in CSS, and best practices for global audiences, explained in simple language on CodeHarborHub.
Learn how to write chemical formulas, math exponents, footnotes, and ordinals with the HTML sub and sup tags. Understand when to use them, how to fix line spacing with CSS, accessibility, MathML, and global conventions on CodeHarborHub.
Learn how to add subtitles in several languages to HTML video: track elements with kind subtitles, srclang and native-language labels, language codes, translation tips, right-to-left and Asian scripts, choosing a language with JavaScript, and common mistakes, with a live multi-language demo.
Learn the HTML summary element: the visible label and toggle control of a details widget, writing clear summary text, what content is allowed inside it, styling or replacing the marker, keyboard and screen reader behaviour, why headings and links inside a summary cause trouble, stable labels, and common mistakes, with live examples.
Learn SVG in HTML: drawing scalable graphics with shapes, paths and text, understanding viewBox, styling with CSS and currentColor, reusing shapes with symbol and use, choosing between inline SVG, img and object, making SVG accessible with title and desc, animation and reduced motion, and security for SVG files, with live demos.
Master the core syntax rules of HTML: tags, elements, attributes, global attributes, nesting, comments, character encoding, entities, and whitespace. A complete beginner-friendly module by CodeHarborHub.
Learn the basics of HTML tables. Build your first table with table, tr, th, and td, understand how rows and columns work, add borders with CSS, avoid obsolete attributes, and fix common beginner mistakes with clear examples on CodeHarborHub.
Learn how to give HTML tables a title with the caption element. Understand where caption goes, how it differs from headings and figcaption, how to style and position it with caption-side, number tables with CSS counters, and write captions that help screen reader users on CodeHarborHub.
Learn how to mark up HTML table headings with the th element and the scope attribute. Understand column headers, row headers, the empty corner cell, abbreviations, styling, and how headings help screen reader users understand every cell on CodeHarborHub.
Learn how HTML table rows (tr) and cells (td and th) work. Understand the table grid, what can go inside a cell, how to align text and numbers, control wrapping and width, handle empty cells, and avoid common row and cell mistakes with live examples on CodeHarborHub.
Learn how to present data with HTML tables. Understand table, tr, th, and td, captions, thead, tbody, and tfoot, colspan and rowspan, column groups, styling, responsive tables, and accessible tables, with live examples and clear explanations on CodeHarborHub.
Learn what HTML tags are, how opening and closing tags work, the difference between tags and elements, tag naming rules, case sensitivity, and how to avoid common tag mistakes. Beginner-friendly with examples.
Learn how the HTML target attribute decides where a link opens. Understand _self, _blank, _parent, _top, named targets and iframes, when opening a new tab helps, accessibility warnings, security basics, and common mistakes on CodeHarborHub.
Learn how to create telephone links in HTML with the tel scheme. Write international phone numbers with country codes, add extensions, use sms links, handle desktop vs mobile, prevent unwanted auto-detection, and make phone links accessible on CodeHarborHub.
Learn how to structure and format text in HTML. Master headings, paragraphs, line breaks, bold and italic text, quotations, code and preformatted text, abbreviations, and semantic text elements with CodeHarborHub.
Learn the HTML textarea element for multi-line text: rows and cols, the starting text between the tags, maxlength and minlength, a live character counter, auto-growing height, wrap, resize, how line breaks are sent, showing user text safely, accessibility, and common mistakes on CodeHarborHub.
Learn how to organize HTML tables with thead, tbody, and tfoot. Understand what each section means, the correct order, how to use several tbody groups, style headers and footers, build totals rows, keep headers visible while scrolling, and avoid common mistakes on CodeHarborHub.
Learn the HTML track element: adding captions, subtitles, descriptions, chapters and metadata to audio and video with kind, src, srclang, label and default, how WebVTT files work, the TextTrack JavaScript API and cuechange event, cross-origin rules, and common mistakes, with live demos.
Learn when to use the HTML u tag and when to use CSS text-decoration instead. Understand why underlined text is confused with links, how to style underlines with CSS, accessibility and global script tips, and common mistakes on CodeHarborHub.
Learn how to create HTML unordered (bullet) lists with the ul and li elements. Understand when to use them, what can go inside list items, default styling, real-world examples like feature lists and menus, common mistakes, and best practices on CodeHarborHub.
Learn the HTML video element: embedding video with src, controls, width, height, poster, preload, muted, loop, playsinline and autoplay, choosing MP4 or WebM, avoiding layout shift, background videos done safely, compressing files, and accessibility, with a live video player you can try.
Learn how HTML handles whitespace. Understand whitespace collapsing, line breaks, the br and pre elements, non-breaking spaces, the CSS white-space property, and how to format your code cleanly without affecting the rendered page.
Learn which image format to use on the web. Compare JPEG, PNG, GIF, WebP, AVIF and SVG, understand lossy and lossless compression, transparency and animation, browser support, optimization tools, metadata privacy, and how to choose the best format on CodeHarborHub.
Learn the basics of international SEO with HTML: the lang attribute, hreflang alternate links, language and region codes, x-default, reciprocal links, URL structures, canonical links for each version, and good localisation habits. Includes an hreflang builder with sitemap output, a return-link matrix that finds missing links, and a live hreflang checker.
Learn what web accessibility (a11y) means, why it matters for people, law, business and quality, the common myths, and the one idea that explains everything: the accessibility tree. Includes a live keyboard test of fake and real buttons, a simplified accessibility tree viewer, and a ten-minute self-audit.
Learn what ARIA is and when to use it: roles, properties and states, the five rules of ARIA, why native HTML comes first, what ARIA can and cannot do, and how to check it. Includes a lab that shows ARIA changes meaning but not behaviour, a 'do I need ARIA?' guide, and a live ARIA checker.
What is the difference between HTML and HTML5? Compare doctype, semantic tags, audio and video, forms, canvas, and APIs with clear examples. A beginner-friendly guide for developers worldwide.
Learn how to make every part of a web page work with a keyboard: which elements are focusable, how tabindex and focus order work, how to style focus with :focus-visible, how to avoid keyboard traps, and how arrow keys and roving tabindex work in custom widgets. Includes a live focus-order lab, a focus-style test, and a roving toolbar.
Learn how to write meta descriptions that earn clicks: what they are, why they are not a ranking factor, how search engines choose snippets, the right length, a simple writing formula, and how to avoid duplicates and mistakes. Includes a description writer with desktop and mobile previews, a snippet chooser simulation, and a site-wide description audit.
Learn Open Graph tags: the four essential properties, og:type and article extras, how to choose and size a share image, absolute URLs, fallbacks, caching, and why scrapers need tags in the server HTML. Includes an Open Graph builder with a share-card preview, an image crop lab, and a live Open Graph checker.
Learn how to make HTML tables work on phones and small screens. Use scrolling containers, sticky columns, fluid widths, stacked card layouts, and priority columns, understand the accessibility trade-offs of each approach, and choose the right technique for your data on CodeHarborHub.
Make HTML video fit every screen: width and height attributes with max-width and height auto, the CSS aspect-ratio property, object-fit and object-position, responsive iframe embeds, preventing layout shift, saving data on mobile, vertical video, and common mistakes, with live resizable demos.
Learn the big picture of responsive images in HTML. Understand screen sizes and pixel density, flexible images with CSS, resolution switching with srcset, art direction with the picture element, fluid galleries with CSS grid, and how to test what the browser downloads on CodeHarborHub.
Learn how the robots meta tag asks search engines to index, skip, follow, or limit snippets for a page, and how it differs from robots.txt, X-Robots-Tag, rel=nofollow, canonical links, and real privacy. Includes a robots meta builder, a robots.txt tester that shows which rule wins, and a live robots meta checker that catches typos and conflicts.
Learn what screen readers are, how they turn HTML into speech and braille, which ones people use, what they announce for headings, links, buttons, forms and images, and how to try one yourself. Includes a live reader that speaks a page using your browser's built-in speech, and a drill that matches code to what is announced.
Learn secure HTML form design: never trusting the browser, server-side validation with allow-lists, HTTPS, escaping output to stop XSS, parameterised queries against SQL injection, CSRF tokens and SameSite cookies, safe password handling, rate limiting and bot defences, avoiding information leaks, safe file uploads, mass assignment, privacy and data minimisation, and a practical security checklist.
Learn semantic HTML: choosing elements for their meaning, not their looks. Understand header, nav, main, section, article, aside, footer, address, details, summary, and dialog, why semantic markup helps accessibility, search engines, and maintenance, and how to build a clear page layout, with live examples on CodeHarborHub.
Learn how semantic HTML makes pages accessible: heading outlines, landmarks, lists, buttons versus links, skip links, reading order, and visually hidden text. Includes a live structure navigator that shows what a screen reader user can jump between, and a real skip-link focus test.
Learn how semantic HTML helps search engines and other tools understand a page: main content versus boilerplate, landmarks, articles, sections, figures, dates, lists, tables, and breadcrumbs. Be honest about what semantics do and do not do for ranking. Includes a live semantic page analyzer, an element picker quiz, and a breadcrumb builder with matching structured data.
Put it all together: build a complete, accessible HTML page layout with header, nav, main, article, section, aside, and footer, add a skip link, style it with CSS grid, keep the reading order sensible, and check it with a practical checklist, with live examples.
Learn structured data with JSON-LD and schema.org: what it is, which types to use (Article, Recipe, Product, FAQPage, Event, BreadcrumbList), the honesty rules, how to escape it safely, and how to test it. Includes a JSON-LD builder for five types, a live JSON-LD checker that compares markup with visible text, and a which-type quiz.
Learn how to style HTML lists with CSS. Change bullet and number styles with list-style-type, control marker position, use custom images and the ::marker pseudo-element, remove bullets safely, build horizontal menus, add spacing, and number lists in other writing systems on CodeHarborHub.
Learn how to style HTML tables with CSS. Add borders with border-collapse, spacing and padding, header styles, zebra stripes, hover effects, alignment, rounded corners, captions, and a complete modern table stylesheet, with accessibility and contrast tips on CodeHarborHub.
Learn the HTML base element: how it changes the starting address of every relative link, image and form, how it affects fragment links like #top, how base target works, why it is risky, and what to use instead. Includes a live URL resolver and a base tag checker.
Learn the root of every web page: the doctype, the html element, the lang and dir attributes, how the document is split into head and body, and what happens when you leave them out. Includes a live document-skeleton builder and a quirks-mode check.
Learn what belongs inside the HTML head element, what does not, and what the browser does when you break the rules. Includes a live parser lab that shows where the browser really puts each element, and a simulation of how script loading affects your page.
Learn how the HTML img element works. Understand how browsers load images, the core attributes, why images are inline, how to fix the small gap below an image, make images fit with CSS, handle broken images, and choose between img, picture, SVG, and CSS backgrounds on CodeHarborHub.
Learn the HTML link element: how it connects your page to stylesheets, icons, canonical addresses, translated versions, feeds, and performance hints like preload and preconnect. Includes a live stylesheet lab, a real link-tag checker, and an hreflang builder.
Learn the HTML meta element: name and content pairs, http-equiv, descriptions, robots, theme-color, color-scheme, and social sharing tags. Includes a live meta tag checker that uses the browser's real parser, and a social card preview builder.
Learn how the HTML picture element works. Use source and img together to switch image formats with fallbacks, art direction with media queries, combine srcset and sizes, serve dark-mode images, and avoid common mistakes with AVIF, WebP and JPEG on CodeHarborHub.
Learn the HTML script element: inline and external scripts, defer, async and type module, where to place scripts, data blocks like JSON-LD, noscript fallbacks, and how to load JavaScript safely. Includes a live loading-order experiment, a script tag checker, and a JSON data block demo.
Learn the HTML style element: how to write CSS directly inside your page, when that is better than an external file, how the order of rules decides which one wins, and how a Content-Security-Policy can block inline styles. Includes a live CSS editor, a cascade-order lab, and a real CSP experiment.
Learn how to write great HTML page titles: where the title shows up, how long it should be, how to structure it for search results and screen readers, what characters are safe, and how to update it in single-page apps. Includes a live tab and search-result preview.
Learn the viewport meta tag: why phones need it, what width=device-width and initial-scale=1 do, why you should never block zoom, safe-area settings for notched phones, and how it connects to responsive CSS. Includes a live viewport reader and a mobile page simulator.
Learn how to keep a page safe when it embeds content you did not write: the risks of scripts, iframes and widgets, Content-Security-Policy, Subresource Integrity, iframe sandbox, Permissions-Policy, referrer and link rules, consent and privacy, click-to-load, auditing, and incident planning, with live demos.
Capture hours, minutes, and seconds using input type='time' with native time pickers and step granularity configuration.
Learn how to write page titles that search engines understand and people want to click: matching search intent, placing keywords naturally, choosing patterns for different page types, handling brand names and separators, avoiding stuffing and clickbait, and knowing why search engines sometimes rewrite titles. Includes a title builder, a title duel quiz, and a site-wide title audit.
Learn Twitter Card tags, used by X for link previews: the card types, twitter:card, title, description, image, alt text and handles, how they fall back to Open Graph, image sizes, caching, and why robots.txt must allow the crawler. Includes a card builder with previews, a fallback lab that shows which tag wins, and a live Twitter Card checker.
Learn the Web Content Accessibility Guidelines (WCAG): the four principles, the three conformance levels A, AA and AAA, how success criteria work, the rules beginners meet most, and what is new in WCAG 2.2. Includes a searchable success-criteria explorer, a live text-spacing test, and a level drill.
What is HTML? Learn what HTML stands for, how it works, what tags and elements are, and why every website on the internet depends on it. A simple, hands-on guide for beginners worldwide.
Learn why semantic HTML matters: how browsers turn markup into an accessibility tree, why a real button beats a clickable div, how semantic elements help screen readers, keyboard users, search engines, and teammates, common myths, and a step-by-step refactor from div soup to meaningful markup, with live examples.