Skip to main content

Documentation Index

Fetch the complete documentation index at: https://devtools.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

What is HTML?

HTML (HyperText Markup Language) is the standard markup language used to create web pages. It defines the structure and content of a webpage, telling browsers how to display text, images, and other media. HTML uses a series of elements, represented by tags, to mark up different parts of content.
HTML is not a programming language; it’s a markup language that defines the structure of your content.

How HTML Works

HTML documents are plain text files with a .html extension. They consist of elements that are defined by tags. Browsers read HTML documents and render them into visible or audible web pages.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My First HTML Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my first HTML page.</p>
  </body>
</html>

HTML Document Structure

Every HTML document follows a basic structure:
1

DOCTYPE Declaration

<!DOCTYPE html> tells the browser that this is an HTML5 document.
2

HTML Element

The <html> element is the root element that contains all other elements.
3

Head Section

The <head> element contains meta-information about the document, such as its title, character encoding, and links to external resources.
4

Body Section

The <body> element contains all the content that is visible on the webpage.

Basic HTML Elements

HTML provides a wide range of elements to structure content. Here are some of the most common ones:

Headings

HTML offers six levels of headings, from <h1> (most important) to <h6> (least important).
<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>

Paragraphs

The <p> element defines a paragraph of text.
<p>
  This is a paragraph of text. HTML will automatically wrap the text and adjust
  it to the screen size.
</p>
The <a> (anchor) element creates hyperlinks to other web pages or resources.
<a href="https://example.com">Visit Example.com</a>

Images

The <img> element embeds images in your webpage.
<img src="image.jpg" alt="Description of the image" />
Always include the alt attribute in your image tags. It provides a text description for screen readers and displays if the image fails to load.

Lists

HTML supports ordered lists (<ol>), unordered lists (<ul>), and definition lists (<dl>).
<!-- Unordered list -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<!-- Ordered list -->
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

HTML Attributes

Attributes provide additional information about HTML elements and are always specified in the start tag.
<element attribute="value">Content</element>
Common attributes include:
  • id: Specifies a unique identifier for an element
  • class: Specifies one or more class names for styling with CSS
  • style: Contains inline CSS styling
  • src: Specifies the URL of external resources like images
  • href: Specifies the URL of a linked resource

HTML5 Features

HTML5 introduced many new features and elements that make it easier to create modern web applications:

Semantic Elements

Elements like <header>, <footer>, <article>, and <section> that clearly describe their meaning.

Audio and Video

Native support for multimedia with <audio> and <video> elements.

Canvas

The <canvas> element for drawing graphics via JavaScript.

Form Enhancements

New input types like email, date, range, and more.

Best Practices

  • Use semantic HTML elements to improve accessibility and SEO
  • Keep your HTML structure clean and well-organized
  • Validate your HTML using tools like the W3C Validator
  • Ensure your pages are accessible to all users
  • Separate structure (HTML), presentation (CSS), and behavior (JavaScript)

Next Steps

Now that you understand the basics of HTML, you can: