↓ Skip to main content

Github

HTML Elements Table

This document lists all major HTML semantic tags, explains their purposes, and provides code snippets for each.

Semantic Structure Elements #

Tag Description Example
<header> Represents introductory content or navigational aids. html\n<header><h1>Welcome to My Website</h1></header>\n
<nav> Defines a navigation section. html\n<nav><a href="#home">Home</a> <a href="#about">About</a></nav>\n
<main> Contains the document’s unique primary content. html\n<main><article>This is the main article.</article></main>\n
<article> Represents a self-contained piece of content. html\n<article><h2>Blog Post</h2><p>This is a blog article.</p></article>\n
<section> Defines a thematic grouping of content with a heading. html\n<section><h2>Our Services</h2></section>\n
<aside> Contains tangential or secondary content. html\n<aside><p>Sidebar info or related links</p></aside>\n
<footer> Footer for a document or section. html\n<footer><p>© 2025 My Company</p></footer>\n

Text and Inline Semantic Elements #

Tag Description Example
<strong> Indicates strong importance. html\n<strong>Warning:</strong> Backup your data!\n
<em> Indicates emphasized text. html\n<em>This word</em> is emphasized.\n
<mark> Highlights text. html\n<p>Search results for <mark>semantic</mark></p>\n
<time> Represents a specific date or time. html\n<time datetime="2025年10月29日">October 29, 2025</time>\n
<abbr> Defines an abbreviation or acronym. html\n<abbr title="HyperText Markup Language">HTML</abbr>\n
<cite> Cites a creative work. html\n<cite>The Great Gatsby</cite>\n
<code> Displays inline code. html\n<code>console.log("Hello World")</code>\n
<blockquote> Represents a long quotation. html\n<blockquote>"Simplicity is the soul of efficiency."</blockquote>\n
<q> Represents a short inline quote. html\n<q>Stay hungry, stay foolish.</q>\n
<dfn> Indicates the defining instance of a term.

Related

AltStyle によって変換されたページ (->オリジナル) /