The li tag, or List Item element, is used to define a list item inside ordered lists (<ol>), unordered lists (<ul>), and in menu lists (<menu>). Syntax In <ul> and <menu>, list items are rendered with bullet points. In <ol>, list items are rendered with numbers or letters. <ol> <li>A list item in an ordered […]
The link tag, or External Resource Link element, provides the relationship between the current document and an external resource, such as CSS style sheets, favicon, JavaScript file, etc. Syntax The <link> tag only contains attributes and does not wrap around anything. <head> <link rel="stylesheet" href="/assets/css/style.css"> </head> Attributes crossorigin Determines how the <link> tag handles cross-origin […]
The main tag wraps around the main content of the document. The content inside it should be unique and not be anything that repeats across documents (like sidebars, navigation menus, etc.). Syntax There should only be one <main> tag per document, and it should not be inside any of the following: <article>, <aside>, <footer>, <header>, […]
The map tag, or Image Map element, is used to designate an image map (an image with clickable areas). Syntax The <map> tag must have the required name attribute to associate it with the <img>‘s usemap attribute. Inside the <map> tag are <area> tags that provide the coordinates of clickable areas in the image map. […]
The mark tag, or Mark Text element, designates text that should be highlighted or marked. Syntax Example: <p>This particular text should be <mark>highlighted</mark>.
The meta is used to provide metadata (information about data) about the current document. Syntax <meta> tags always go inside the <head> tag. They will not be displayed on the page but are read by machines. <head> <meta charset="UTF-8"> <meta name="description" content="Description of the document"> <meta name="keywords" content="keyword, listed, here"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> […]
The meter tag, or HTML Meter element, is used to designate a scalar measurement within a known range, or a fractional value. Syntax For best accessibility practices, the <label> tag should always be added. For progress bars, use the <progress> tag instead of <meter>. <label for="first_meter">First Meter:</label> <meter id="first_meter" value="3" min="0" max="5">3 out of 5</meter> […]
The nav tag, or Navigation Section element, is wrapped around a group of navigation links. Syntax The <nav> tag should only be used for major blocks of navigation links and not any other links in the document. <nav> <a href="https://example.com">Home</a> <a href="https://example.com/about/">About</a> <a href="https://example.com/projects/">Projects</a> <a href="https://example.com/contact/">Contact</a> </nav>
The noscript tag provides alternate content that is displayed when a user has disabled scripts in their browser or if the browser does not support script.. Syntax When used inside the <body> tag, the content inside <noscript> tags is displayed when scripts are turned off or not supported, but when used inside the <head> tag […]
The object tag, or External Object element, is used to designate a container for an external resource. Syntax If you are embedding an image, it is better to use the <img> tag. For embedding HTML the <iframe> tag should be used. For video or audio, the <video> or <audio> tags should be used. <object type="application/pdf" […]
The ol tag, or Ordered List element, is used to designated an ordered list, which can be either numerical or alphabetical. Syntax The <li> tag is used inside of the <ol> tag to designate each list item. <ol> <li>A list item in an ordered list</li> <li>Another list item in an ordered list</li> <li>And another list […]
The optgroup tag, or Option Group element, creates a group of related options or choices within a <select> tag. Syntax Group related options into smaller categorized lists to make them easier to handle for the user than single longer lists. <select name="colors" id="colors"> <optgroup label="Blue Colors"> <option value="blue">Blue</option> <option value="aqua">Aqua</option> <option value="sky">Sky</option> </optgroup> <optgroup label="Red […]
The option tag represents an option in a <select> list. Syntax <option> tags are inside of a <select>, <optgroup>, or <datalist> tag. <select name="colors" id="colors"> <optgroup label="Blue Colors"> <option value="blue">Blue</option> <option value="aqua">Aqua</option> <option value="sky">Sky</option> </optgroup> <optgroup label="Red Colors"> <option value="red">Red</option> <option value="red-orange">red Orange</option> <option value="fire">Fire</option> </optgroup> </select>
The output tag is used within a <form> tag to show a calculation’s result (typically one performed by a script). Syntax Example: <form oninput="a.value=parseInt(x.value)+parseInt(y.value)"> <input type="range" id="x" value="40"> + <input type="number" id="y" value="10"> = <output name="a" for="x y"></output> </form> Attributes for Using element_id, this attribute designates the relationship between the elements used in the calculation […]
The p tag, or Paragraph element, designates a paragraph. Syntax By default, browsers typically render paragraphs with a blank line before and after each <p> tag. <p>This is content within a paragraph tag.</p>
The picture tag is used to display one or more image sources with more flexibility to adjust to various screen sizes. Syntax The <picture> tag contains one or more <source> tags and one <img> tag. The browser renders the first <source> tag that matches the current viewport width. If none of the <source> tags match, […]
The pre tag, or Preformatted Text element, designates that the text within it is preformatted. The browser typically renders it in a fixed-width font. Syntax The text inside the <pre> tag preserves spaces and line breaks and is displayed exactly as written in the HTML source code. <pre> This is some text inside a pre […]
The progress tag, or Progress Indicator element, defines the completion progress of a task, such as download of a file. Syntax Be sure to use a <label> tag for best accessibility. <label for="download">Download's progress: </label> <progress id="download" value="50" max="100">50%</progress> Attributes max The total numerical value required by the task. Defaults to 1. value Numerical representation […]
The q tag, or Inline Quotation element, is used to define a short inline quotation. Use <blockquote> for longer quotations. Syntax Explain the syntax of this reference item and show an example in the code block below. Try to remove as much unnecessary items as possible. It’s important this is easy to process at a […]
The rp tag, or Ruby Fallback Parenthesis element, is used to display parentheses around ruby text in browsers that do not support ruby annotations. Syntax The optional <rp> tag is used with <ruby> and <rt>. <ruby> 漢 <rp>(</rp><rt>kan</rt><rp>)</rp> </ruby>
The rt tag, or Ruby Text element, provides an explanation or pronunciation of East Asian characters in a ruby annotation. Syntax The <rt> tag is used with <ruby> and <rp>. <ruby> 漢 <rp>(</rp><rt>kan</rt><rp>)</rp> </ruby>
The ruby tag, or Ruby Annotation element, is used to designate a ruby annotation. Syntax A ruby annotation is utilized when an explanation or pronunciation of East Asian typography characters is needed for the main text. The <ruby> tag is used with <rt> and <rp>. <ruby> 漢 <rp>(</rp><rt>kan</rt><rp>)</rp> </ruby>
The s tag, or Strikethrough element, is used to designate text that is no longer accurate or relevant. The text inside the <s> tag will be rendered with a line through it. Syntax Do not use the <s> tag for deleted text. Use the <del> tag instead. <p><s>This text is no longer relevant.</s></p> <p> This […]
The samp tag, or Sample Output element, displays text in the browser’s default monospace font and designates sample output from a computer program. Syntax Example: <p><samp>Your file was not found.</samp></p>