Scribd
Upload
7 views22 pages

HTML Reference Guide

The HTML Core Elements Reference Guide by freeCodeCamp provides a comprehensive overview of over 100 HTML elements, attributes, and best practices for responsive web design. It covers fundamental topics such as document structure, text formatting, links, media, lists, and tables, emphasizing the importance of HTML as the foundational markup language for web content. The guide serves as a valuable resource for students learning to create and structure web pages effectively.

Uploaded by

maheerzaqq001
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views22 pages

HTML Reference Guide

The HTML Core Elements Reference Guide by freeCodeCamp provides a comprehensive overview of over 100 HTML elements, attributes, and best practices for responsive web design. It covers fundamental topics such as document structure, text formatting, links, media, lists, and tables, emphasizing the importance of HTML as the foundational markup language for web content. The guide serves as a valuable resource for students learning to create and structure web pages effectively.

Uploaded by

maheerzaqq001
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

HTML Core Elements Reference Guide | Responsive Web Design — freeCodeCamp

HTML Core Elements


Reference Guide
Responsive Web Design Certification · freeCodeCamp
A Comprehensive Student Reference: 100+ Elements, Attributes & Values

What You Will Learn


Document Structure • Text & Formatting • Links & Media • Lists & Tables • Forms & Inputs
• Semantic HTML • Attributes & Values • Best Practices • Weekend Project

1. What Is HTML?
HTML stands for HyperText Markup Language. It is the standard language used to create and structure
content on the web. HTML uses elements (tags) to tell a browser how to display content — whether it's
a paragraph, a heading, an image, a link, or a form.
Every webpage you visit is built on HTML. CSS adds styling and JavaScript adds interactivity, but
HTML is always the foundation — the skeleton of the page.

Key Idea
HTML is not a programming language — it is a markup language. You are marking up content so the
browser knows what each piece means and how to display it.

Basic Structure of an HTML Document


Every HTML file follows this standard structure:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta
name="viewport" content="width=device-width, initial-scale=1.0"> <title>My First
Webpage</title> </head> <body> <h1>Hello, World!</h1> <p>This is my first
webpage.</p> </body> </html>

<!DOCTYPE html> — Tells the browser this is an HTML5 document. Always put this first.
<html> — The root element. Everything lives inside this tag.
<head> — Contains metadata (information about the page that isn't displayed).
<body> — Contains all visible content: text, images, links, etc.

For Student Use — HTML Reference Page 1


HTML Core Elements Reference Guide | Responsive Web Design — freeCodeCamp

2. How HTML Elements Work


Anatomy of an HTML Element
<tagname attribute="value">Content goes here</tagname>

Most elements have an opening tag, content, and a closing tag. Some elements are self-closing (void
elements) — they don't wrap around content.
<img src="[Link]" alt="A photo"> <!-- self-closing --> <input type="text"
placeholder="Enter name"> <!-- self-closing -->

Term Meaning Example


Element The complete unit: opening tag, <p>Hello</p>
content, closing tag

Tag The HTML marker itself (the angled <p> or </p>


brackets)

Attribute Extra information added inside the class="header"


opening tag

Value The setting for an attribute "header" in class="header"

Content Text or nested elements between tags Hello in <p>Hello</p>

3. Document Structure Elements


These elements form the skeleton of every HTML page. You will see them in every freeCodeCamp
project.

Element Description Example


<!DOCTYPE Declares this is an HTML5 document. Must be <!DOCTYPE html>
html> the very first line.
<html> The root element — wraps all content on the <html lang="en">
page.
<head> Contains metadata: title, links, character sets. <head>...</head>
Not visible on page.
<body> All visible page content goes here. <body>...</body>

<title> Sets the browser tab/window title. Goes inside <title>My Page</title>
<head>.
<meta> Provides metadata (charset, viewport, <meta charset="UTF-8">
description). Self-closing.
<link> Links external resources like CSS stylesheets. <link rel="stylesheet"
Self-closing. href="[Link]">

<style> Embeds CSS directly in the HTML file (inside <style>body { color: red;
<head>). }</style>

For Student Use — HTML Reference Page 2


HTML Core Elements Reference Guide | Responsive Web Design — freeCodeCamp

<script> Embeds or links JavaScript. Can go in <head> <script src="[Link]"></script>


or before </body>.
<base> Sets a base URL for all relative links in the <base
document. href="[Link]

4. Text & Headings


Heading Elements
HTML has six heading levels. Use them in order — don't skip levels just for size. Headings help screen
readers and search engines understand your page structure.

Element Description Example


<h1> Main page heading. Only ONE per page — the <h1>Welcome to My Site</h1>
big title.
<h2> Section headings — major sections of your <h2>About Me</h2>
page.
<h3> Subsection headings within an h2 section. <h3>My Hobbies</h3>

<h4> Sub-subsections. Less common but valid. <h4>Outdoor Activities</h4>

<h5> Rarely used heading level for deep nested <h5>Hiking Tips</h5>
structure.
<h6> Smallest heading level. Use sparingly. <h6>Trail Ratings</h6>

Text & Paragraph Elements

Element Description Example


<p> A paragraph of text. Browsers add spacing <p>This is a paragraph.</p>
above and below.
<span> Inline container — groups text for styling <span
without breaking flow. class="highlight">text</span>

<br> Line break — forces text onto the next line. Line one<br>Line two
Self-closing.
<hr> Horizontal rule — a thematic divider line. Self- <hr>
closing.
<strong> Bold text with semantic importance (screen <strong>Warning!</strong>
readers notice).
<em> Italic text with emphasis (screen readers stress <em>Really</em> important
this word).
<b> Bold text — purely visual, no semantic <b>Bold text</b>
meaning.

For Student Use — HTML Reference Page 3


HTML Core Elements Reference Guide | Responsive Web Design — freeCodeCamp

<i> Italic text — visual only. Also used for icons. <i>Italic text</i>

<u> Underlined text. Avoid for non-links (confuses <u>Underlined</u>


users).
<s> Strikethrough — marks text as no longer <s>Old price: $50</s>
accurate.
<mark> Highlighted text — like a yellow marker. <mark>Key term</mark>

<small> Smaller text — for fine print or secondary info. <small>Terms apply</small>

<sup> Superscript — raised text (exponents, E = mc<sup>2</sup>


footnotes).
<sub> Subscript — lowered text (chemical formulas). H<sub>2</sub>O

<abbr> Abbreviation — shows full form on hover. <abbr title="HyperText Markup


Language">HTML</abbr>

<cite> Cites a creative work, book, movie, or website. <cite>The Great Gatsby</cite>

<q> Short inline quotation — adds quotation marks. <q>To be or not to be</q>

<blockquote> Long block quotation — indented from the <blockquote>Long quote


page. here...</blockquote>

<pre> Preformatted text — preserves spaces and <pre> Code here </pre>
line breaks.
<code> Inline code display — monospace font. <code>let x = 5;</code>

<kbd> Keyboard input — shows keyboard keys Press <kbd>Ctrl+S</kbd>


visually.
<samp> Sample computer output — program results. <samp>Error: File not
found</samp>

<var> Mathematical or programming variable. Solve for <var>x</var>

<time> Machine-readable time/date. <time datetime="2024-01-


15">Jan 15</time>

<address> Contact information for nearest article or body. <address>123 Main St</address>

5. Links & Navigation


The Anchor Element
Links are created with the <a> (anchor) tag. They can link to other pages, sections on the same page,
email addresses, or files.

Element Description Example


<a> Creates a hyperlink to another page, file, or <a
location. href="[Link]
here</a>

<nav> Semantic wrapper for a group of navigation <nav><a href="/">Home</a></nav>


links.

For Student Use — HTML Reference Page 4


HTML Core Elements Reference Guide | Responsive Web Design — freeCodeCamp

Common href Values for Links

Attribute Value(s) Description


href [Link] Links to an external website (absolute URL)
href [Link] Links to another page in the same folder (relative URL)
href #section-id Jumps to an element with that id on the same page
(anchor link)
href [Link] Opens the user's email client to compose an email
href [Link] Dials a phone number (especially on mobile devices)
href ../folder/[Link] Links to a page one folder level up
href # Placeholder link — goes nowhere (use for buttons in
early dev)
target _blank Opens the link in a new browser tab
target _self Opens the link in the same tab (default behavior)
rel noopener noreferrer Security attribute — use with target="_blank"
download [Link] Makes the link download a file instead of navigating

<!-- Basic link --> <a href="[Link] freeCodeCamp</a> <!--


Link opens in new tab (with security) --> <a href="[Link]
target="_blank" rel="noopener noreferrer"> Open in New Tab </a> <!-- Jump to
section on same page --> <a href="#about">Go to About Section</a> <section
id="about"> <h2>About Me</h2> </section> <!-- Email link --> <a
href="[Link] Email</a>

6. Images & Media


Image Element
Images make your pages visual and engaging. The <img> tag is self-closing and always needs both src
and alt attributes.

Element Description Example


<img> Displays an image. Self- <img src="[Link]" alt="A cat">
closing — no closing tag
needed.
<figure> Groups an image with its <figure><img><figcaption></figcaption></figure>
caption as one semantic
unit.

For Student Use — HTML Reference Page 5


HTML Core Elements Reference Guide | Responsive Web Design — freeCodeCamp

<figcaption> Provides a caption or <figcaption>A photo of a cat</figcaption>


description for a <figure>
element.
<picture> Provides multiple image <picture><source><img></picture>
sources for responsive
images.
<source> Defines a media source <source srcset="[Link]" media="(min-
inside <picture>, <video>, width:800px)">
or <audio>.
<video> Embeds a video player into <video src="video.mp4" controls></video>
the page.
<audio> Embeds an audio player <audio src="song.mp3" controls></audio>
into the page.
<iframe> Embeds another webpage <iframe
or video (like YouTube) src="[Link]
inside your page.
<canvas> A drawing surface for <canvas id="myCanvas" width="400"
JavaScript graphics. height="200"></canvas>

<svg> Container for Scalable <svg><circle cx="50" cy="50" r="40"/></svg>


Vector Graphics drawn with
code.
<embed> Embeds external content <embed src="[Link]" type="application/pdf">
(PDFs, plugins). Less
common today.
<object> Container for external <object data="[Link]"></object>
resources like PDFs or
Flash (legacy).

Key Image Attributes

Attribute Value(s) Description


src [Link] / The path or URL to the image file
[Link]

alt "A smiling dog" Alternative text — REQUIRED for accessibility


and SEO. Describes the image.
width 300 / 100% Sets the image width in pixels or percent
height 200 Sets the image height in pixels
loading lazy / eager lazy delays loading until the image is near the
viewport (improves performance)
title "Tooltip text" Shows a tooltip when the user hovers over the
image

<!-- Basic image --> <img src="images/[Link]" alt="A tabby cat sitting on a window
sill" width="400"> <!-- Image with caption --> <figure> <img
src="images/[Link]" alt="A colorful sunset over the ocean"> <figcaption>Sunset
at Diani Beach, Kenya</figcaption> </figure> <!-- YouTube embed --> <iframe

For Student Use — HTML Reference Page 6


HTML Core Elements Reference Guide | Responsive Web Design — freeCodeCamp
width="560" height="315" src="[Link]
title="YouTube video player" allowfullscreen> </iframe>

7. Lists
Lists are one of the most used HTML structures. Every navigation menu, ingredients list, or step-by-
step guide uses them.

Element Description Example


<ul> Unordered list — items with bullet <ul><li>Apples</li><li>Oranges</li></ul>
points (no specific order).
<ol> Ordered list — items numbered in <ol><li>Step one</li><li>Step two</li></ol>
sequence (steps, rankings).
<li> List item — goes inside <ul> or <li>Item content here</li>
<ol>.
<dl> Description list — pairs of terms <dl><dt>HTML</dt><dd>Markup
and definitions. language</dd></dl>

<dt> Description term — the word being <dt>CSS</dt>


defined in a <dl>.
<dd> Description detail — the definition <dd>Cascading Style Sheets</dd>
of the <dt> term.
<menu> Semantic list of interactive items <menu><li><button>Edit</button></li></menu>
(toolbar, context menu).

List Attributes

Attribute Value(s) Description


type 1 / A / a / Sets numbering type for <ol>: numbers,
I / i uppercase/lowercase letters, Roman numerals
start 5 Starts an <ol> at a number other than 1
reversed (no value needed) Counts down instead of up in an <ol>

<!-- Unordered list (bullets) --> <ul> <li>HTML</li> <li>CSS</li>


<li>JavaScript</li> </ul> <!-- Ordered list (numbered) --> <ol> <li>Open your code
editor</li> <li>Create a new file called [Link]</li> <li>Add the HTML
boilerplate</li> </ol> <!-- Nested list (list inside a list) --> <ul> <li>Frontend
<ul> <li>HTML</li> <li>CSS</li> </ul> </li> <li>Backend</li>
</ul> <!-- Description list (glossary-style) --> <dl> <dt>HTML</dt> <dd>The
language that structures web content</dd> <dt>CSS</dt> <dd>The language that
styles web content</dd> </dl>

For Student Use — HTML Reference Page 7


HTML Core Elements Reference Guide | Responsive Web Design — freeCodeCamp

8. Tables
Tables organize data into rows and columns. Use them for data — never for page layout (use CSS for
layout instead).

Element Description Example


<table> Creates the table. All other table <table>...</table>
elements go inside it.
<thead> Groups the header rows of the table — <thead><tr><th>Name</th></tr></thead>
semantic wrapper.
<tbody> Groups the body/data rows of the table. <tbody><tr><td>John</td></tr></tbody>

<tfoot> Groups the footer rows (totals, <tfoot><tr><td>Total:


summaries). 100</td></tr></tfoot>

<tr> Table row — contains cells (<th> or <tr><td>Data</td></tr>


<td>).
<th> Table header cell — bold and centered <th>Name</th>
by default.
<td> Table data cell — regular cell with <td>John Doe</td>
content.
<caption> A title or description above the table. <caption>Student Grades</caption>

<colgroup> Groups columns for styling with <col>. <colgroup><col><col></colgroup>

<col> Applies styles to an entire column. Self- <col style="background:yellow">


closing.

Table Attributes

Attribute Value(s) Description


colspan 2 / 3 Makes a cell span across multiple columns
rowspan 2 / 3 Makes a cell span across multiple rows
scope col / row / For <th> — helps screen readers understand header
colgroup / context
rowgroup

headers "id-of-header" Links a <td> to its <th> header for accessibility


