HTML5 Essential Tags and Syntax Reference

HTML Basic Structure

In VS Code, type ! and press Enter to generate a basic HTML5 skeleton:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
</head>
<body>
    
</body>
</html>
Tag Purpose
<html> Root element of the entire document
<head> Contains metadata for the browser (e.g., CSS stylesheets)
<body> Contains visible content for users (text, images, etc.)
<title> Specifies the page title shown in browser tab

Heading Tags

Tags: h1 through h6 (block-level elements)

Key characteristics:

  • Text appears bold by default
  • Heading sizes decrease as numbers increase (h1 largest, h6 smallest)
  • Each heading occupies its own line
  • Important: Use <h1> only once per page; h2 through h6 have no usage restrictions
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Section Title</h3>
<h4>Sub-section</h4>
<h5>Minor Heading</h5>
<h6>Smallest Heading</h6>

Paragraph Tag

Tag: <p> (block-level element)

Characteristics: Each paragraph occupies a full line with spacing between paragraphs.

<p>This is the first paragraph containing sample text for demonstration purposes.</p>
<p>This represents a second paragraph with different content.</p>
<p>Here is a third paragraph showing how multiple blocks display.</p>

Line Break and Horizontal Rule

Tag Type Purpose
<br> Self-closing Inserts a single line break
<hr> Self-closing Creates a horizontal divider line 
<body>
    <h1>Line Break and Horizontal Rule Demo</h1>
    <hr>
    Content line one
    <br>
    Content line two
    <br>
    Content line three
</body>

Text Formatting Tags

Effect Tags Description
Bold <strong> or <b> Emphasizes text visually
Italic <em> or <i> Slants text for emphasis
Underline <ins> or <u> Adds line below text
Strikethrough <del> or <s> Shows deleted/obsolete text 
<body>
    <h1>Text Formatting Demonstration</h1>
    <strong>Bold text using strong</strong>
    <b>Bold text using b</b>
    <br>
    <em>Italic text using em</em>
    <i>Italic text using i</i>
    <br>
    <ins>Underlined text using ins</ins>
    <u>Underlined text using u</u>
    <br>
    <del>Strikethrough text using del</del>
    <s>Strikethrough text using s</s>
</body>

Image Tag

Tag: <img> (self-closing)

Required attribute: src specifies the image URL

<body>
    <h1>Image Insertion Demo</h1>
    <img src="./landscape.jpg" alt="Description text">
</body>

Path Types

Type Format Example
Relative From current file location ./photo.jpg
Absolute From root drive C:\images\photo.jpg
URL Web address https://example.com/images/logo.png

Anchor (Hyperlink) Tag

Tag: <a> (block-level wrapper)

Required attribute: href specifies the destination URL

<body>
    <h1>Link Demonstration</h1>
    <a href="https://www.example.com">Visit Example Website</a>
</body>

Best practices:

  • Use href="#" for placeholder links during development
  • Add target="_blank" to open links in a new tab

Audio Tag

Tag: <audio>

Attribute Function Notes
src Audio file URL Required
controls Displays playback controls Recommended
loop Repeats playback continuously Optional
autoplay Starts automatically Often disabled by broswers

Supported formats: MP3, Ogg, WAV

<audio src="./background-music.mp3" controls loop autoplay></audio>

Video Tag

Tag: <video>

Attribute Function Notes
src Video file URL Required
controls Displays playback controls Recommended
loop Repeats playback continuously Optional
muted Plays without sound Often needed for autoplay
autoplay Starts automatically Requires muted for most browsers

Supported formats: MP4, WebM, Ogg

<video src="./promo-video.mp4" controls loop autoplay muted></video>

List Tags

Three list types available in HTML:

Unordered List

Structure: <ul> containing <li> elements

Rule: <ul> can only contain <li> tags; <li> can wrap any content

<h2>Unordered List Example</h2>
<ul>
    <li>Item one</li>
    <li>Item two</li>
    <li>Item three</li>
</ul>

Ordered List

Structure: <ol> containing <li> elements

Rule: <ol> can only contain <li> tags; <li> can wrap any content

<h2>Ordered List Example</h2>
<ol>
    <li>First step</li>
    <li>Second step</li>
    <li>Third step</li>
</ol>

Definition List

Structure: <dl> containing <dt> (term) and <dd> (description)

Rule: <dl> can only contain <dt> and <dd>; terms and descriptions can contain any content

<h2>Definition List Example</h2>
<dl>
    <dt>Programming Language</dt>
    <dd>A formal language for writing instructions</dd>
    <dd>Used for software development</dd>

    <dt>Framework</dt>
    <dd>A platform providing pre-built components</dd>
    <dd>Accelerates development process</dd>
</dl>

Table Tags

Structure: <table> → <tr> (rows) → <td>/<th> (cells)

Tag Purpose
table Container for the entire table
tr Defines a table row
th Header cell (bold, centered)
td Standard data cell

Add border="1" attribute to display borders.

