HTML Provides Structure

A Minimal HTML Document

HTML stands for **HyperText Markup Language**. It is the standard markup language used to describe the structure and meaning of content on the web. HTML is not a programming language because it does not provide general-purpose control flow or algorithms. Instead, it uses **elements** and **attributes** to describe content. A browser parses HTML and builds a document tree called the DOM (Document Object Model).

What Is HTML?

Elements and Attributes

An HTML **element** usually consists of an opening tag, content, and a closing tag. Attributes provide additional information about an element. For example, `<a href="/about">About</a>` contains an anchor element with an `href` attribute. Some elements are **void elements**, meaning they do not have closing tags, such as `<img>`, `<br>`, `<hr>`, `<input>`, and `<meta>`.

Elements, Tags, and Attributes

Document Skeleton

A well-formed HTML document generally contains `<!doctype html>`, an `<html>` root element, a `<head>` containing metadata, and a `<body>` containing document content. The `lang` attribute on `<html>` should identify the primary language of the document.

HTML Document Structure

Always Include DOCTYPE

The `<!doctype html>` declaration tells the browser to use modern standards mode. It is not an HTML element. Omitting the declaration can cause browsers to enter quirks mode, where historical rendering behavior may affect layout and CSS.

DOCTYPE and Standards Mode

Understand what HTML is, how documents are structured, and how browsers interpret HTML.

HTML Fundamentals

Heading Hierarchy

HTML provides six heading levels from `<h1>` through `<h6>`. Headings create a hierarchy for the document. Use headings based on semantic importance rather than visual size. CSS should control visual sizing.

Headings

Paragraph and Line Break

Use `<p>` for paragraphs. Use `<br>` only when a line break is semantically meaningful, such as within an address or poem. Do not use repeated `<br>` elements to create layout spacing; CSS is designed for that purpose.

Paragraphs and Line Breaks

Different Link Types

The `<a>` element creates hyperlinks. Its `href` attribute identifies the destination. Links can point to absolute URLs, relative paths, fragments, email addresses, or telephone numbers. Meaningful link text helps users and assistive technologies understand the destination.

Links and Navigation

HTML Lists

Use `<ul>` for unordered lists, `<ol>` for ordered lists, and `<li>` for list items. `<dl>`, `<dt>`, and `<dd>` are useful for terms and their descriptions.

Ordered, Unordered, and Description Lists

Inline Semantics

HTML provides inline semantic elements such as `<strong>`, `<em>`, `<mark>`, `<small>`, `<abbr>`, `<time>`, `<code>`, `<kbd>`, `<samp>`, and `<var>`. These elements communicate meaning rather than simply controlling appearance.

Inline Semantic Elements

Master headings, paragraphs, links, lists, quotations, code, and inline semantic elements.

Text and Content

Semantic Page

Semantic HTML uses elements whose names communicate their purpose. Examples include `<header>`, `<nav>`, `<main>`, `<section>`, `<article>`, `<aside>`, and `<footer>`. Semantic markup improves accessibility, search-engine understanding, maintainability, and document structure.

Why Semantic HTML Matters

The `<header>` represents introductory content for a page or section. `<nav>` identifies a major navigation block. `<footer>` represents footer information for a page or section. These elements can appear at different levels of the document where semantically appropriate.

Header, Navigation, and Footer

Content Grouping

`<article>` represents a self-contained piece of content that could stand independently. `<section>` represents a thematic grouping of content, usually with a heading. `<aside>` contains content tangentially related to the surrounding content.

Article, Section, and Aside

Build meaningful page structures using semantic layout elements.

Semantic HTML

Always Consider alt

Accessible Image

The `<img>` element embeds an image resource. The `src` attribute identifies the image, while `alt` provides alternative text. Decorative images can use an empty `alt=""` so assistive technologies can ignore them.

Images with img

Responsive Image

The `srcset` and `sizes` attributes allow browsers to choose an appropriate image resource based on viewport and device characteristics. The `<picture>` element allows art direction and format selection.

Responsive Images

Video

HTML provides native `<audio>` and `<video>` elements. The `controls` attribute exposes browser-provided playback controls. Multiple `<source>` elements can provide alternative media formats.

Audio and Video

Figure Caption

`<figure>` groups self-contained content such as an image, diagram, chart, or code example. `<figcaption>` provides a caption for the figure.

Figure and Figcaption

Learn images, responsive images, audio, video, captions, and embedded content.

Images and Multimedia

Basic Form

The `<form>` element represents an interactive section for submitting information. Its `action` specifies where data is sent and `method` determines the HTTP method used for submission. Common methods include GET and POST.

Form Fundamentals

Do Not Use Placeholder as a Label

Accessible Label

Every user-facing form control should have an accessible label. A `<label>` can be associated with an input through matching `for` and `id` attributes, or by wrapping the input.

Labels and Input Controls

Input Types

HTML provides specialized input types such as `email`, `password`, `number`, `date`, `url`, `tel`, `search`, `checkbox`, `radio`, and `file`. Using the appropriate type improves native validation, mobile keyboards, and accessibility.

HTML Input Types

Client Validation Is Not Security

Validated Form

HTML provides native validation attributes including `required`, `minlength`, `maxlength`, `min`, `max`, `pattern`, and type-specific constraints. Native validation improves basic client-side feedback but must not replace server-side validation.

Native Form Validation

Common Form Controls

Use `<select>` for choosing from predefined options, `<textarea>` for multiline text, and `<button>` for actions. Buttons should have an explicit or contextually correct type such as `submit`, `button`, or `reset`.

Select, Textarea, and Button

Build accessible forms with labels, inputs, validation, controls, and submission behavior.

Forms and User Input

Accessible Data Table

Tables represent data with meaningful row and column relationships. Core elements include `<table>`, `<tr>`, `<th>`, and `<td>`. Additional structural elements include `<caption>`, `<thead>`, `<tbody>`, `<tfoot>`, and `<colgroup>`.

HTML Tables

Sandboxed iframe

The `<iframe>` element embeds another browsing context inside a page. Common uses include maps, videos, and trusted external applications. When embedding untrusted content, use security controls such as `sandbox` where appropriate.

Embedding External Content

Represent tabular information correctly and understand embedded resources.

Tables and Embedded Content

Useful Head Metadata

The `<head>` contains metadata and resource references that describe the document. Common children include `<title>`, `<meta>`, `<link>`, `<style>`, and `<script>`.

The Head Element

Meta Tags

The `<meta>` element represents metadata that cannot be expressed through other head elements. Common examples include character encoding, viewport configuration, description metadata, and robots directives.

Link Relations

The `<link>` element connects the document to external resources or describes relationships. Common examples include stylesheets, canonical URLs, icons, alternate versions, and preload resources.

Understand document metadata, search-engine signals, social sharing metadata, and resource hints.

Head, Metadata, and SEO

Native HTML First

Accessible HTML allows people with different abilities and assistive technologies to understand and interact with web content. Native semantic HTML should be the first choice because browsers already expose meaningful accessibility information for standard elements.

Accessibility Fundamentals

Use a Button for Actions

Interactive functionality must be usable without a mouse. Native buttons, links, inputs, and form controls already provide keyboard interaction. Avoid replacing these controls with clickable generic elements unless there is a strong reason and all required behavior is implemented.

Keyboard Accessibility

ARIA Does Not Add Behavior

ARIA Expanded State

ARIA (Accessible Rich Internet Applications) provides additional semantics when native HTML cannot adequately represent a custom interface. Common attributes include `aria-label`, `aria-labelledby`, `aria-describedby`, `aria-expanded`, and `aria-hidden`.

ARIA Basics

Build accessible HTML using semantic elements, labels, keyboard-friendly controls, and appropriate ARIA.

HTML Accessibility

Native Disclosure

The `<details>` element creates a disclosure widget. `<summary>` provides the visible control used to open and close it. These elements provide native behavior without requiring JavaScript for basic disclosure interactions.

Details and Summary

Dialog Markup

The `<dialog>` element represents a dialog box or other interactive subwindow. It can be shown non-modally with `show()` or modally with `showModal()` through JavaScript. The `open` attribute indicates that a dialog is currently open.

The Dialog Element

HTML Template

