Introduction to HTML Elements
HTML (HyperText Markup Language) uses a variety of elements to structure and display content on the web. Each element serves a specific purpose, from defining the basic structure of a page to embedding interactive media and forms.
This comprehensive library catalogs HTML elements by category, providing:
- Clear explanations of each element's purpose and usage
- Syntax guidelines and required/optional attributes
- Practical examples showing the element in context
- Browser compatibility information
- Accessibility considerations
- Best practices and common pitfalls
Whether you're new to HTML or an experienced developer looking for a reference, this library will help you find and implement the right elements for your web projects.
Element Categories
HTML elements can be grouped into several functional categories. Click on a category to browse its elements or use the search functionality to find specific tags.
Document Structure
Elements that define the basic structure and metadata of an HTML document.
View All Document Structure ElementsText Formatting
Elements that define the appearance or semantic meaning of text.
View All Text Formatting ElementsImages & Media
Elements for embedding images, audio, video, and other media content.
View All Image & Media ElementsSemantic HTML5
Semantic elements introduced in HTML5 for better structure and meaning.
View All Semantic HTML5 ElementsEmbedded Content
Elements for embedding external content and interactive components.
View All Embedded Content ElementsMetadata & Scripts
Elements for providing metadata about the document and including scripts.
View All Metadata & Script ElementsExample Element Reference
Here's a sample of what you'll find in our detailed element references:
<article> Semantic HTML5 Element
Represents a self-contained composition in a document, page, application, or site that is intended to be independently distributable or reusable.
Syntax
<article>
<h2>Article Title</h2>
<p>Article content...</p>
</article>Attributes
The <article> element accepts the global attributes only.
Examples
<article>
<header>
<h2>Understanding the Article Element</h2>
<p>Published on <time datetime="2023-05-12">May 12, 2023</time> by <a href="#author">Jane Smith</a></p>
</header>
<p>The article element represents a self-contained composition in a document, page, application, or site...</p>
<p>Use the article element when the content would make sense on its own in a different context.</p>
<h3>When to Use Article</h3>
<ul>
<li>Blog posts</li>
<li>News articles</li>
<li>Forum posts</li>
<li>Product cards</li>
</ul>
<footer>
<p>Tags: <a href="#html5">HTML5</a>, <a href="#semantic">Semantic HTML</a></p>
</footer>
</article>This example shows a blog post using the <article> element with proper structure:
- A
<header>with the post title, publication date, and author - The main content of the article with paragraphs and a subheading
- A
<footer>with metadata like tags
This structure provides semantic meaning to search engines and assistive technologies, making it clear that this content is a standalone article.
<article class="main-article">
<h1>Web Development News</h1>
<p>Latest updates from the world of web development.</p>
<article class="news-item">
<h2>New HTML Specification Released</h2>
<p>The W3C has announced the release of a new HTML specification...</p>
</article>
<article class="news-item">
<h2>CSS Grid Adoption Reaches 95%</h2>
<p>The latest browser usage statistics show that CSS Grid is now supported...</p>
</article>
</article>This example demonstrates nested <article> elements used for a news aggregator or blog homepage:
- The outer
<article>represents the collection of news items - Each inner
<article>represents an individual news item - Each nested article has its own heading and content
Nesting articles is appropriate when you have a collection of related but independent pieces of content.
Accessibility Considerations
- Always include a heading (
<h1>-<h6>) as the first child of an<article>to identify its content. - The heading should be appropriate for the article's place in the document outline (typically an
<h2>or<h3>). - Consider including author and publication date information using appropriate elements like
<time>. - For articles that are part of a feed or list, consider using
aria-labelledbyto associate each article with its heading.
Browser Compatibility
The <article> element is supported in all modern browsers:
- Chrome: Full support since version 6
- Firefox: Full support since version 4
- Safari: Full support since version 5
- Edge: Full support
- Internet Explorer: Full support since IE9
Best Practices
- Do use
<article>for content that would make sense on its own, like blog posts, news articles, product cards, or forum posts. - Do include a heading that identifies the article's content.
- Do use
<section>elements to divide large articles into logical parts when needed. - Don't use
<article>for content that doesn't stand on its own, like sidebars or navigation menus (use<aside>or<nav>instead). - Don't use
<article>simply for styling purposes (use<div>for non-semantic grouping).
Find Elements
Elements Guides
Explore our in-depth guides on specific HTML element topics:
Semantic HTML Structure
Learn how to create meaningful page structures with semantic HTML5 elements.
Read GuideTables Best Practices
Discover how to create accessible, responsive, and well-structured data tables.
Read GuideForm Elements & Accessibility
Build user-friendly, accessible forms with proper labeling and structure.
Read GuideResponsive Images Techniques
Implement modern responsive image solutions using srcset, sizes, and picture.
Read GuideMedia Embedding Guidelines
Learn best practices for embedding videos, audio, and interactive media.
Read GuideHTML Document Structure
Create properly structured HTML documents with appropriate metadata.
Read Guide