Find HTML elements and attributes, understand what they do, and copy practical examples. Explore modern tags, accessibility features, and legacy markup in one reference.
Behind every heading, image, navigation menu, form, and button is a language that gives web pages their structure. That language is HTML, short for HyperText Markup Language.
UtilityGlen's HTML Tags & Attributes Guide makes it easier to understand HTML elements, explore their attributes, inspect code examples, and discover what your browser actually renders. Whether you're building your first web page or checking unfamiliar markup, this reference helps connect the code to the result.
My first web page.
Explore HTMLMemorizing every HTML element is unnecessary. Understanding when and why to use one is far more valuable. This guide gives you a convenient place to look up markup and understand its purpose.
Find the tags used to structure headings, paragraphs, tables, forms, media, links, navigation, and entire web pages.
Learn how attributes configure elements, provide information, describe resources, and control supported browser behavior.
Compare HTML syntax with a visual preview where appropriate, and learn about nonvisual behavior when an element or attribute does not directly display content.
Use the searchable index, filters, and organized reference details to move from an unfamiliar HTML name to a practical explanation.
Recognize why semantic elements, form labels, alternative text, and native browser controls matter for different users and assistive technologies.
Distinguish modern markup from deprecated or obsolete features, and understand why newer, standards-based alternatives are often preferable.
Most HTML elements consist of an opening tag, content, and a closing tag. Attributes are placed in the opening tag to provide extra information or configuration.
<a
href="/tools">Explore tools</a>
The browser interprets this markup as a hyperlink pointing to the specified path.
<a> identifies the element as a hyperlink. The tag name tells the browser what kind of content or control it represents.
href="/tools" specifies the hyperlink destination. Some attributes have text values, while others are boolean attributes.
The words Explore tools are the link's visible text. Elements can also contain other permitted HTML elements.
</a> closes the hyperlink element. Some HTML elements, such as <img> and <br>, are void elements and must not have closing tags.
They work together, but they do different jobs. Understanding the difference is one of the most important steps in learning HTML.
Elements define the structure, meaning, or functionality of parts of a document. For example, a heading identifies a heading, a paragraph represents paragraph text, and a button creates an interactive control.
Think: What is this part of the page?
Attributes supply additional information about an element. They can specify destinations, image alternatives, input types, identifiers, classes, and other supported settings.
Think: What extra information does this element need?
These common patterns show how HTML syntax becomes something useful on a real web page.
<h2>Our Services</h2>
<p>Discover what we offer.</p>Discover what we offer.
Headings establish document structure. Paragraphs contain blocks of prose. Heading levels should reflect the page's logical hierarchy.
<button type="button">
Save changes
</button>The button is a native, keyboard-accessible control. Setting type="button" prevents accidental form submission. A real action still requires appropriate application behavior.
<label for="email">Email</label>
<input id="email" type="email">Connecting a label to its input makes the form easier to use and helps assistive technologies identify the field. The label's for value must match the input's id.
<details>
<summary>Read more</summary>
<p>Extra information.</p>
</details>Extra information.
The <details> and <summary> elements create an expandable disclosure without requiring custom JavaScript.
Semantic HTML uses elements that describe the purpose of their content. A <nav> represents navigation, <main> identifies the main content, and <article> represents a self-contained composition.
Choosing appropriate HTML elements helps browsers, assistive technologies, search systems, and other software interpret a page's organization. Styling alone cannot provide the same meaning.
An illustrative layout showing how semantic elements can organize a page.
Here are some of the most useful elements to recognize when reading or writing HTML documents.
| Element | What it does | Typical use |
|---|---|---|
| <h1>–<h6> | Defines headings at different levels. | Page and section headings |
| <p> | Represents a paragraph. | Ordinary written content |
| <a> | Creates a hyperlink when given an appropriate destination. | Navigation and references |
| <img> | Embeds an image resource. | Photographs, illustrations, graphics |
| <div> | Groups flow content without implying special semantics. | Layout and styling hooks |
| <span> | Groups phrasing content without special semantics. | Inline styling and scripting hooks |
| <form> | Represents a section containing controls for submitting information. | Search boxes and contact forms |
| <input> | Creates a form control with behavior determined by its type. | Text fields, checkboxes, dates |
| <table> | Represents tabular data. | Data comparisons and reports |
| <video> | Embeds video playback. | Video content and demonstrations |
An attribute can change where a link goes, whether an input is required, how an image is described, or which styles apply. These are some of the attributes worth learning first.
hrefSpecifies a hyperlink destination for elements such as <a>.
srcIdentifies a resource to load for supported elements, such as images or scripts.
altProvides an image's text alternative, according to the image's purpose and context.
classAssigns class tokens commonly used by CSS and JavaScript.
idProvides an identifier that must be unique within the document.
requiredIndicates that supported form controls must have a value for constraint validation.
typeSpecifies a type or behavior for elements such as buttons, inputs, and scripts.
disabledDisables supported form controls, affecting interaction and form submission.
data-*Provides custom data attributes that scripts can access through the DOM.
Some markup appears to work in a browser while still being misleading, inaccessible, or invalid. These examples highlight habits that are worth correcting early.
Informative images need meaningful alternatives. Decorative images generally use an empty alt="". Complex charts may also need a longer text explanation.
Native buttons offer useful keyboard and accessibility behavior. Use links for navigation and buttons for actions, with appropriate event handling.
A clear heading hierarchy makes pages easier to navigate and understand.
A placeholder does not replace a proper label. Visible, associated labels help make form fields understandable.
Web pages often use all three technologies, but each has a different responsibility.
Structure & Meaning
Defines the content, document structure, semantic relationships, and native interactive controls.
Visual Presentation
Controls colors, typography, spacing, responsive layouts, animations, and other presentation details.
Programmed Behavior
Adds dynamic logic, data handling, custom interactions, and changes to page content or behavior.
These roles can overlap in practice: HTML itself includes native interaction features, and CSS also supports interactive states and animations.
You don't need to learn everything in one day. Start with the foundations, then explore more specialized elements when your projects need them.
Understand <!doctype html>, <html>, <head>, <title>, and <body>.
Practice headings, paragraphs, lists, links, images, sections, and articles.
Explore labels, inputs, buttons, selects, validation, and accessible form design.
Review document structure, semantic markup, accessibility, responsive design, and validation.
HTML is the foundation of how many search engines interpret web pages. Descriptive page titles, well-organized headings, meaningful links, useful body content, and appropriate structured data can help make a document easier for search systems to process and understand.
Semantic HTML is not a shortcut to higher rankings. It supports a clearer page structure and better usability, while search visibility also depends on content quality, discoverability, technical accessibility, relevance, and many other factors.
Organize topics with meaningful heading levels.
Use link text that communicates the destination or purpose.
Write accurate, distinct titles and helpful descriptions.
Use appropriate semantics and text alternatives.
Clear answers to common HTML questions, from syntax fundamentals to modern web development.
HTML, or HyperText Markup Language, describes the structure and meaning of content in web documents. It defines elements such as headings, links, images, forms, tables, and sections. Browsers interpret HTML to construct a document that can be displayed and interacted with.
A tag is markup such as <p> or </p>. An HTML element is the complete document structure represented by the markup, including its content and attributes where applicable. The words are sometimes used casually as synonyms, but they are technically different.
Attributes appear in an element's opening tag and supply additional information or configuration. For example, href specifies the destination of a hyperlink, while alt supplies a text alternative for an image. Some attributes are global; others apply only to particular elements.
No. Void elements, including <img>, <br>, <hr>, and <input>, do not have closing tags or child content. Some other elements have optional end tags under specific rules, although explicit closing tags are often easier for beginners to understand.
HTML element and attribute names in HTML syntax are generally ASCII case-insensitive. Lowercase markup is a widely used convention because it improves consistency and readability. Other contexts, such as XML or certain attribute values, can have different case-sensitivity rules.
Semantic HTML uses elements according to their intended meanings. For example, <nav> identifies navigation, <article> identifies self-contained content, and <button> represents a button. Appropriate semantics make web documents easier to understand and navigate.
Yes. A basic website can consist entirely of HTML documents and can include links, text, images, tables, forms, and native interactive elements. CSS is commonly added for visual styling, and JavaScript is used when additional programmed behavior is needed.
HTML5 is a name associated with a major evolution of HTML that introduced or standardized modern document features, including native audio and video elements and various web APIs. Today, HTML is maintained as a continually updated Living Standard rather than a sequence of separately numbered major releases.
Some older elements continue to render in browsers for compatibility, but that does not mean they should be used in new projects. Obsolete elements may have inconsistent behavior, limited accessibility, or better modern alternatives. Prefer current HTML elements and CSS for visual presentation.
Meaningful HTML can help search engines interpret content and structure. Elements such as headings, links, titles, and relevant metadata play important roles, but simply adding more tags does not guarantee better rankings. Accurate, useful content and a technically accessible website remain essential.
Check element nesting, required attributes, duplicate IDs, document structure, and whether elements are used in their intended contexts. An HTML conformance checker can identify many markup errors. Browser developer tools and accessibility testing help identify additional problems that validation alone may miss.
Start with the basic document structure, headings, paragraphs, links, images, and lists. Then move to semantic sections, tables for data, forms, common attributes, and accessibility. Building small example pages is a practical way to reinforce what each element does.
Explore an unfamiliar element, inspect its syntax, compare the rendered result, and try the example in your own project. Every tag you understand gives you another useful building block for the web.
Handy web tools for daily use. Everything runs right in your browser—no sign-ups, no cloud uploads, and your data stays entirely on your device.