border 1 / 0 Old way to add/remove table borders (use CSS instead)

<table> <caption>Class Test Results</caption> <thead> <tr> <th


scope="col">Student</th> <th scope="col">Subject</th> <th
scope="col">Score</th> </tr> </thead> <tbody> <tr> <td>Amina</td>
<td>HTML</td> <td>95/100</td> </tr> <tr> <td>Kofi</td>
<td>HTML</td> <td>88/100</td> </tr> </tbody> <tfoot> <tr> <td
colspan="2">Class Average</td> <td>91.5/100</td> </tr> </tfoot> </table>

For Student Use — HTML Reference Page 8


HTML Core Elements Reference Guide | Responsive Web Design — freeCodeCamp

9. Forms & User Input


Forms allow users to enter and submit data. Every login page, search bar, and signup form uses these
elements.

Element Description Example


<form> The container for all form <form action="/submit" method="POST">
elements. Handles
submission.
<input> The most versatile form <input type="text" name="username">
element. Self-closing. Has
many types.
<label> Describes an input field. <label for="name">Your Name:</label>
Clicking it focuses the input.
<button> A clickable button. Can <button type="submit">Send</button>
submit forms or trigger
JavaScript.
<textarea> Multi-line text input area for <textarea rows="4" cols="50"></textarea>
longer messages.
<select> Creates a dropdown menu <select name="city">...</select>
with options.
<option> An option inside a <select> <option value="nbi">Nairobi</option>
dropdown.
<optgroup> Groups related <option> <optgroup label="Africa">...</optgroup>
elements with a label.
<fieldset> Groups related form fields <fieldset><legend>Address</legend>...</fieldset>
visually and semantically.
<legend> Caption/title for a <fieldset>. <legend>Personal Info</legend>

<datalist> A list of suggested values <datalist id="browsers">...</datalist>


for an <input> with list
attribute.
<output> Displays the result of a <output for="num1 num2">0</output>
calculation or user action.
<progress> Shows a progress bar <progress value="70" max="100"></progress>
(downloads, steps).
<meter> Shows a measurement <meter value="0.7" min="0" max="1">70%</meter>
within a known range
(battery, score).

Input Types
The type attribute controls what kind of input the user sees. This is one of the most important attributes
in HTML.

Attribute Value(s) Description

For Student Use — HTML Reference Page 9


HTML Core Elements Reference Guide | Responsive Web Design — freeCodeCamp

type="text" (default) Single-line text input


type="email" Email address — validates @ symbol on submit

type="password" Hides characters as the user types

type="number" min max step Number input with optional spinner arrows
type="checkbox" checked A tick box — user can select multiple options
type="radio" checked name A round button — user picks ONE from a group (same
name)
type="range" min max step A slider control
value

type="date" min max A calendar date picker


type="time" min max A time picker
type="color" value A color picker widget
type="file" accept multiple File upload — choose files from device
type="submit" value Submits the form. value sets the button label.
type="reset" value Clears all form fields back to default
type="button" value A generic button (needs JavaScript to do anything)
type="hidden" value An invisible field — sends data the user doesn't see
type="search" placeholder Search field — may show a clear (x) button
type="url" placeholder URL input — validates http:// format
type="tel" pattern Telephone number input
placeholder

type="month" Year and month picker

type="week" Year and week number picker

Common Form Attributes

Attribute Value(s) Description


name "username" Names the field — this is what gets sent to the server
id "email-field" Unique identifier — used with label's for attribute
placeholder "Enter your name" Hint text that disappears when user starts typing
value "default text" Pre-fills the input with a starting value
required (no value) Makes the field mandatory — form won't submit if
empty
disabled (no value) Grays out and disables the input field
readonly (no value) User can see but not change the value
maxlength 50 Limits the number of characters a user can type
minlength 8 Requires at least this many characters

For Student Use — HTML Reference Page 10


HTML Core Elements Reference Guide | Responsive Web Design — freeCodeCamp

min 0 Minimum value for number, range, date inputs


max 100 Maximum value for number, range, date inputs
step 5 Interval between valid values (e.g., 0, 5, 10, 15...)
pattern [A-Za-z]{3,} Regular expression the input must match
autocomplete on / off Enables or disables browser autofill suggestions
autofocus (no value) Automatically focuses this input when the page loads
multiple (no value) Allows selecting multiple files or email addresses
checked (no value) Pre-checks a checkbox or radio button
selected (no value) Pre-selects an <option> in a dropdown
for "input-id" On <label> — links it to the input with that id
action "/[Link]" On <form> — where to send the form data
method GET / POST On <form> — how to send data (GET=URL,
POST=hidden)

<form action="/contact" method="POST"> <fieldset> <legend>Contact


