HTML Tags + Descriptions

Creates a paragraph (a block of text with spacing above/below).

<p>This is a paragraph.</p>

Headings define titles/subtitles. Use h1 for the main page title, then h2 for sections, h3 for subsections, etc.

<h1>Page Title</h1>
<h2>Section Title</h2>
<h3>Subsection Title</h3>

Inserts a line break. Note: <br> is a void tag (no closing tag).

Line 1<br>Line 2

Creates a horizontal divider line. Void tag (no closing tag).

<hr>

Marks text as important. Browsers typically render it bold.

<strong>Important text</strong>

Emphasizes text (screen readers also emphasize it). Browsers typically render it italic.

<em>Emphasized text</em>

Makes text bold for style (not necessarily “important”).

<b>Bold text</b>

Italicizes text for style (not necessarily emphasis).

<i>Italic text</i>

Underlines text. Use carefully because underlines look like links.

<u>Underlined text</u>

Creates a hyperlink to another page, section, file, email, etc.

<a href="https://example.com">Visit Example</a>

Displays an image. Void tag. Always include alt text.

<img src="image.jpg" alt="A description of the image">

Creates a bulleted list (items are <li>).

<ul>
  <li>Item A</li>
  <li>Item B</li>
</ul>

Creates a numbered list (items are <li>).

<ol>
  <li>First</li>
  <li>Second</li>
</ol>

Represents one item inside <ul> or <ol>.

<ul>
  <li>One list item</li>
</ul>

A generic block container used to group elements (often for CSS layout).

<div class="card">...content...</div>

A generic inline container used to style small pieces of text.

<p>Hello <span class="highlight">world</span>!</p>

Wraps inputs and controls to collect and submit user data.

<form action="submit.php" method="post">...</form>

Creates a single-line input. Void tag. Type controls behavior.

<input type="text" placeholder="Your name">

Creates a clickable button (submit, reset, or normal button).

<button type="submit">Send</button>

Labels a form control (better usability + accessibility).

<label for="email">Email</label>
<input id="email" type="email">

Creates a multi-line text input box.

<textarea rows="4" cols="30">Type here...</textarea>

Creates a table structure with rows and cells.

<table>
  <tr><th>Name</th></tr>
  <tr><td>Arseine</td></tr>
</table>

Groups related content under one topic (usually with a heading). Think: “Features”, “Services”, “FAQ”, “Contact”. Each topic can be its own <section>.

<section>
  <h2>Services</h2>
  <p>Web apps, design, and branding.</p>
</section>

Represents a standalone piece of content (blog post, news story, forum post).

<article>
  <h2>Blog Post Title</h2>
  <p>Post content...</p>
</article>

Content related to the main content, like a sidebar, tips box, or “related links”.

<aside>
  <h3>Tip</h3>
  <p>Use semantic tags for clarity.</p>
</aside>

Intro content for a page/section/article (logo, title, nav, etc.).

<header>
  <h1>Site Name</h1>
  <nav>...</nav>
</header>

Footer content for a page/section (copyright, contacts, links).

<footer>© 2026 Your Name</footer>

Wraps major navigation links (menu, table of contents).

<nav>
  <a href="#home">Home</a>
  <a href="#contact">Contact</a>
</nav>

The main unique content of the page (should appear once per page).

<main>...main page content...</main>

For long quotations (often displayed indented).

<blockquote>Long quote here...</blockquote>

Displays a short snippet of code inline inside a sentence.

<p>Use <code>console.log()</code> to print.</p>

Preserves spacing and line breaks exactly as typed (great for code blocks).

<pre>
Line 1
    Line 2 (indented)
</pre>

Embeds audio. Use controls to show play/pause.

<audio controls src="audio.mp3"></audio>

Embeds video. Use controls to show video controls.

<video controls width="360" src="video.mp4"></video>