HTML Documentation
Concise, example-driven HTML reference. Read the concept, see the code, then practice it in a Coddy journey.
Start a guided HTML journeyGetting Started
- Doctype`<!DOCTYPE html>` is the first line of every HTML document. It tells the browser to render the page in standards mode instead of quirks mode. Learn the syntax, what old doctypes trigger, and how to check the mode.
- TagsHTML tags mark up content so the browser knows what each part is: a heading, a paragraph, a link, an image. Learn how tags and elements work, which tags have no closing tag, how nesting works and which tags you will use most.
- AttributesAttributes add information to an HTML element: where a link goes, what an image shows, which CSS class applies. Learn the syntax, the global attributes every element accepts, class and id, boolean attributes and data-* attributes.
- CommentsAn HTML comment is text between <!-- and --> that the browser does not display. Learn the syntax, multi-line comments, commenting out code, the editor shortcut, why comments cannot be nested, and why they are never private.
- DivThe <div> tag is a generic block container with no meaning of its own. Learn how to group content with it, style it with a class, build layouts with divs and flexbox, and when a semantic tag or a button is the better choice.
- SpanThe <span> tag is a generic inline container: it wraps a few words inside a line so you can style or script them without breaking the line. Learn how to use it, how it differs from div, and when a more specific tag fits better.
Text
- HeadingsHTML has six heading levels, <h1> to <h6>, that give a page its outline. Learn the default sizes, how to order headings, how many h1 tags to use, how to change their size with CSS and how screen readers use them.
- Line BreakUse <br> to start a new line inside a block of text. Learn when <br> is right and when a paragraph is better, how to keep newlines from your text, how to let long words break with <wbr>, and how to stop a line from breaking.
- SpaceBrowsers collapse any run of spaces in HTML into one. Learn how to add extra spaces with , what a non-breaking space does, how to keep spaces and tabs with <pre> and white-space, and when CSS spacing is the better tool.
- Bold and ItalicsMake text bold in HTML with <strong> or <b>, and italic with <em> or <i>. Learn which tag to use when, how to combine bold and italic, and how to make text bold or italic with CSS instead.
- UnderlineUnderline text in HTML with <u> or CSS text-decoration, and strike it through with <s> or <del>. Learn what each tag means, how <ins> and <del> mark edits, and why underlining text that is not a link confuses readers.
- SuperscriptWrite superscript text with <sup> and subscript text with <sub>: exponents, ordinals, footnote markers and chemical formulas. Learn the common uses, how to stop them from spreading lines apart, and when a Unicode character or MathML fits better.
- Horizontal LineDraw a horizontal line in HTML with the <hr> tag. Learn what it means, how to change its color, thickness, width and style with CSS, how to build a divider with text in the middle, and how to make a vertical line.
- Center TextCenter text in HTML with the CSS text-align: center property. Learn where to put it, why it does not work on a span, how to center text vertically in a box, how to align text to the start, end or both edges, and how to indent paragraphs.
Links and Images
- Links (a href)How the <a> element makes links: the href attribute, absolute and relative URLs, jumping to a section of the page with #id, download links, card links, and the mistakes that break them.
- Open Link in New TabAdd target="_blank" to a link to open it in a new tab. This page covers rel="noopener" and noreferrer, telling users a link opens a new tab, the other target values, and doing it from JavaScript.
- Email Links (mailto)Make a link that opens a new email with href="mailto:", fill in the subject, body, cc and bcc, encode them correctly, and make click-to-call links with tel: and sms:.
- Button LinkThe right way to make a button that goes to another page is a link styled as a button. See why a button inside a link and onclick navigation break, when a form button is the right choice, and how to style and disable link buttons.
- ImagesHow to add an image in HTML with the <img> tag: src and alt, setting the image size with width and height, responsive images, cropping with object-fit, captions with figure, lazy loading, and the gap under images.
Lists and Tables
- ListsHow to make lists in HTML: bullet points with <ul>, numbered lists with <ol> (start, reversed, letters and Roman numerals), nested lists, description lists, and styling or removing the bullets with CSS.
- TablesHow to make a table in HTML: rows with <tr>, cells with <td>, header cells with <th> and scope, captions, thead, tbody and tfoot, zebra stripes, and tables that scroll on small screens.
- Table BorderHow to add borders to an HTML table with CSS: single lines with border-collapse, border-spacing, row lines only, inner borders only, rounded corners, and why the border attribute is obsolete.
- Colspan and RowspanMerge table cells across columns with colspan and down rows with rowspan. Learn how to count cells so the table stays square, build grouped headers, and keep spanned tables readable for screen readers.
Forms
- FormsHow to build a form in HTML: the form element, name attributes, action and method (GET vs POST), grouping with fieldset and legend, built-in validation with required and pattern, and handling the submit in JavaScript.
- Input TypesEvery type of the HTML <input> tag in one place: text, email, password, number, range, date and time, color, file, hidden and the rest, with what each one validates, the keyboard it opens on phones, and the attributes they share.
- ButtonHow to make a button in HTML with the <button> element: the three types (submit, button, reset), sending a value with the form, disabled buttons, icons, and CSS styling that keeps the focus ring.
- CheckboxHow to make a checkbox in HTML with <input type="checkbox">: labels, the checked attribute, what the form sends when it is checked and when it is not, groups of checkboxes, select all with the indeterminate state, and styling.
- Radio ButtonHow radio buttons work in HTML: grouping with the name attribute, a default choice with checked, required groups, reading the selected value in JavaScript, keyboard behavior, and styling them as custom circles or cards.
- Select DropdownHow to make a dropdown list in HTML with <select> and <option>: values, a default or placeholder option, required, option groups, multiple selection, reading and setting the value in JavaScript, and styling the arrow.
- TextareaHow to make a multi-line text field with <textarea>: rows and cols, default text between the tags, resizing and auto-growing, maxlength with a character counter, line breaks in the submitted text, and styling.
- LabelHow the <label> element names a form field: connecting it with for and id or by wrapping, the bigger click target for checkboxes and radios, hints and error messages, hidden labels, and the mistakes that break the connection.
Semantic HTML
- Semantic HTMLSemantic HTML means choosing tags for what the content is, not how it looks. Learn the semantic layout tags (header, nav, main, article, aside, footer), what they give screen readers and search engines, and how to check your page structure.
- HeaderThe <header> element holds the introduction of a page or of a section: a logo, a title, navigation, a byline. Learn how to build a site header, how <header> differs from <head> and headings, how to use it inside articles, and how to make it sticky.
- FooterThe <footer> element closes a page or a section: copyright, contact details, links, author info. Learn how to build a site footer with link columns, how to keep it at the bottom of a short page, and how footers work inside articles.
- NavThe <nav> element marks a block of major navigation links. Learn how to build a navigation bar with <nav> and a list, how to mark the current page, how to label several navs on one page, and how to make a mobile menu toggle.
- SectionThe <section> element groups content on one theme under its own heading. Learn when to use <section>, when <article> or <div> is the better choice, how the three nest, and how a labelled section becomes a landmark.
Head and Meta Tags
- Title TagThe <title> element names the page in the browser tab, in bookmarks and in search results. Learn where it goes, how long it should be, how it differs from <h1> and the title attribute, and how to change it with JavaScript.
- Meta ViewportThe viewport meta tag tells phones to lay the page out at the width of the screen instead of a desktop width. Learn the standard tag, what each value does, why responsive CSS depends on it, and which values to avoid.
- RedirectRedirect one page to another with a meta refresh tag in plain HTML, with JavaScript, or on the server. Learn the meta refresh syntax, how to auto refresh a page, why a server 301 redirect is the better choice, and what search engines do with each.
- FaviconA favicon is the small icon in the browser tab. Learn the link tag that adds one, which files and sizes to ship (ICO, SVG, PNG, apple-touch-icon), how to make an SVG or emoji favicon, how to change it with JavaScript, and why an old one keeps showing.
- lang AttributeThe lang attribute tells browsers, screen readers and translation tools what language your content is in. Learn where to put it, which codes to use (en, en-US, pt-BR), how to mark a phrase in another language, and the visible things it changes.
Media and Interactive
- iframe TagThe <iframe> element shows another web page inside yours. Learn the attributes you need (src, title, width, height), how to embed YouTube videos and maps, how to make an iframe responsive, how sandbox limits what it can do, and why some sites refuse to load in one.
- Video TagThe <video> element plays video files with the browser's own player. Learn the markup, the attributes that matter (controls, autoplay, muted, loop, playsinline, poster, preload), fallback formats with <source>, captions with <track>, responsive sizing and controlling playback with JavaScript.
- Audio TagThe <audio> element plays sound files with the browser's built-in player. Learn the markup, the attributes (controls, autoplay, loop, muted, preload), which formats to use, why autoplay with sound is blocked, and how to build your own play button with JavaScript.
- Details and SummaryThe <details> and <summary> elements make a collapsible section with no JavaScript: the summary is always visible and clicking it shows or hides the rest. Learn the markup, the open and name attributes, accordions, styling the arrow, and the toggle event.