Information</legend> <label for="fullname">Full Name:</label> <input
type="text" id="fullname" name="fullname" placeholder="e.g. Amina Ochieng"
required> <label for="email">Email Address:</label> <input type="email"
id="email" name="email" placeholder="you@[Link]" required>
<label for="subject">Subject:</label> <select id="subject" name="subject">
<option value="">-- Choose a subject --</option> <optgroup label="Technical">
<option value="html">HTML Question</option> <option value="css">CSS
Question</option> </optgroup> <option value="other">Other</option>
</select> <label for="message">Message:</label> <textarea id="message"
name="message" rows="5" placeholder="Write your message here..."
required></textarea> <label> <input type="checkbox" name="subscribe"
value="yes"> Subscribe to newsletter </label> <button
type="submit">Send Message</button> <button type="reset">Clear Form</button>
</fieldset> </form>

10. Semantic HTML Elements


Semantic elements clearly describe their purpose — to the browser, developers, and screen readers.
freeCodeCamp strongly emphasizes using semantic HTML over generic <div> and <span> elements.

Why Semantics Matter


Semantic HTML improves accessibility (screen readers), SEO (search engines understand your
content), code readability (other developers understand your layout), and maintainability (easier to
update).

Element Description Example


<header> Top section of a <header><h1>My Blog</h1><nav>...</nav></header>
page or article —

For Student Use — HTML Reference Page 11


HTML Core Elements Reference Guide | Responsive Web Design — freeCodeCamp

logo, navigation,
hero.
<nav> A set of navigation <nav><a href="/">Home</a></nav>
links (menus,
breadcrumbs,
pagination).
<main> The primary content <main><article>...</article></main>
of the page. Only
ONE per page.
<article> A self-contained <article><h2>Post Title</h2><p>...</p></article>
piece of content
(blog post, news
article).
<section> A thematic grouping <section><h2>Skills</h2>...</section>
of content — usually
has a heading.
<aside> Content related but <aside><p>Related links</p></aside>
secondary to the
main content
(sidebars, ads).
<footer> Bottom section — <footer><p>&copy; 2024</p></footer>
copyright, links,
contact info.
<figure> Self-contained <figure><img><figcaption>Caption</figcaption></figure>
media content with
optional caption.
<figcaption> Caption for a <figcaption>A sunset photo</figcaption>
<figure> element.
<details> A disclosure widget <details><summary>FAQ</summary><p>Answer</p></details>
— hidden content
revealed on click.
<summary> The visible heading <summary>Click to see more</summary>
of a <details>
widget.
<dialog> A popup <dialog open><p>Hello!</p></dialog>
dialog/modal box.
<template> Hidden HTML that <template><div>Cloned later</div></template>
can be cloned by
JavaScript later.
<mark> Highlighted text Found <mark>freeCodeCamp</mark> in the text
(semantically
important, like
search results).
<time> Represents a <time datetime="2024-03-15">March 15</time>
date/time in
machine-readable
format.
<address> Contact info for the <address>Email: hi@[Link]</address>
nearest article or
the document.

For Student Use — HTML Reference Page 12


HTML Core Elements Reference Guide | Responsive Web Design — freeCodeCamp

<blockquote> A long quotation <blockquote cite="[Link]">Quote</blockquote>


from another
source.
<cite> References a <cite>HTML Living Standard</cite>
creative work or
source.

<!-- Semantic page structure (avoid using only divs!) --> <!DOCTYPE html> <html
lang="en"> <head> <title>My Portfolio</title> </head> <body> <header>
<h1>Jane Mwangi — Web Developer</h1> <nav> <a href="#about">About</a>
<a href="#projects">Projects</a> <a href="#contact">Contact</a> </nav>
</header> <main> <section id="about"> <h2>About Me</h2> <p>I am
learning web development through freeCodeCamp.</p> </section> <section
id="projects"> <h2>My Projects</h2> <article> <h3>Survey
Form</h3> <p>A form built with pure HTML.</p> </article> </section>
</main> <aside> <h3>Fun Fact</h3> <p>HTML was created in 1991 by Tim
Berners-Lee.</p> </aside> <footer> <address>Contact me at <a
href="[Link] <p>&copy; 2024 Jane
Mwangi</p> </footer> </body> </html>

11. Generic Container Elements


When no semantic element fits, use these generic containers. Use them sparingly — always ask
yourself if a semantic element would be better.

Element Description Example


<div> Block-level generic container. Creates a new <div class="card">Card
line before and after. content</div>

<span> Inline generic container. No line break — stays <span class="red">red


in text flow. text</span>

Rule of Thumb
Use semantic elements first (header, nav, main, article, section, footer). Only use <div> or <span>
when no semantic element fits. Think of <div> as a box and <span> as a highlighter.

12. Global Attributes


Global attributes can be applied to ANY HTML element. These are extremely important to know for
freeCodeCamp projects and real-world work.

Attribute Value(s) Description


id "unique-name" Uniquely identifies ONE element on the page. Used for
links, CSS, JS.

For Student Use — HTML Reference Page 13


HTML Core Elements Reference Guide | Responsive Web Design — freeCodeCamp

class "card highlight" Assigns one or more CSS class names (space-
separated) for styling.
style "color: red;" Adds inline CSS styles directly to the element.
lang "en" / "sw" / Declares the language of the element's content.
"fr"

title "Tooltip text" Shows a tooltip when the user hovers over the element.
hidden (no value) Hides the element — it's in the HTML but not visible.
tabindex 0 / -1 / 1 Controls keyboard tab order. 0=natural, -1=skip,
1+=priority.
contenteditable true / false Makes the element's content editable by the user in the
browser.
draggable true / false Specifies whether the element can be dragged.
spellcheck true / false Enables/disables spell checking for editable content.
translate yes / no Tells translation tools whether to translate this element.
dir ltr / rtl / Text direction: left-to-right (English) or right-to-left
auto (Arabic).
accesskey "k" Sets a keyboard shortcut to access/focus the element.
data-* "any value" Custom data attributes you define (e.g., data-user-
id="42").
aria-label "Close dialog" Accessibility label read by screen readers when no
visible label exists.
aria-hidden true / false Hides element from screen readers (decorative
content).
aria-describedby "id-of- Links an element to a description elsewhere on the
description" page.
role "button" / Defines the accessibility role of an element for screen
"alert" / readers.
"navigation"

13. HTML Entities (Special Characters)


Some characters have special meaning in HTML (like < and >). To display them as text, use HTML
entities.

Character Entity Code Entity Name Description


< &lt; less-than sign Less than / opening tag

> &gt; greater-than sign Greater than / closing


tag

& &amp; ampersand Ampersand — always


encode this
" &quot; quotation mark Double quote (inside
attributes)

For Student Use — HTML Reference Page 14


HTML Core Elements Reference Guide | Responsive Web Design — freeCodeCamp

' &apos; apostrophe Single quote (in HTML5)

© &copy; copyright sign Copyright symbol


® &reg; registered sign Registered trademark

™ &trade; trademark sign Trademark symbol

€ &euro; euro sign Euro currency symbol

£ &pound; pound sign British pound symbol


&nbsp; non-breaking space Prevents line break
between words

– &ndash; en dash En dash (ranges: 2010–


2024)

— &mdash; em dash Em dash — used in


sentences
→ &rarr; right arrow Right-pointing arrow

← &larr; left arrow Left-pointing arrow

★ &#9733; (decimal code) Black star (numeric


entity)

♥ &#9829; (decimal code) Heart symbol (numeric


entity)

14. Meta Tags (Inside <head>)


Meta tags give browsers and search engines information about your page. They are not visible to users
but are critically important.

Attribute Value(s) Description


charset "UTF-8" Defines character encoding. UTF-8 supports all
world languages. Always include this.
name="viewport" content="width=device- Makes your page mobile-responsive. Essential
width, initial- for all modern sites.
scale=1.0"

name="description" content="About my Short description shown by search engines


portfolio" below your link.
name="keywords" content="HTML, CSS, Keywords for search engines (less important
web design" today but still used).
name="author" content="Jane Mwangi" Declares the author of the page.
name="robots" content="index, Tells search engine robots whether to index and
follow" / noindex follow links.
http- content="5; Auto-redirects after 5 seconds to another page.
equiv="refresh" url=[Link]"

property="og:title" content="My Page Open Graph tag — controls how the page
Title" appears when shared on social media.

For Student Use — HTML Reference Page 15


HTML Core Elements Reference Guide | Responsive Web Design — freeCodeCamp

property="og:image" content="[Link]" Open Graph image — the thumbnail shown


when shared on social media.

15. HTML Best Practices


Following these rules will make you a better developer and help you pass freeCodeCamp's project
requirements.

Structure & Accessibility