The `<template>` element stores HTML that is not rendered immediately. Its contents can be cloned and inserted into the document using JavaScript. Templates are useful for reusable client-side fragments and Web Components.

Template Element

Using data-*

The `data-*` attribute convention allows developers to attach custom data to HTML elements. JavaScript can access these values through the element's `dataset` property.

Custom Data Attributes

Explore dialogs, templates, details, custom data attributes, content editing, and browser-integrated HTML features.

Advanced HTML

Defer and Async

Scripts can block HTML parsing depending on how they are included. `defer` downloads scripts while allowing parsing to continue and executes them after parsing. `async` downloads independently and executes as soon as available, so execution order should not be relied upon between async scripts.

Script Loading

Lazy Image

The `loading="lazy"` attribute can allow images and iframes to be deferred until they are near the viewport. This can reduce initial network and rendering work, particularly on pages with many below-the-fold resources.

Lazy Loading

Safer New-Tab Link

When opening external content in a new browsing context, developers should understand the security implications of `target="_blank"`. The `rel="noopener"` relationship prevents the opened document from accessing the opener through `window.opener`.

noopener and External Links

Optimize HTML loading and understand important security considerations for links, forms, iframes, and resources.

Performance and Security

Reusable Card Structure

Even without a frontend framework, HTML can be organized into reusable conceptual components such as navigation, cards, forms, articles, and footers. Good component boundaries should follow meaningful content or behavior rather than arbitrary wrapper elements.

Reusable HTML Structures

Progress and Meter

The `<progress>` element represents completion progress, while `<meter>` represents a scalar measurement within a known range. These elements communicate different semantics and should not be used interchangeably.

Validation Is Only One Layer

HTML validation tools can identify syntax and structural problems. Validation is useful, but valid markup alone does not guarantee accessibility, good UX, security, or correct application behavior. Testing should include keyboard navigation, screen readers where appropriate, responsive layouts, and real user workflows.

Validating HTML

Apply HTML knowledge to build maintainable, accessible, SEO-friendly modern pages.

Modern HTML Patterns

HTML stands for HyperText Markup Language. It is the standard markup language used to structure content and describe its semantics on the web. HTML defines elements such as headings, paragraphs, links, forms, images, tables, and semantic page regions.

1. What is HTML?

No. HTML is a markup language. It describes document structure and semantics but does not provide the general-purpose programming constructs associated with programming languages, such as functions, loops, and algorithmic control flow.

2. Is HTML a programming language?

HTML5 refers to the modern evolution of HTML and the collection of web platform capabilities standardized around HTML. It introduced or standardized many semantic elements and native capabilities such as audio, video, canvas, forms improvements, and more.

3. What is HTML5?

It tells the browser to use standards mode for the document. The modern HTML doctype is intentionally simple: `<!doctype html>`.

4. What is the purpose of <!DOCTYPE html>?

A tag is the markup syntax such as `<p>` or `</p>`. An element is the complete construct, including its opening tag, content, and closing tag when applicable. For example, `<p>Hello</p>` is a paragraph element.

5. What is the difference between an element and a tag?

Void elements are HTML elements that cannot have child content and do not use closing tags. Examples include `<img>`, `<input>`, `<br>`, `<hr>`, `<meta>`, and `<link>`.

6. What are void elements?

The Document Object Model is an object representation of a document that scripts and browser APIs can interact with. The browser parses HTML and creates a tree of nodes representing the document.

7. What is the DOM?

Semantic HTML uses elements that communicate the meaning or role of content. Examples include `<article>`, `<nav>`, `<main>`, `<header>`, and `<footer>`. Semantic markup improves structure, accessibility, maintainability, and machine understanding.

8. What is semantic HTML?

Both are generic containers. `<div>` is normally used as a block-level structural container, while `<span>` is an inline phrasing container. Neither adds meaningful semantics by itself.

9. What is the difference between div and span?

The `lang` attribute identifies the language of the element's content. Setting it on the root `<html>` element helps browsers, search engines, translation tools, and assistive technologies interpret the document correctly.

10. What is the purpose of the lang attribute?