<body>
    <h2>Student Scores Table</h2>
    <table border="1">
        <tr>
            <th>Student</th>
            <th>Mathematics</th>
            <th>Science</th>
            <th>Total</th>
        </tr>
        <tr>
            <td>Alice</td>
            <td>95</td>
            <td>98</td>
            <td>193</td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>88</td>
            <td>92</td>
            <td>180</td>
        </tr>
    </table>
</body>

Table Section Tags

Semantic grouping for better code organization:

Tag Meaning
<thead> Table header section
<tbody> Table body section
<tfoot> Table footer section 
<table border="1">
    <thead>
        <tr>
            <th>Name</th>
            <th>Score</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>David</td>
            <td>87</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Average</td>
            <td>87</td>
        </tr>
    </tfoot>
</table>

Cell Merging

Combine multiple cells horizontally or vertically:

Attribute Direction Keep
rowspan Vertical (down) Top cell
colspan Horizontal (across) Left cell

Value: Number of cells to merge

<h2>Vertical Merge Example</h2>
<table border="1">
    <tr>
        <td rowspan="2">Merged Cell</td>
        <td>Row 1, Col 2</td>
    </tr>
    <tr>
        <td>Row 2, Col 2</td>
    </tr>
</table>

<h2>Horizontal Merge Example</h2>
<table border="1">
    <tr>
        <td colspan="3">Merged Across Three Columns</td>
    </tr>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
    </tr>
</table>

Form Elements

Input Tag

Tag: <input> (self-closing)

Type Value Control Behavior
text Text input Single-line text entry
password Password field Characters masked
radio Radio button Single selection from group
checkbox Checkbox Multiple selections allowed
file File picker Upload interface 
<h2>Input Type Examples</h2>
Text: <input type="text">
<br>
Password: <input type="password">
<br>
Radio: <input type="radio">
<br>
Checkbox: <input type="checkbox">
<br>
File: <input type="file">

Placeholder Attribute

Provides hint text inside input fields:

<h2>Placeholder Examples</h2>
Username: <input type="text" placeholder="Enter username">
<br>
Password: <input type="password" placeholder="Enter password">

Radio Button Attributes

Attribute Purpose Syntax
name Groups buttons for mutual exclusion Same value groups buttons
checked Pre-selects an option Boolean attribute 
<h2>Radio Button Group</h2>
Gender:
<input type="radio" name="gender"> Male
<input type="radio" name="gender" checked> Female

Multiple File Selection

Add multiple atribute to allow selecting several files:

<h2>Multi-File Upload</h2>
Select files: <input type="file" multiple>

Checkbox Default Selection

Use checked attribute for pre-checked options:

<h2>Checkbox Default Selection</h2>
Select fruits:
<input type="checkbox"> Apple
<input type="checkbox" checked> Banana
<input type="checkbox"> Cherry

Select Dropdown

Structure: <select> containing <option> elements

Default selection: Add selected attribute to desired <option>

<h2>Dropdown Menu Example</h2>
Select your city:
<select>
    <option selected>New York</option>
    <option>Los Angeles</option>
    <option>Chicago</option>
    <option>Houston</option>
</select>

Textarea

Tag: <textarea> for multi-line text input

Attribute Function
cols Visible width in characters
rows Visible height in lines 
<h2>Textarea Demo</h2>
<textarea name="comments" id="commentBox" cols="40" rows="5">Enter your comments here</textarea>

Label Tag

Tag: <label> improves accessibility and clickable area

Two methods:

<h2>Label Click Area Methods</h2>

<!-- Method 1: Match for attribute with input id -->
<input type="radio" name="plan" id="basic"> <label for="basic">Basic Plan</label>

<!-- Method 2: Wrap input with label -->
<label>
    <input type="checkbox"> I agree to terms
</label>

Button Tag

Tag: <button> (container element)

Type Value Function
submit Submits form data (default)
reset Clears all form inputs
button Generic button (requires JS) 
<h2>Form Buttons</h2>
<form action="/submit-endpoint">
    Username: <input type="text"> <br><br>
    Password: <input type="password"> <br><br>

    <button type="submit">Submit Form</button>
    <button type="reset">Clear Form</button>
</form>

Layout Tags: div and span

Used for structuring page layout and organizing content into sections.

Tag Behavior Use Case
<div> Block-level, full width Section containers
<span> Inline, content width Text styling, small sections 
<div>Div container - takes full width and starts on new line</div>
<span>Span element - only takes its content width</span>

Character Entities

Display reserved HTML characters:

Display Description Entity
Non-breaking space &nbsp;
< Less-than sign &lt;
> Greater-than sign &gt; 
<h2>Character Entity Examples</h2>
Spacing example: word&nbsp;&nbsp;&nbsp;three spaces after.
<br>
Less-than symbol: &lt;
<br>
Greater-than symbol: &gt;

Tags: HTML5 web development markup language semantic HTML frontend

Posted on Fri, 05 Jun 2026 19:00:18 +0000 by BuzzStPoint

Hot Tags

©2026 Freaks City