• Always include <!DOCTYPE html> as the very first line of every HTML file.
• Always add lang="en" (or your language) to the <html> tag.
• Always include <meta charset="UTF-8"> and the viewport meta tag.
• Give every <img> a descriptive alt attribute — never leave it empty unless the image is purely
decorative.
• Always pair <label> with <input> using for and id — this helps both sighted and visually impaired
users.
• Use only ONE <h1> per page — it is your main title.
• Do not skip heading levels (don't go from h1 to h4).

Semantic HTML
• Use <header>, <main>, <footer>, <nav>, <article>, <section> before reaching for <div>.
• Use <button> for clickable actions, <a> for navigation — don't swap them.
• Use <ul> for navigation menus, not just for bullet-point lists.
• Use <table> for tabular data only — never for visual layout.

Code Quality
• Use lowercase for all tag names and attribute names (<div> not <DIV>).
• Always put attribute values in double quotes: class="container" not class=container.
• Indent nested elements with 2 spaces for readability.
• Close all tags — even if browsers forgive omissions, it is good practice.
• Add comments to explain sections: <!-- Navigation section -->.
• Validate your HTML at [Link] — freeCodeCamp tests expect valid HTML.

16. Weekend Project: Personal Portfolio Page

Project: Build Your Personal Portfolio Page

For Student Use — HTML Reference Page 16


HTML Core Elements Reference Guide | Responsive Web Design — freeCodeCamp

Pure HTML only — no CSS or JavaScript required. Focus entirely on structure, semantic
meaning, and correct element usage.

What You Will Build


A multi-section personal portfolio webpage about yourself. This mirrors the kind of projects
freeCodeCamp asks you to build in the Responsive Web Design Certification.

Required Sections & Elements

1. Page Head (Metadata)


• Correct DOCTYPE declaration
• <html lang="en"> with language attribute
• <meta charset="UTF-8"> and viewport meta tag
• A meaningful <title> (Your Name — Portfolio)
• At least one <meta name="description"> tag

2. Header & Navigation


• A <header> element with your name in an <h1>
• A <nav> element with at least 4 anchor links (<a href="#section-id">)
• Each link should jump to a section of the page

3. About Me Section
• Use <section id="about"> with an <h2> heading
• At least 2 paragraphs (<p>) about yourself
• One <figure> with an <img> (use a placeholder: [Link] and <figcaption>
• Use <strong> or <em> at least once for emphasis

4. Skills Section
• Use <section id="skills"> with an <h2> heading
• A description list (<dl>) with at least 5 skills as <dt> and descriptions as <dd>
• OR an unordered list (<ul>) with nested sublists

5. Projects Section
• Use <section id="projects"> with an <h2> heading
• At least 3 <article> elements, one for each project (real or imagined)
• Each article should have: <h3> title, <p> description, and an <a> link
• Use <time> with a datetime attribute for project completion dates

6. Education / Experience Table


• Use <section id="education"> with an <h2> heading

For Student Use — HTML Reference Page 17


HTML Core Elements Reference Guide | Responsive Web Design — freeCodeCamp
• Build a <table> with <caption>, <thead>, <tbody>, and at least 3 rows
• Use <th scope="col"> for header cells
• Use colspan on at least one cell

7. Contact Form
• Use <section id="contact"> with an <h2> heading
• A <form> with at least 5 different input types:
• type="text" for name — with required and placeholder
• type="email" for email — with required
• type="tel" for phone number
• type="radio" buttons for preferred contact method (at least 2)
• type="checkbox" for at least one option
• A <select> dropdown with at least 3 <option> elements
• A <textarea> for message — with rows and placeholder
• A <button type="submit"> to submit the form
• Every <input> must have a <label> linked with for and id

8. Footer
• A <footer> element with copyright using the &copy; entity
• An <address> with your email using <a href="[Link]
• At least 2 social media links with target="_blank" and rel="noopener noreferrer"

Bonus Challenges (Optional but Impressive)


• Add a <details> and <summary> element anywhere on the page (e.g., an FAQ)
• Add a <progress> element to show your skill level in something
• Use <abbr> to explain an acronym like HTML or CSS
• Add HTML comments throughout your code explaining each section
• Include at least 5 different HTML entities in your content
• Add an embedded YouTube video using <iframe>
• Use <blockquote> with a cite attribute for a quote that inspires you

Assessment Checklist
Before submitting, verify every item below:

✓ Requirement

☐ File is named [Link]

☐ <!DOCTYPE html> is the very first line

☐ <html lang="en"> is used

For Student Use — HTML Reference Page 18


HTML Core Elements Reference Guide | Responsive Web Design — freeCodeCamp

☐ <meta charset="UTF-8"> is in the <head>

☐ Viewport meta tag is present

☐ <title> has meaningful content

☐ Only one <h1> exists on the entire page

☐ Headings are used in correct order (no skipping levels)

☐ Every <img> has a descriptive alt attribute

☐ Every <input> has a matching <label> via for and id

☐ Navigation links use href="#section-id" to jump to sections

☐ Sections have matching id attributes for the nav links

☐ At least 8 different semantic elements used (header, nav, main, etc.)

☐ Table has thead, tbody, caption, and th with scope

☐ Form has at least 5 different input types

☐ All tags are properly closed

☐ HTML has been validated at [Link] with no errors

Teacher's Note
This project deliberately touches every major HTML concept covered in this guide: document
structure, semantic elements, text formatting, links, images, lists, tables, forms, and attributes. It also
mirrors the structure of the freeCodeCamp tribute page and survey form certification projects, giving
students direct practice for those assessments.

Quick Reference: Elements at a Glance


Use this table as a fast look-up. All commonly used HTML elements in one place.

Element Description Example


<!DOCTYPE HTML5 declaration — <!DOCTYPE html>
html> always first line
<html> Root element of the <html lang="en">
page
<head> Metadata container (not <head>...</head>
visible)
<body> Visible content container <body>...</body>

<title> Browser tab title <title>My Page</title>

<meta> Page metadata (charset, <meta charset="UTF-8">


viewport)

For Student Use — HTML Reference Page 19


HTML Core Elements Reference Guide | Responsive Web Design — freeCodeCamp

<link> Links external CSS or <link rel="stylesheet" href="[Link]">


resources
<style> Internal CSS styles <style>p { color: blue; }</style>

<script> JavaScript code or file <script src="[Link]"></script>


link
<h1>–<h6> Six levels of headings <h1>Main Title</h1>
(h1 = most important)
<p> Paragraph of text <p>Content here</p>

<br> Line break (self-closing) Line 1<br>Line 2

<hr> Horizontal divider line <hr>


(self-closing)
<span> Inline generic container <span class="red">word</span>

<div> Block-level generic <div class="card">...</div>


container
<strong> Bold — semantically <strong>Warning!</strong>
important
<em> Italic — semantically <em>Really</em> good
emphasized
<b> Bold — visual only <b>Bold</b>

<i> Italic — visual only <i>Italic</i>

<u> Underline <u>Underlined</u>

<s> Strikethrough <s>Old text</s>

<mark> Highlighted text <mark>Key term</mark>

<small> Smaller text <small>Fine print</small>

<sup> Superscript x<sup>2</sup>

<sub> Subscript H<sub>2</sub>O

<abbr> Abbreviation with tooltip <abbr title="HyperText">HTML</abbr>

<blockquote> Long block quotation <blockquote>Quote text</blockquote>

<q> Short inline quotation <q>Short quote</q>

<pre> Preformatted / preserves <pre> code </pre>


whitespace
<code> Inline code snippet <code>let x = 1;</code>

<cite> Cites a work or source <cite>Book Title</cite>

<time> Date or time with <time datetime="2024-01-01">Jan 1</time>


machine format
<a> Hyperlink to page, <a href="[Link]">Link</a>
section, email, file
<img> Displays an image (self- <img src="[Link]" alt="Desc">
closing)
<video> Video player <video src="v.mp4" controls></video>

For Student Use — HTML Reference Page 20


HTML Core Elements Reference Guide | Responsive Web Design — freeCodeCamp

<audio> Audio player <audio src="s.mp3" controls></audio>

<iframe> Embeds another page or <iframe src="url"></iframe>


video
<figure> Image/media with <figure><img><figcaption>Cap</figcaption></figure>
caption wrapper
<figcaption> Caption for a <figure> <figcaption>Caption text</figcaption>

<ul> Unordered list (bullet <ul><li>Item</li></ul>


points)
<ol> Ordered list (numbered) <ol><li>Step 1</li></ol>

<li> List item <li>Item content</li>

<dl> Description list <dl><dt>Term</dt><dd>Def</dd></dl>

<dt> Description term <dt>HTML</dt>

<dd> Description detail <dd>Markup language</dd>

<table> Table container <table>...</table>

<caption> Table title/description <caption>Sales Data</caption>

<thead> Table header group <thead><tr>...</tr></thead>

<tbody> Table body group <tbody><tr>...</tr></tbody>

<tfoot> Table footer group <tfoot><tr>...</tr></tfoot>

<tr> Table row <tr><td>data</td></tr>

<th> Header cell (bold, <th scope="col">Name</th>


centered)
<td> Data cell <td>John</td>

<form> Form container <form action="/submit" method="POST">

<input> Input field — many types <input type="text" name="n">


(self-closing)
<label> Label for an input <label for="id">Name:</label>

<button> Clickable button <button type="submit">Go</button>

<textarea> Multi-line text area <textarea rows="4"></textarea>

<select> Dropdown menu <select name="city">...</select>

<option> Option in a dropdown <option value="a">Option A</option>

<optgroup> Groups options in <optgroup label="Group">...</optgroup>


dropdown
<fieldset> Groups related form <fieldset><legend>Info</legend></fieldset>
fields
<legend> Caption for <fieldset> <legend>Personal Info</legend>

<progress> Progress indicator bar <progress value="70" max="100">

<meter> Measurement within a <meter value="0.6">60%</meter>


range
<header> Page or section header <header><h1>Site Name</h1></header>

For Student Use — HTML Reference Page 21


HTML Core Elements Reference Guide | Responsive Web Design — freeCodeCamp

<nav> Navigation links group <nav><a href="/">Home</a></nav>

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


(one per page)
<article> Self-contained content <article><h2>Title</h2></article>
(post, card)
<section> Thematic content <section id="about">...</section>
grouping
<aside> Secondary/sidebar <aside>Related links</aside>
content
<footer> Page or section footer <footer>&copy; 2024</footer>

<address> Contact information <address>email@[Link]</address>

<details> Expandable disclosure <details><summary>FAQ</summary>...</details>


widget
<summary> Visible heading of <summary>Click to expand</summary>
<details>
<dialog> Modal/popup dialog <dialog open>...</dialog>

Keep Coding!
"The best way to learn HTML is to build things. Don't wait until you feel ready — start
building today."
Validate your work at: [Link] · Practice at: [Link]

For Student Use — HTML Reference Page 22

You might also like