A beginner-friendly, step-by-step guide with practical examples and three mini projects.
Every website starts with structure.
Before you choose colors, add animations, or build interactive features, you need to tell the browser what your content actually is. Is it a heading? A paragraph? A photograph? A form?
That is HTML’s job.
The good news? You do not need to memorize every HTML tag to start building useful pages. Learn a core set, understand what each one means, and practice combining them.
In this guide, you will learn how to:
Create a complete HTML document.
Organize content with headings, paragraphs, and semantic elements.
Add links, images, lists, and tables.
Build clear, accessible forms.
Create three small projects using what you have learned.
Open your favorite text editor. Let’s build something.
1. What Is HTML?
HTML stands for HyperText Markup Language.
It describes the structure and meaning of web content. It is a markup language, rather than a programming language: it labels content instead of defining algorithms.
Consider this example:
<h1>Welcome to My Website</h1>
<p>I am learning how to build web pages.</p>
The browser understands that:
<h1> introduces the page’s main heading.
<p> contains a paragraph.
HTML works alongside two other core web technologies:
| Technology | Main responsibility | Example |
|---|---|---|
| HTML | Structure and meaning | This content is a button. |
| CSS | Appearance and layout | The button is blue and rounded. |
| JavaScript | Behavior and logic | Clicking the button updates a counter. |
Think of HTML as the structure of a house. CSS decorates it, and JavaScript makes things respond.
Tags, elements, and attributes
These three terms appear throughout HTML tutorials.
<a href="https://example.com">Visit Example</a>
Here is how they fit together:
| Part | Name | Purpose |
|---|---|---|
<a> | Opening tag | Starts a link |
href="https://example.com" | Attribute | Sets the destination |
Visit Example | Content | Provides the clickable text |
</a> | Closing tag | Ends the link |
| The complete example | Element | Combines the tags and their content |
Most elements have opening and closing tags. Some, called void elements, do not contain content and do not have closing tags.
For example:
<img src="cat.jpg" alt="An orange cat sleeping on a chair">
<br>
<hr>
You do not write </img>, </br>, or </hr>.
2. Start with a Complete HTML Document
Create a file named index.html and add this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My First HTML Page</title>
</head>
<body>
<h1>Hello, HTML!</h1>
<p>This is my first web page.</p>
</body>
</html>
Save the file and open it in a browser.
Congratulations: you have a working web page. It may look simple, but every line has a purpose.
<!DOCTYPE html>: Identify the document type
This declaration tells the browser to use standards mode for the document.
It is a declaration, not an HTML element, and belongs at the beginning of the file.
<html>: Wrap the document
The <html> element contains the document’s HTML content.
The lang attribute declares the primary language:
<html lang="en">
Language information helps assistive technologies, including screen readers, interpret the content correctly.
<head>: Describe the page
The <head> contains metadata and references to resources. It does not hold the main content visitors read.
Common contents include:
Character encoding.
The browser tab title.
Viewport settings.
Links to stylesheets.
<meta>: Supply metadata
This line declares UTF-8 character encoding:
<meta charset="UTF-8">
This line helps mobile browsers size the viewport to the device:
<meta name="viewport" content="width=device-width, initial-scale=1">
The viewport setting is a useful foundation for responsive design. Your layout and images still need to adapt appropriately.
<title>: Name the browser tab
<title>My First HTML Page</title>
The title also helps identify the page in bookmarks and other browser interfaces.
Make it descriptive. “Chocolate Chip Cookie Recipe” is more useful than “Page 1.”
<body>: Hold the page content
The <body> contains the page’s main content: text, images, links, forms, and more.
Remember: <title> names the document; <h1> displays a heading within the page.
3. Give Your Content a Clear Hierarchy
A web page should be easy to scan before it is read word for word.
Headings and paragraphs provide that structure.
<h1> to <h6>: Headings
HTML offers six heading levels:
<h1>Beginner’s Guide to Photography</h1>
<h2>Choosing a Camera</h2>
<p>Start with a camera that suits your needs.</p>
<h3>Compact Cameras</h3>
<p>These are convenient for everyday photography.</p>
<h3>Mirrorless Cameras</h3>
<p>These offer interchangeable lenses.</p>
<h2>Learning Composition</h2>
<p>Good composition helps guide the viewer’s attention.</p>
Use headings according to their relationship:
<h1> introduces the page’s main topic.
<h2> introduces a major section.
<h3> introduces a subsection within that section.
Additional levels support deeper nesting.
For a beginner-friendly page structure, use one clear <h1> and nest the remaining headings logically.
Do not choose a heading level because its default size looks right. Use CSS to change appearance.
<p>: Paragraphs
Use <p> for a paragraph of text:
<p>Learning HTML becomes easier when you build small projects.</p>
<p>Start simple, test your changes, and keep experimenting.</p>
Pressing Enter several times in your source code does not normally create visible paragraph breaks. Use separate paragraph elements.
<strong>: Importance
<p><strong>Important:</strong> Save your work before closing the editor.</p>
<strong> communicates importance, seriousness, or urgency. Browsers usually display it in bold.
<em>: Stress emphasis
<p>You do <em>not</em> need expensive software to learn HTML.</p>
<em> adds stress emphasis. Browsers usually display it in italics.
Choose <strong> and <em> for their meaning. For purely visual styling, use CSS.
<br>: A meaningful line break
Use <br> where a line break belongs within the content, such as a postal address or poem:
<p>
Jamie Lee<br>
14 Garden Street<br>
London
</p>
Do not stack <br> elements to create empty space between sections. That is a CSS task.
<hr>: A thematic break
<hr> marks a shift in topic or scene:
<p>That was how my first project began.</p>
<hr>
<p>Three months later, I launched my first website.</p>
Browsers typically display it as a horizontal line, but its meaning is a thematic break.
4. Connect Pages with Links
<a>: The anchor element
The <a> element creates a hyperlink when it has an href attribute.
<a href="https://example.com">Visit the example website</a>
You can link to several kinds of destinations.
Another page in your project:
<a href="about.html">About me</a>
A section on the same page:
<a href="#contact">Go to contact details</a>
<h2 id="contact">Contact Details</h2>
An email address:
<a href="mailto:hello@example.com">Email us</a>
An email link opens a configured email handler; it does not send a message automatically.
Write useful link text
Avoid vague text such as:
<a href="guide.html">Click here</a>
Prefer a description of the destination:
<a href="guide.html">Read the beginner’s HTML guide</a>
Opening a new tab
When there is a clear reason to open a new browsing context, use:
<a
href="https://example.com"
target="_blank"
rel="noopener"
>
Visit Example (opens in a new tab)
</a>
For ordinary navigation, opening links in the current tab is a good default.
5. Add Images That Make Sense
<img>: Display an image
<img
src="images/coastal-path.jpg"
alt="A narrow walking path above a rocky coastline"
width="800"
height="600"
>
The key attributes are:
| Attribute | Purpose |
|---|---|
src | Specifies the image location |
alt | Provides a text alternative |
width | Declares the image width |
height | Declares the image height |
Width and height values should reflect the image’s proportions. They help browsers reserve space while the image loads.
Write useful alternative text
Ask yourself:
What information would someone miss if they could not see this image?
For an informative image, describe the relevant content:
<img
src="plant.jpg"
alt="A basil plant with yellowing leaves"
>
For a purely decorative image, use an empty alternative:
<img src="decorative-wave.svg" alt="">
Do not omit alt simply because the image is decorative.
<figure> and <figcaption>: Pair content with a caption
<figure>
<img
src="first-webpage.png"
alt="A web page with a heading, introduction, and three links"
width="800"
height="450"
>
<figcaption>
My first HTML project, built with a few essential elements.
</figcaption>
</figure>
A caption gives visible context. Alternative text provides an appropriate substitute for the image. They serve different purposes.
6. Organize Information with Lists
<ul>: An unordered list
Use an unordered list when the order is not essential.
<ul>
<li>A text editor</li>
<li>A web browser</li>
<li>A little curiosity</li>
</ul>
<ol>: An ordered list
Use an ordered list when sequence matters.
<ol>
<li>Create an HTML file.</li>
<li>Add your content.</li>
<li>Save the file.</li>
<li>Open it in your browser.</li>
</ol>
<li>: A list item
Each item in an ordered or unordered list belongs inside <li>.
You can also nest a list inside a list item:
<ul>
<li>
Front-end essentials
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Version control basics</li>
</ul>
<dl>, <dt>, and <dd>: Terms and descriptions
A description list is useful for glossaries or related name-value information:
<dl>
<dt>HTML</dt>
<dd>Defines the structure and meaning of web content.</dd>
<dt>CSS</dt>
<dd>Controls presentation and layout.</dd>
</dl>
7. Build Meaningful Page Layouts
Semantic elements describe the role of content.
They make HTML easier to understand and can provide useful structure for assistive technologies.
| Element | Typical purpose |
|---|---|
<header> | Introductory content for a page or section |
<nav> | A major navigation block |
<main> | The document’s dominant content |
<section> | A thematic group of content, usually with a heading |
<article> | A self-contained composition, such as a blog post |
<aside> | Related but secondary content |
<footer> | Footer information for a page or section |
<div> | Generic block container |
<span> | Generic inline container |
Here is a simple structure:
<body>
<header>
<h1>The Curious Developer</h1>
<nav aria-label="Main navigation">
<a href="index.html">Home</a>
<a href="articles.html">Articles</a>
<a href="about.html">About</a>
</nav>
</header>
<main>
<article>
<h2>My First Week Learning HTML</h2>
<p>Small projects helped me understand the basics.</p>
<section>
<h3>What I Learned</h3>
<p>Good structure makes a page easier to navigate.</p>
</section>
</article>
<aside>
<h2>Related Reading</h2>
<a href="css-basics.html">Getting started with CSS</a>
</aside>
</main>
<footer>
<p>Created by Jamie.</p>
</footer>
</body>
When should you use <div> and <span>?
Use them when you need a container and no more meaningful element fits.
<div class="profile-card">
<p>Learning status: <span class="status">In progress</span></p>
</div>
A <div> does not mean “section,” “article,” or “navigation.” It is a generic container.
Also, semantic tags do not automatically create a visual layout. An <aside> will not move to the right side of the page without layout styling.
8. Mini Project One: Build a Personal Profile Page
Let’s combine headings, paragraphs, navigation, lists, and semantic structure.
Step 1: Create the file
Create profile.html.
Step 2: Add the complete page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jamie Lee | Personal Profile</title>
</head>
<body>
<header>
<h1>Hi, I’m Jamie!</h1>
<p>A curious beginner learning to build for the web.</p>
<nav aria-label="Profile navigation">
<a href="#about">About</a>
<a href="#skills">Skills</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<section id="about">
<h2>About Me</h2>
<p>
I enjoy photography, good coffee, and turning
<em>“What if?”</em> into small web projects.
</p>
</section>
<section id="skills">
<h2>What I’m Learning</h2>
<ul>
<li>Writing meaningful HTML</li>
<li>Creating accessible links</li>
<li>Organizing content clearly</li>
</ul>
<p><strong>Next goal:</strong> Style this page with CSS.</p>
</section>
<section id="contact">
<h2>Contact</h2>
<p>
<a href="mailto:jamie@example.com">Email Jamie</a>
</p>
</section>
</main>
<footer>
<p>Built with HTML and plenty of curiosity.</p>
</footer>
</body>
</html>
Step 3: Test it
Open the file in your browser.
Click the navigation links. Each should move to its matching section because the href fragment matches that section’s id.
Step 4: Make it yours
Replace the name, introduction, skills, and email address.
Bonus challenge: Add a photograph using <figure>, <img>, and <figcaption>. Place the image in your project folder and make sure its filename matches the src value.
9. Display Structured Data with Tables
Tables are useful when information has meaningful relationships across rows and columns.
Use them for schedules, comparisons, and results—not for positioning page content.
Essential table elements
| Element | Purpose |
|---|---|
<table> | Contains the table |
<caption> | Gives the table a title |
<thead> | Groups header rows |
<tbody> | Groups the main data rows |
<tr> | Defines a row |
<th> | Defines a header cell |
<td> | Defines a data cell |
Example:
<table>
<caption>Weekly HTML Practice Plan</caption>
<thead>
<tr>
<th scope="col">Day</th>
<th scope="col">Topic</th>
<th scope="col">Practice Time</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Monday</th>
<td>Headings and paragraphs</td>
<td>20 minutes</td>
</tr>
<tr>
<th scope="row">Wednesday</th>
<td>Links and images</td>
<td>30 minutes</td>
</tr>
<tr>
<th scope="row">Friday</th>
<td>Mini project</td>
<td>45 minutes</td>
</tr>
</tbody>
</table>
The scope attribute identifies whether a header applies to a column or row.
A plain HTML table may look visually simple. Add borders and spacing with CSS when you are ready.
10. Build Forms People Can Understand
Forms allow visitors to enter information.
Good forms begin with clear labels and appropriate controls.
<form>: Group the controls
<form action="/contact" method="post">
<!-- Form controls go here. -->
</form>
action specifies the submission destination.
method specifies how the form data is submitted.
The destination must be implemented by a server or form service.
HTML creates the form interface and submission behavior. It does not automatically store entries or deliver email.
<label> and <input>: Ask for information
<label for="full-name">Full name</label>
<input
type="text"
id="full-name"
name="fullName"
autocomplete="name"
required
>
The label’s for value matches the input’s id.
These attributes do different jobs:
| Attribute | Purpose |
|---|---|
type | Selects the control type |
id | Identifies the element and connects its label |
name | Supplies the field name used during submission |
autocomplete | Describes the expected information for autofill |
required | Makes a value necessary for normal form submission |
An id should be unique within the page.
Useful input types
<input type="text" name="username">
<input type="email" name="email">
<input type="password" name="password">
<input type="number" name="quantity" min="1" max="10">
<input type="date" name="eventDate">
These isolated examples demonstrate input types. In a real form, give each control an appropriate label.
An email input checks basic email syntax; it does not verify that the address exists.
<textarea>: Collect longer text
<label for="message">Your message</label>
<textarea
id="message"
name="message"
rows="5"
required
></textarea>
<select> and <option>: Offer a dropdown
<label for="topic">Choose a topic</label>
<select id="topic" name="topic">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
</select>
<fieldset> and <legend>: Group related controls
<fieldset>
<legend>Preferred session</legend>
<label>
<input type="radio" name="session" value="morning">
Morning
</label>
<label>
<input type="radio" name="session" value="afternoon">
Afternoon
</label>
</fieldset>
Radio buttons with the same name form a group in which one option can be selected.
Here, the inputs sit inside their labels, so a separate for and id connection is unnecessary.
<button>: Trigger an action
<button type="submit">Send message</button>
Be explicit about the type:
submit submits the form.
button has no default submission behavior.
reset restores initial form values; use it carefully because users can lose their changes.
Use links for navigation and buttons for actions.
Practical tip: A placeholder is a hint, not a replacement for a visible label.
11. Mini Project Two: Build a Workshop Registration Form
This project uses a tiny amount of JavaScript to demonstrate successful browser validation without sending data anywhere.
Step 1: Create workshop.html
Step 2: Add this code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML Workshop Registration</title>
</head>
<body>
<main>
<h1>Join the HTML Workshop</h1>
<p>A friendly session for curious beginners.</p>
<p>This practice form does not send or save your information.</p>
<form id="registration">
<p>
<label for="full-name">Full name (required)</label><br>
<input
type="text"
id="full-name"
name="fullName"
autocomplete="name"
required
>
</p>
<p>
<label for="email">Email address (required)</label><br>
<input
type="email"
id="email"
name="email"
autocomplete="email"
required
>
</p>
<p>
<label for="experience">Your HTML experience</label><br>
<select id="experience" name="experience">
<option value="beginner">Completely new</option>
<option value="some-practice">Some practice</option>
<option value="refresher">Here for a refresher</option>
</select>
</p>
<fieldset>
<legend>Preferred session</legend>
<label>
<input
type="radio"
name="session"
value="morning"
checked
>
Morning
</label>
<label>
<input type="radio" name="session" value="afternoon">
Afternoon
</label>
</fieldset>
<p>
<label for="goals">What would you like to learn?</label><br>
<textarea id="goals" name="goals" rows="4"></textarea>
</p>
<button type="submit">Try registration</button>
<p id="result" role="status"></p>
</form>
</main>
<script>
const form = document.querySelector("#registration");
const result = document.querySelector("#result");
form.addEventListener("submit", function (event) {
event.preventDefault();
result.textContent =
"Demo complete! The form passed browser validation. " +
"No registration was sent or saved.";
});
</script>
</body>
</html>
Step 3: Test the form
Try these experiments:
Submit it with the required fields empty.
Enter an incomplete email address.
Complete the fields with valid-looking values and submit again.
Click each label and observe how its control responds.
The browser handles the built-in validation. The script prevents submission and displays the demonstration message.
For a real registration system, connect the form to a server or form service and validate submitted data there too.
12. Add Useful Extras with Native HTML
HTML includes more than text and forms.
<details> and <summary>: Expandable content
These elements create a disclosure widget without custom JavaScript:
<details>
<summary>Do I need to know CSS first?</summary>
<p>No. You can learn HTML first and add CSS afterward.</p>
</details>
Use <summary> for the visible label and place the expandable content after it.
<code> and <pre>: Display code
Use <code> for a short code fragment:
<p>The <code>required</code> attribute makes a field mandatory.</p>
Use <pre> with <code> for a block where whitespace should be preserved:
<pre><code>&lt;h1&gt;Hello, HTML!&lt;/h1&gt;</code></pre>
The entities < and > display angle brackets instead of starting HTML tags.
<time>: Mark dates and times
<p>
Published on
<time datetime="2026-11-07">November 7, 2026</time>.
</p>
The visible text is reader-friendly, while datetime supplies a machine-readable value.
<audio> and <video>: Embed media
<audio controls src="audio/introduction.mp3">
<a href="audio/introduction.mp3">Download the introduction</a>
</audio>
<video controls width="640">
<source src="video/tutorial.mp4" type="video/mp4">
<track
kind="captions"
src="video/captions-en.vtt"
srclang="en"
label="English"
default
>
<a href="video/tutorial.mp4">Download the tutorial</a>
</video>
These examples require matching media files. Provide appropriate captions and transcripts so the information is available to more people.
13. Mini Project Three: Create a Recipe and FAQ Page
This final project combines several elements into a page you could expand into a small food blog.
Step 1: Create recipe.html
Step 2: Add the complete document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Five-Minute Yogurt Bowl | Tiny Kitchen</title>
</head>
<body>
<header>
<p>Tiny Kitchen</p>
<nav aria-label="Recipe navigation">
<a href="#ingredients">Ingredients</a>
<a href="#instructions">Instructions</a>
<a href="#questions">Questions</a>
</nav>
</header>
<main>
<article>
<header>
<h1>Five-Minute Yogurt Bowl</h1>
<p>A colorful breakfast for mornings when time disappears.</p>
</header>
<section>
<h2>Recipe at a Glance</h2>
<dl>
<dt>Preparation time</dt>
<dd>5 minutes</dd>
<dt>Servings</dt>
<dd>1</dd>
<dt>Difficulty</dt>
<dd>Beginner-friendly</dd>
</dl>
</section>
<section id="ingredients">
<h2>Ingredients</h2>
<ul>
<li>1 cup plain yogurt</li>
<li>1 banana, sliced</li>
<li>A handful of berries</li>
<li>2 tablespoons granola</li>
</ul>
</section>
<section id="instructions">
<h2>Instructions</h2>
<ol>
<li>Spoon the yogurt into a bowl.</li>
<li>Add the banana slices and berries.</li>
<li>Sprinkle the granola over the top.</li>
<li>Enjoy immediately for maximum crunch.</li>
</ol>
</section>
<section id="questions">
<h2>Frequently Asked Questions</h2>
<details>
<summary>Can I use dairy-free yogurt?</summary>
<p>Yes. Choose a dairy-free yogurt you enjoy.</p>
</details>
<details>
<summary>Can I use different fruit?</summary>
<p>
Absolutely. Try chopped apples, peaches,
or whatever fruit you have available.
</p>
</details>
</section>
<footer>
<p>Recipe by Jamie, enthusiastic breakfast experimenter.</p>
</footer>
</article>
</main>
<footer>
<p>Tiny Kitchen — small recipes, happy mornings.</p>
</footer>
</body>
</html>
Step 3: Explore the result
Check that:
The navigation links reach the correct sections.
The ingredients appear as an unordered list.
The instructions appear as numbered steps.
Each FAQ expands when activated.
The heading levels follow a logical order.
Notice that the page has two footers: one belongs to the article, and the other belongs to the overall page.
Step 4: Try a small upgrade
Add a recipe photograph with a caption, or create a table comparing ingredient substitutions.
You now have a reusable structure for another recipe. Change the content and keep the meaningful markup.
14. Common HTML Mistakes—and How to Fix Them
Mistake 1: Incorrect nesting
Incorrect:
<p>This is <strong>important.</p></strong>
Correct:
<p>This is <strong>important.</strong></p>
Close nested elements in the reverse order that you opened them.
Mistake 2: Putting block content inside a paragraph
Incorrect:
<p>
My favorite tools:
<ul>
<li>A text editor</li>
</ul>
</p>
Correct:
<p>My favorite tools:</p>
<ul>
<li>A text editor</li>
</ul>
A paragraph cannot contain a list. Browsers may repair invalid markup in ways you did not intend.
Mistake 3: Reusing an ID
Incorrect:
<section id="about">...</section>
<section id="about">...</section>
Correct:
<section id="about">...</section>
<section id="projects">...</section>
Use unique IDs. Use a shared class when several elements belong to the same styling or scripting group.
Mistake 4: Using links as pretend buttons
Avoid:
<a href="#">Save changes</a>
For an action handled by JavaScript, use:
<button type="button">Save changes</button>
The button still needs code to implement the action, but its semantics are appropriate.
Mistake 5: Forgetting that file paths must match
If your image is named profile.jpg, this reference will not find it:
<img src="portrait.jpg" alt="Jamie smiling outdoors">
Check filenames, extensions, folders, and letter case.
Mistake 6: Expecting HTML to handle appearance
HTML describes content. CSS handles spacing, colors, typography, and layout.
A plain page is a perfectly good starting point. Build its structure first.
15. Your HTML Quick Reference
| Goal | Elements to reach for |
|---|---|
| Set up a document | <html>, <head>, <body> |
| Add page metadata | <title>, <meta>, <link> |
| Structure written content | <h1>–<h6>, <p> |
| Express importance or emphasis | <strong>, <em> |
| Navigate somewhere | <a> |
| Display an image and caption | <img>, <figure>, <figcaption> |
| Create lists | <ul>, <ol>, <li> |
| Pair terms with descriptions | <dl>, <dt>, <dd> |
| Define meaningful page regions | <header>, <nav>, <main>, <footer> |
| Group thematic or independent content | <section>, <article> |
| Add secondary content | <aside> |
| Create generic containers | <div>, <span> |
| Display tabular data | <table>, <caption>, <tr>, <th>, <td> |
| Collect user input | <form>, <label>, <input>, <textarea> |
| Offer choices | <select>, <option> |
| Group form controls | <fieldset>, <legend> |
| Trigger an action | <button> |
| Add expandable content | <details>, <summary> |
| Display code | <pre>, <code> |
| Identify a date or time | <time> |
| Embed media | <audio>, <video>, <source>, <track> |
The <link> element, listed above, is commonly used to connect a stylesheet from inside <head>:
<link rel="stylesheet" href="styles.css">
Create the matching CSS file when you are ready to style your projects.
Your Next Challenge
Choose one project from this guide and rebuild it without copying the complete example.
Start with the document structure. Add the main heading. Create the sections. Then introduce links, lists, images, or form controls as needed.
Before calling it finished, ask:
Does the page have a descriptive title?
Do the headings form a clear hierarchy?
Are the links understandable?
Do informative images have useful alternative text?
Does every form control have a label?
Can I navigate interactive elements using the keyboard?
Do all file paths and section links work?
You do not need to remember every tag. You need to get comfortable asking one useful question:
“What kind of content is this?”
Once you can answer that, choosing the right HTML element becomes much easier.
