Text Content

Description: The <h1> element is used for the main title or top heading of a page or section, setting it apart as the most important. Search engines and accessibility tools often use <h1>to understand the main topic of the page.

Heading Two

Explanation: The <h2> tag represents a second-level heading, commonly used to define subtopics within a section. It’s useful for structuring content hierarchically.

Heading Three

The <h3> element is a third-level heading, commonly used under <h2>headings to further structure content. It aids in creating a well-defined hierarchy.

Heading Four

The <h4> element is a fourth-level heading, used for subdivisions under <h3> headings for deeper organizational structure.

This is a typical paragraph element. Paragraphs, <p>, contain blocks of text and provide logical breaks between sections or topics within your content.

Heading Five

The <h5> element represents a fifth-level heading, used for very specific sub-sections under <h4> headings in detailed hierarchies.

Heading Six

The <h6> element is the sixth-level heading, useful for the finest level of headings when very specific sub-sections are needed.

Descriptive List

A descriptive list (created with the <dl>, <dt>, and <dd> tags) is used to define terms and their descriptions in a structured way. It’s helpful for glossaries, FAQs, or any list where you want to pair a term with its description.

Tardis: A phone booth, bigger on the inside, that travels anywhere and any time.
Tree: A large plant.

Preformatted Code

          
<ul>
 <li>One</li>
 <li>Two</li>
 <li>Three</li>
</ul>

Blockquote

The <blockquote> element is used for large quotations from other sources, often displayed with indentation. The <cite> tag adds a citation for the quote.

This is the citation for the quote above.

Ordered List

Item 01
Item 02
Item 03
Item 04

Unordered List

A thing
Another thing
There's a thing here too
The last thing

Mixed List

An unordered list
- A thing
- Another thing
- There's a thing here too
- The last thing
Item 02
Another unordered list
- A thing
- An ordered list
  1. Item 01
  2. Item 02
  3. Item 03
  4. Item 04
- There's a thing here too
- The last thing
Item 04

Inline Elements

Links

This is an internal link.

This is an external link.

This is an email link.

This is a link to a PDF.

This is a link to a .zip file.

Abbreviation

Abbreviation: HTML.

Inline Code

This is code: cd ../styles/css

Definition

HTML is the standard markup language for creating web pages.

Strong Text

This is strong text.

Emphasis

This text is emphasized.

Delete, Insert, Strike, and Marked (Highlighted)

You can indicate that ~~this text has been deleted~~ and replaced with this text. ~~Strike~~ is different from deleting; it indicates something is no longer relevant. Text can also be highlighted.

Small Text

Small text is suitable for information such as disclaimers and copyright notices.

Subscript and Superscript

H₂O

Here lies the 2^nd fastest gun in the West.

Keyboard Input

On a Mac, press command (⌘) + s to save a document.

Inline Quote

What is an inline quote? Aluki asked.

Sample Computer Output

⌘ + s + shift

Please select a destination to save your file.

Time

Joe Strummer: August 21, 1952 to December 22, 2002

Variables

The area of a rectangle is width x length.

Multimedia

Image

Figure

The <figure> element is used to group content, such as images, illustrations, charts, or code snippets, along with a descriptive caption. It provides a semantic structure, which helps browsers and assistive technologies understand that the content inside <figure> and <figcaption> are related.

Looking up at a building covered in multi-colored panels — This is a caption for the image inside a figure element.

Picture

The <picture> element is used to provide multiple versions of an image for different screen sizes or device capabilities. It allows for responsive images by defining various <source> elements, each with different media conditions and image files. When the conditions of a <source> are met, the browser loads the specified image from its <srcset>. If none match, it defaults to the image in the <img> tag, ensuring compatibility across devices.

Audio

Impact Moderato by Kevin McLeod

Video

Embedded Content

Iframe

The <iframe> element embeds external content like videos or maps in a page. Attributes like <width> and <height> set its size, and <allow> enables permissions like fullscreen or autoplay.

Experimental Moves from Deekay.

Object

The <object> element embeds external content, like PDFs or multimedia, into a webpage. It uses the <data> attribute for the file URL and <type> to specify the content type. Fallback content, like a download link, can be added if the file doesn’t display.

SVG

Interactive Elements

Details

The <details> element creates a collapsible section that users can expand to view additional information. The <summary> tag provides a visible label for the content within.

Secondary colors

The resulting color when two primary colors are mixed.

Tables

The <table> element organizes data into rows and columns, making it useful for displaying structured information.

This is the table caption. What happens when we mix colors?
	Red	Blue	Yellow
Red	Red	Violet	Orange
Blue	Violet	Blue	Green
Yellow	Orange	Green	Yellow

Form Elements

Elements for Selecting

Data List

The <datalist> element provides a dropdown list of predefined options for an <input> field. It enhances user input by offering suggestions while still allowing custom entries.

Choose a color:

Select List

The <select> element creates a dropdown menu, allowing users to choose from a list of options. Each option is defined by an <option> tag within the <select>.

Choose a type of paint:

Option Group

The <optgroup> element groups related options within a <select> dropdown, providing labels for each group to improve organization and readability.

Choose a color:

Input Types

Button

Checkbox

Red

Blue: Checked

Color Picker

Pick a color:

Date

Select a date:

Date-Time (Local)

Select a date and time:

Email

Enter your email address:

File Upload

Upload a file:

Multiple File Upload

Upload files:

Image

Uses an image to submit the form. This acts like a submit button.

Month

Enter YYYY-MM:

Number

The <input type="number> element creates a field for entering numeric values, often with up/down controls and range limits. It will open the number entry on mobile.

Enter a number between 0 and 5:

Password

The <input type="password"> element creates a field for entering a password, hiding the characters for privacy.

Enter a password:

Radio

Use radios when a use can only select one thing

Red

Green

Blue

Yellow: Checked

Range

The <input type="range"> element creates a slider control for selecting a value within a specified range.

Enter something between 0 and 10:

Search

The <input type="search"> element creates a search field, optimized for entering search queries.

Search for something:

Telephone Number

The <input type="tel"> element creates a field for entering a telephone number, often with mobile-optimized input.

Enter a phone number:

Text Input

Text input:

Text Input (Required)

Text input (required):

Time

Enter a time:

URL

Enter a URL:

Week

Choose a week:

Other Form Elements

Meter

The <meter> element represents a scalar measurement within a known range, such as a grade or progress level.

Grade:

Progress

Progress: 75%

Textarea

Enter some text here:

Submit

The submit button should be in the input type section, but it's at the bottom because that's where we typically expect to see it.