`<strong>` conveys strong importance, while `<b>` draws attention without necessarily implying additional importance. Both may appear bold by default, but their semantics differ.

11. What is the difference between strong and b?

`<em>` represents stress emphasis, while `<i>` represents text set apart from normal prose for a reason such as a technical term, idiom, taxonomy, or alternate voice. Both may appear italic by default, but their meanings differ.

12. What is the difference between em and i?

`<section>` represents a thematic grouping of content, usually with a heading. `<article>` represents a self-contained piece of content that could potentially be distributed or understood independently.

13. What is the difference between section and article?

`<main>` represents the dominant content of the document. Content repeated across pages such as primary navigation and site-wide footers generally should not be placed inside main.

14. What is the purpose of the main element?

Alternative text provides a textual replacement for meaningful images when the image cannot be perceived or loaded. Screen readers can announce it, and it can communicate the image's purpose.

15. Why is alt text important?

GET submits form data as part of the request URL, making it suitable for many retrieval/search operations. POST sends the data in the request body and is commonly used for operations that create or modify server-side state. Neither should be treated as a substitute for authentication or authorization.

16. What is the difference between GET and POST in forms?

The `name` attribute identifies a successful form control in submitted form data. An input may have an id for DOM and label association, but without a suitable name its value generally will not be included in standard form submission.

17. Why is the name attribute important in forms?

Labels provide an accessible name for form controls and improve usability. Explicitly associating a label with an input also allows users to activate the input by selecting its label.

18. Why should labels be associated with inputs?

The placeholder attribute provides a short hint about the expected value of a form control. It disappears when the user enters data and should not be treated as a permanent label.

19. What is the purpose of placeholder?

The `required` attribute indicates that a form control must have a value before the browser allows normal form submission. It provides native client-side validation.

20. What does the required attribute do?

A disabled control is generally not editable, focusable, or included in normal form submission. A readonly control cannot normally be edited by the user but can remain focusable and its value can be submitted when applicable.

21. What is the difference between disabled and readonly?

A button inside a form defaults to submit behavior in common HTML usage unless another type is specified. `type="submit"` submits the form, `type="button"` is a generic action button, and `type="reset"` resets form controls to their initial values.

22. What is the difference between button types?

Checkboxes represent independent binary or multi-select choices. Radio buttons represent mutually exclusive choices within a group sharing the same name.

23. What is the difference between checkbox and radio inputs?

The `autocomplete` attribute provides hints about the type of information expected in a form control and allows browsers or password managers to provide appropriate stored values. Correct autocomplete tokens can improve usability.

24. What is the purpose of autocomplete?

The viewport meta tag controls how the layout viewport is configured on mobile browsers. A common configuration is `width=device-width, initial-scale=1.0`, which helps pages use the device viewport appropriately.

25. What is the purpose of the viewport meta tag?

An `id` identifies a particular element and should be unique within a document. A `class` represents membership in a reusable group and can be assigned to multiple elements.

26. What is the difference between id and class?

`href` generally identifies a referenced destination or relationship, such as a hyperlink or stylesheet. `src` generally identifies an external resource that an element embeds or loads, such as an image or script.

27. What is the difference between href and src?

`srcset` allows developers to provide multiple image resource candidates. The browser can choose an appropriate candidate based on factors such as viewport size and device pixel density.

28. What is the purpose of srcset?

`<picture>` provides a container for multiple image sources and supports responsive art direction and source selection. Each `<source>` can specify conditions such as media queries or supported image formats, with `<img>` serving as the fallback image.

29. What is the picture element?

Lazy loading delays loading certain resources until they are likely to be needed. HTML supports this for images and iframes through `loading="lazy"`. It can reduce initial network usage and improve page loading performance.

30. What is lazy loading?

Both allow external scripts to download without blocking HTML parsing in the same way as a normal parser-blocking script. `defer` scripts execute after parsing and preserve document order. `async` scripts execute as soon as they are ready, so their execution order is not guaranteed relative to other async scripts.

31. What is the difference between async and defer?

Test your HTML knowledge with 60 interview-style questions covering fundamentals, semantics, forms, accessibility, SEO, performance, and advanced HTML.

STAY UPDATED WITH BYTES!