An HTML Tag Library


Text Related

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eleifend quam adipiscing vitae proin sagittis nisl. Id faucibus nisl tincidunt eget nullam. Turpis cursus in hac habitasse platea dictumst quisque. In pellentesque massa placerat duis ultricies lacus. Pulvinar proin gravida hendrerit lectus. Dui vivamus arcu felis bibendum ut tristique. Et netus et malesuada fames ac turpis egestas maecenas pharetra. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Lectus mauris ultrices eros in cursus turpis massa tincidunt dui. Parturient montes nascetur ridiculus mus mauris. Est lorem ipsum dolor sit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eleifend quam adipiscing vitae proin sagittis nisl. Id faucibus nisl tincidunt eget nullam. Turpis cursus in hac habitasse platea dictumst quisque. In pellentesque massa placerat duis ultricies lacus. Pulvinar proin gravida hendrerit lectus. Dui vivamus arcu felis bibendum ut tristique. Et netus et malesuada fames ac turpis egestas maecenas pharetra. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Lectus mauris ultrices eros in cursus turpis massa tincidunt dui. Parturient montes nascetur ridiculus mus mauris. Est lorem ipsum dolor sit.

Heading 2

A scelerisque Ctrl + C purus semper eget. Aliquam vestibulum morbi blandit cursus risus. Tortor vitae purus faucibus ornare suspendisse. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque elit. Libero volutpat sed cras ornare arcu dui. Nulla malesuada pellentesque elit eget gravida cum sociis natoque. Ut diam quam nulla porttitor massa id neque. Tortor condimentum lacinia quis vel eros donec ac odio. Sit amet consectetur adipiscing elit pellentesque habitant. Porttitor lacus luctus accumsan tortor posuere ac. Risus in hendrerit gravida rutrum. Faucibus interdum posuere lorem ipsum dolor. Ipsum dolor sit amet consectetur adipiscing elit duis tristique. A scelerisque purus semper eget duis at tellus. Duis at tellus at urna condimentum mattis pellentesque id nibh.

Heading 3

Sit amet nulla facilisi morbi. Augue mauris augue neque gravida. Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Mi tempus imperdiet nulla malesuada pellentesque. Vivamus arcu felis bibendum ut tristique et egestas quis. Eu facilisis sed odio morbi. Adipiscing bibendum est ultricies integer quis auctor elit. Et sollicitudin ac orci phasellus egestas. Nullam eget felis eget nunc lobortis mattis aliquam faucibus purus. Porta non pulvinar neque laoreet suspendisse interdum consectetur libero. Ac feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper. Eget nunc scelerisque viverra mauris in aliquam sem. Duis ultricies lacus sed turpis tincidunt id aliquet risus feugiat.

<abbr> abbreviation

The WHO was founded in 1948.

<cite> citation

The Scream by Edward Munch. Painted in 1893.

<q> short quotation (quote)

WWF's goal is to: Build a future where people live in harmony with nature. We hope they succeed.

Blockquote (blockquote)

This is a blockquote.

<s> strike-out

Only 50 tickets left! - SOLD OUT!


List Related

<ul> unordered list

  • List Item
  • List Item
  • List Item

<ol> ordered list

  1. List Item
  2. List Item
  3. List Item

<menu> menu

  • Coffee
  • Tea
  • Milk
  • Definitions (dl, dt, dd)

    Coffee
    Black hot drink
    Milk
    White cold drink

    Click

    <button>

    <hr> horizontal rule



    Code-related

    Here are the HTML tags related to presenting code:

    <code>

    console.log('Hello, world!');

    <pre>

            function helloWorld() {
                console.log('Hello, world!');
            }
            

    <samp>

    Output: Hello, world!

    <kbd>

    Ctrl + C

    <var>

    x = y + 2;

    <tt> (deprecated)

    Teletype text

    <marquee>

    marquee

    HTML Tags - media-related

    img, picture, vidoe, audio, iframe, canvas... etc

    Media-related

    Here are some HTML tags related to media:

    Examples:

    <img>

    Example Image

    <picture>

    Example Image

    <iframe>

    <iframe> video

    <video>

    <audio>

    <canvas>

    Example of <figure> & <figcaption>:

    Alt Tag
    Fig.1 - Trulli, Puglia, Italy.

    The caption element

    Monthly savings
    Month Savings
    January $100
    February $50

    Tables

    Header 1 Header 2 Header 3 Header 4
    Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3 Row 1, Cell 4
    Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3 Row 2, Cell 4
    Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3 Row 3, Cell 4

    Forms






    Details and Summary

    More Information

    This is additional information that is hidden by default and can be revealed by clicking on the summary.

    More Information

    This is additional information that is hidden by default and can be revealed by clicking on the summary.

    Details and Summary

    More Information

    This is additional information that is hidden by default and can be revealed by clicking on the summary.

    • Item 1: Detailed description of item 1.
    • Item 2: Detailed description of item 2.
    • Item 3: Detailed description of item 3.
    • Item 4: Detailed description of item 4.

    Details and Summary (nested)

    More Information 2

    This is additional information that is hidden by default and can be revealed by clicking on the summary.

    Subsection 1

    Details for subsection 1.

    Subsection 2

    Details for subsection 2.

    Subsection 3

    Details for subsection 3.

    Popover Example (no real html functionality... hmm)

    Hover over me
    This is the popover content. It appears when you hover over the element.

    Anchor Positioning

    anchor
    target

    Dialog Example (modal...) lightbox..

    Dialog Title

    This is a dialog box. It can be used to display information or prompt the user for input.

    Popover - The popover Attribute

    Click the button and it will toggle between showing and hiding the popover element.

    Hello