Menu
The dialog tag defines a dialog box, subwindow, or other interactive component. Syntax The <dialog> element can make it simple to create popup modals. <dialog open>This modal window is open.</dialog> Attributes open Designates that the dialog element is active.
The div tag, or Content Division element, specifies a division or section in a document. Syntax Any type of content can be used inside the <div> tag. It is then styled easily with CSS by utilizing the class or id attribute. <div class="divExample"> <h1>This is a title.</h1> <p>This is some additional content.</p> </div>
The dl tag, or Description List element, encloses a list of groups of terms (that are specified using the <dt> tag) and descriptions (inside the <dd> tag). Syntax Example: <dl> <dt>The term</dt> <dd>Description of the term</dd> <dt>The second term</dt> <dd>Description of the second term</dd> </dl>
The dt tag, or Description Term element, specifies a term/name in a description list. Syntax Use the <dt> tag in conjunction with the <dl> (description list) and <dd> (description details) tags. <dl> <dt>The term</dt> <dd>The description of the term</dd> <dt>Second term</dt> <dd>The description of the second term</dd> </dl>
The em tag, or Emphasis element, is used to designate emphasized text. Browsers typically render the enclosed text in italics. Syntax A screen reader will pronounce the text inside the <em> tag using verbal stress. <p>This is <em>really</em> important!</p>
The embed tag, or Embed External Content element, defines a container for an external resource, like a video, picture, web page, etc. Syntax Use the various attributes to designate the dimensions and ingredients of the container. Note: it is better to use the <img> tag for a picture, the <iframe> tag for HTML, and the […]
The fieldset tag is used in a form to group related elements together. Syntax Use the <fieldset> tag to draw a box around related elements. <form action="example-action.php"> <fieldset> <label for="firstname">First name: </label> <input type="text" id="firstname" name="firstname"> <label for="lastname">Last name: </label> <input type="text" id="lastname" name="lastname"> </fieldset> </form> Attributes disabled Disables the grouped elements. form Provides the […]
The figcaption tag, or Figure Caption element, defines a caption for the <figure> tag. Syntax The <figcaption> tag can be placed as the first or last child of the <figure> tag. <figure> <img src="picture.jpg" alt="A picture"> <figcaption>This is the caption for this picture.</figcaption> </figure>
The figure tag is used for self-contained content, like illustrations, diagrams, photos, etc. Syntax The <figure> tag is related to the main flow but its position is independent, meaning if it is removed it should not affect the flow. The <figcaption> tag can be used inside the <figure> tag to add a caption for it. […]
The footer tag defines a footer for its nearest parent element in a content section. Syntax The <footer> typically contains copyright data, author information for the parent section, or related links. <article> <h1>Article title</h1> <p>This is the article content.</p> <footer> <p>Written by John Doe</p> </footer> </article>
The form tag creates an HTML form for user input.. Syntax There are a number of elements that can be enclosed inside a form tag, such as <input>, <textarea>, <select>, <button>, and more. <form action="/action-page.php" method="get"> <label for="email">Email Address: </label> <input type="email" id="email" name="email"> <input type="submit" value="Submit"> </form> Attributes accept-charset Defines the character encodings used […]
The h1 to h6 tags, or Heading elements, define HTML headings, with <h1> being the most important and <h6> being the least. Syntax Heading elements should not be used to resize text. This should be done using CSS instead. There should only be one <h1> tag per page, and heading levels should not be skipped. […]
The head tag, or Document Metadata element, contains metadata and resides after the <html> tag and before the opening <body> tag in a document. Syntax Metadata is read by machines and not displayed. It is information about the current document, such as the title, character set, styles, scripts, etc. These tags can be used inside […]
The header HTMLtag is a container for introductory content, such as a logo and a navigation menu. It can also be used in multiple areas on the page, like inside an <article> tag, but it cannot be placed within a <footer>, <address>, or another <header> tag. Syntax Here’s an example of a document with multiple headers: […]
The hr HTML tag, or Horizontal Rule element, is rendered as a horizontal line to represent a thematic change or break in a document. Syntax Example: <h1>The title of the document</h1> <p>Some content that talks about a certain subject.</p> <hr> <p>Some content that that discusses a different topic.</p>
The html tag, or Document/Root element, is used as the top level, or root, of an HTML document. Syntax The <html> tag represents the container of all other HTML elements besides the <!DOCTYPE> tag. <!DOCTYPE html> <html lang="en"> <head> <title>This is the document's title</title> </head> <body> <h1>This is a heading</h1> <p>This is some body content.</p> […]
The i tag, or Idiomatic Text element, is wrapped around part of a text that is in a different voice or mood. It typically renders in italic. Syntax The <i> tag should only be used when there is not a more appropriate semantic element (<em>, <strong>, <mark>, <cite>, or <dfn>). <p>This text is <i>different</i> than […]
The iframe tag, or Inline Frame element, is used to embed another HTML document within the current HTML document. Syntax Best practice is to include the title attribute for the <iframe> so it can be used by screen readers.. <iframe src="https://webdeveloper.com" title="WebDeveloper.com - Serving the #webDeveloper community"></iframe> Attributes allow Designates the <iframe> feature policy. allowfullscreen […]
The img tag, or Image Embed element, embeds an image in an HTML document. Syntax There are two attributes that are required for the <img> tag: src, which provides the URL of the image, and alt, which provides an alternate text for the image. Alt text is displayed if the image cannot be displayed for […]
The input HTML tag is used inside a <form> tag to create an interactive element. Syntax Depending on the type attribute that is used, the <input> tag can be used and displayed in a number of ways. Input types available are: <input type="button"> <input type="checkbox"> <input type="color"> <input type="date"> <input type="datetime-local"> <input type="email"> <input type="file"> <input […]
The ins tag is used to designate that the text wrapped inside it has been inserted into a document. Syntax Use with the <del> tag to markup deleted text that has been replaced. <p>This is some <del>old</del> <ins>new</ins> text in a paragraph.</p> Attributes cite Provides a URL to a document that explains why the text […]
The kbd tag, or Keyboard Input element, is used to designate some type of inline text that is a keyboard input. The browser typically renders the content inside in the default monospace font. Syntax Example: <p>In Windows, you can press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy selected text to the clipboard.</p> */
The label tag, or Input Label element, is used to define a label for the following elements: <input type="checkbox"> <input type="color"> <input type="date"> <input type="datetime-local"> <input type="email"> <input type="file"> <input type="month"> <input type="number"> <input type="password"> <input type="radio"> <input type="range"> <input type="search"> <input type="tel"> <input type="text"> <input type="time"> <input type="url"> <input type="week"> <meter> <progress> <select> <textarea> […]
The legend tag, or Field Set Legend, is used to define a caption for its parent <fieldset> element. Syntax Example: <form action="example-action.php"> <fieldset> <legend>Your Name:</legend> <label for="firstname">First name: </label> <input type="text" id="firstname" name="firstname"> <label for="lastname">Last name: </label> <input type="text" id="lastname" name="lastname"> </fieldset> </form>