LEARN HTML IN A SINGLE DAY

chrismory · Oct 12, 2025

1. What is HTML?
HTML stands for HyperText Markup Language.
It’s the core language used to structure web pages. Think of it as the skeleton of every website ,it organizes text, images, links, and other elements so browsers know how to display them.

When you open any site whether it’s Google, YouTube, or Facebook , underneath all that design and interactivity is HTML holding everything together.
Here’s the thing:

HTML doesn’t handle colors or layouts. That’s what CSS does.
HTML doesn’t handle logic or interactivity. That’s what JavaScript does.
HTML’s job is simple: describe the structure and content.

Example:

HTML:

<h1>Hello, world!</h1>

<p>This is my first web page.</p>

This tells the browser:

“Here’s a big heading”
“Here’s a paragraph below it”

2. Tools You Need to Write and Run HTML Code
You don’t need anything fancy. Just two things:

A Text Editor (to write the code)
A Web Browser (to view the output)

A. Text Editors
These are where you’ll type and save your HTML files (.html).

For Laptop/Desktop (Windows, macOS, Linux):

Visual Studio Code (VS Code) – free, popular, and perfect for beginners.
Download VS Code
Sublime Text – lightweight and fast.
Download Sublime Text
Notepad++ – simple and beginner-friendly (Windows only).
Download Notepad++

For Android:

If you’re coding on your phone, these work well:

Dcoder – full mobile IDE with HTML preview.
Dcoder on Play Store
Acode – clean, powerful HTML editor for Android.
Acode on Play Store
HTML Editor Lite – basic and lightweight option.
HTML Editor Lite

B. Web Browsers
Any modern browser can open and render HTML files:

Google Chrome
Mozilla Firefox
Microsoft Edge
Safari (Mac/iPhone)

All you do is save your file with .html extension (for example, index.html)
Then double-click it or open it in your browser you’ll instantly see your web page.

Writing Your First HTML Page
Step 1: Create a New File
Open your code editor (for example VS Code or Acode on Android).

Create a new file.
Save it as

3. index.html
The name “index.html” is the default file browsers look for when opening a website.

Step 2: Write the Basic HTML Structure
Every HTML page follows a core structure that looks like this:

HTML:

<!DOCTYPE html>

<html>

  <head>

    <title>My First Page</title>

  </head>

  <body>

    <h1>Hello, World!</h1>

    <p>Welcome to my first website.</p>

  </body>

</html>

Let’s break it down in plain English:

Line	Explanation
<!DOCTYPE html>	Tells the browser this is an HTML5 document.
<html>	The start of your web page. Everything goes inside this tag.
<head>	Contains invisible information like the page title, description, and metadata.
<title>	The text that appears in your browser tab.
<body>	The visible part of your website — where your content lives.
<h1>	Heading (largest text).
<p>	Paragraph.

Step 3: Save and View Your Page
Now let’s see the output.
On Laptop/Desktop:

Save your file as index.html
Locate it in your folder.
Right-click → Open with → Chrome (or your browser)

You’ll see:

Rich (BB code):

Hello, World!

Welcome to my first website.

That’s your first live webpage running right on your computer.
On Android (using Acode or Dcoder):

Create and save a file named index.html
Tap the Run/Preview button inside the app.
It’ll open a small browser view showing your webpage instantly.

Step 4: Experiment a Bit
Try changing your text:

HTML:

<h1>My First HTML Page</h1>
<p>I’m learning HTML today!</p>

Or add more lines:

HTML:

<h2>About Me</h2>
<p>I love coding and creating new things on the web.</p>

Each time you save and refresh the page, your changes appear immediately.

Step 5: Folder Organization Tip
As you build more pages, keep them in one folder:
my-website/
│
├── index.html
├── about.html
└── images/
└── photo.jpg
That way, your site stays clean and easy to manage.

Understanding HTML Elements and Tags
Step 1: What Are Tags?

HTML is built with tags , they tell the browser what each part of your page is.

A tag usually comes in pairs:

HTML:

<p>Hello!</p>

<p> is the opening tag
</p> is the closing tag
Everything between them is the content

Together, that forms an element.

Step 2: The Structure of an Element

HTML:

<tagname>Content goes here</tagname>

Example:

HTML:

<h1>This is a heading</h1>

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

Tags define the meaning of the content ,not how it looks (that’s CSS’s job).

Step 3: Common HTML Elements You’ll Use All the Time

1. Headings

Headings range from <h1> to <h6>.
<h1> is the largest, <h6> is the smallest.

<h1>Main Title</h1>

<h2>Subheading</h2>

<h3>Smaller Heading</h3>

Use them in logical order to organize your content.

2. Paragraphs

<p>This is a paragraph of text. It can span multiple lines but will appear as one block in the browser.</p>

3. Line Breaks and Horizontal Lines

HTML:

<p>This is line one.<br>This is line two.</p>

<hr>

<p>This paragraph comes after a horizontal line.</p>

<br> breaks a line.
<hr> draws a line across the page.

4. Links (Anchors)

HTML:

<a href="https://www.google.com" target="_blank">Visit Google</a>

href = where the link goes
target="_blank" = opens link in a new tab

5. Images

HTML:

<img src="photo.jpg" alt="A description of the photo" width="200">

src = image file path
alt = text shown if image can’t load
width (and height) adjust the size

Try it with an online image:

HTML:

<img src="https://picsum.photos/300" alt="Random photo">

6. Lists

Unordered list (bullets):

HTML:

<ul>

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

</ul>

Ordered list (numbers):

HTML:

<ol>

<li>Learn HTML</li>

<li>Learn CSS</li>

<li>Learn JS</li>

</ol>

7. Comments

Comments are invisible notes for you or other developers:

HTML:

<!-- This section lists my skills -->

They don’t appear on the web page.

Step 4: Putting It All Together

Let’s combine what we learned:

HTML:

<!DOCTYPE html>

<html>

<head>

<title>HTML Elements Demo</title>

</head>

<body>

<h1>Welcome to My Page</h1>

<p>This page shows basic HTML elements in action.</p>

<h2>Favorite Links</h2>

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

<h2>My Hobbies</h2>

<ul>

<li>Reading</li>

<li>Coding</li>

<li>Music</li>

</ul>

<img src="https://picsum.photos/250" alt="Random image">

<hr>

<p>Thanks for visiting!</p>

</body>

</html>

Save it as index.html and open it in your browser.
You’ll instantly see a complete webpage with text, lists, a link, and an image.

Top 20 HTML Tags You Must Know

#	Tag	Meaning	Example
1	<!DOCTYPE html>	Tells the browser this is an HTML5 document.	<!DOCTYPE html>
2	<html>	The root element of every HTML document.	<html> ... </html>
3	<head>	Holds metadata (info about the page, not visible to users).	<head> <title>Page</title> </head>
4	<title>	Sets the title shown in the browser tab.	<title>My Website</title>
5	<meta>	Provides metadata like description, charset, or viewport.	<meta charset="UTF-8">
6	<body>	Contains everything visible on the web page.	<body>Content here</body>
7	<h1>–<h6>	Headings — from largest to smallest.	<h1>Main Title</h1>
8	<p>	Paragraph of text.	<p>This is a paragraph.</p>
9	<br>	Line break. No closing tag.	Line one<br>Line two
10	<hr>	Horizontal rule (divider line).	<hr>
11	<a>	Link (anchor tag).	<a href="https://google.com">Google</a>
12	<img>	Displays an image.	<img src="photo.jpg" alt="Description">
13	<ul>	Unordered (bulleted) list.	<ul><li>Item 1</li></ul>
14	<ol>	Ordered (numbered) list.	<ol><li>Step 1</li></ol>
15	<li>	List item (used inside <ul> or <ol>).	<li>HTML</li>
16	<div>	Block-level container for grouping content.	<div><p>Text</p></div>
17	<span>	Inline container for styling small parts of text.	<p>Hello <span>world</span></p>
18	<form>	Collects user input data.	<form action="/submit">...</form>
19	<input>	Input field inside a form.	<input type="text" placeholder="Your name">
20	<button>	Clickable button.	<button>Submit</button>

Bonus Tags (Useful to Know)
If you want to go further:

<section> – divides content into sections.
<header> – top section of a page or article.
<footer> – bottom area, usually with contact info.
<nav> – navigation bar.
<article> – independent content (like a blog post).
<strong> – bold text with importance.
<em> – italic text (emphasis).

Complete Example Using 20+ Tags
Here’s a full working HTML file showing how these tags fit together.

HTML:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta name="description" content="Learn basic HTML structure and tags">

  <title>My First Complete HTML Page</title>

</head>

<body>

  <!-- Header Section -->

  <header>

    <h1>Welcome to My Website</h1>

    <nav>

      <a href="#home">Home</a> |

      <a href="#about">About</a> |

      <a href="#contact">Contact</a>

    </nav>

    <hr>

  </header>

 

  <!-- Main Content -->

  <main>

    <section id="home">

      <h2>Home Section</h2>

      <p>Hello there! This is my first HTML page. I’m learning <strong>HTML</strong> and <em>web development</em>.</p>

      <p>Here’s a random image I like:</p>

      <img src="https://picsum.photos/300" alt="Random image from Picsum" width="300">

    </section>

 

    <section id="about">

      <h2>About Me</h2>

      <p>My name is <span style="color:blue;">Chris</span>. I love coding, music, and technology.</p>

      <h3>My Skills</h3>

      <ul>

        <li>HTML Basics</li>

        <li>CSS Styling</li>

        <li>JavaScript Fundamentals</li>

      </ul>

 

      <h3>My Learning Steps</h3>

      <ol>

        <li>Understand HTML structure</li>

        <li>Practice every day</li>

        <li>Build small projects</li>

      </ol>

    </section>

 

    <section id="contact">

      <h2>Contact Me</h2>

      <form action="#" method="post">

        <label for="name">Name:</label><br>

        <input type="text" id="name" name="name" placeholder="Enter your name" required><br><br>

 

        <label for="email">Email:</label><br>

        <input type="email" id="email" name="email" placeholder="Enter your email" required><br><br>

 

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

      </form>

    </section>

  </main>

 

  <!-- Footer -->

  <footer>

    <hr>

    <p>&copy; 2025 My First Website. All rights reserved.</p>

  </footer>

</body>

</html>

What You’ll See When You Open It

A title in your browser tab
Navigation links (Home, About, Contact)
Headings, paragraphs, image, lists, form, and footer
Real use of over 20 HTML tags in one working page

chrismory · Oct 12, 2025

Page Structure and Layout in HTML
Think of your page like a newspaper:

The header has the logo and menu.
The body has different sections and articles.
The footer holds contact info or copyrights.

HTML has tags for each of those roles. Let’s break them down.

1. <header> — The Top of the Page

Used for logos, titles, and navigation menus.

HTML:

<header>

<h1>My Website</h1>

<nav>

<a href="#home">Home</a>

<a href="#about">About</a>

<a href="#contact">Contact</a>

</nav>

</header>

Why it matters:
The header gives the page identity. It usually appears once at the top.

2. <nav> — Navigation Area

This tag groups all the links that help users move around your site.

HTML:

<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
</ul>
</nav>

Tip: It doesn’t have to be inside <header>, but it often is.

3. <main> — The Main Content

Everything that’s unique to this page goes inside <main>.

HTML:

<main>

<h2>Welcome to My Page</h2>

<p>This is where the core content lives.</p>

</main>

4. <section> — Group Related Content

Think of sections as chapters of a page.

HTML:

<section id="about">

<h2>About Me</h2>

<p>I’m a web developer learning HTML.</p>

</section>

You can have multiple sections — for “About,” “Services,” “Contact,” etc.

5. <article> — Independent Content

An article is a self-contained block — like a blog post or news card.

HTML:

<article>

<h3>My First Blog Post</h3>

<p>Today I learned how to structure an HTML page.</p>

</article>

If you removed this block and posted it elsewhere, it would still make sense — that’s the idea.

6. <aside> — Side Information

Usually used for sidebars, ads, or small notes related to the main content.

HTML:

<aside>

<h4>Quick Links</h4>

<ul>

<li><a href="#tips">HTML Tips</a></li>

<li><a href="#resources">Resources</a></li>

</ul>

</aside>

7. <footer> — The Bottom of the Page

Appears at the bottom with credits, contact, or links.

HTML:

<footer>

<p>&copy; 2025 My Website. All rights reserved.</p>

<p>Follow me on <a href="#">Twitter</a></p>

</footer>

8. <div> — Generic Container

<div> doesn’t have a meaning — it’s just a box to group or style content.
You’ll use it a lot when adding layout or CSS.

HTML:

<div class="card">

<h3>HTML Basics</h3>

<p>Learn the building blocks of the web.</p>

</div>

9. <span> — Inline Container

For styling or highlighting a small part of text.

HTML:

<p>My favorite color is <span style="color: red;">red</span>.</p>

How These Fit Together

Here’s a clean, real-world layout showing all of them in action:

HTML:

<!DOCTYPE html>



<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Structure Example</title>
</head>
<body>
<header>
<h1>Chris’s Web Journal</h1>
<nav>
<a href="#home">Home</a> |
<a href="#articles">Articles</a> |
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<section id="home">
<h2>Welcome</h2>
<p>This is my personal space on the web where I share ideas and tutorials.</p>
</section>
<section id="articles">
<h2>Recent Articles</h2>
<article>
<h3>Learning HTML the Smart Way</h3>
<p>HTML is the backbone of the web. Once you learn it, you’ll understand how every website is built.</p>
</article>
<article>
<h3>My First Project</h3>
<p>I built a simple personal site using just HTML. It was a great start to web development.</p>
</article>
</section>
<aside>
<h3>Resources</h3>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML">MDN HTML Docs</a></li>
<li><a href="https://www.w3schools.com/html/">W3Schools HTML</a></li>
</ul>
</aside>
<section id="contact">
<h2>Contact Me</h2>
<form action="#" method="post">
<label>Name:</label><br>
<input type="text" name="name" required><br><br>
<label>Email:</label><br>
<input type="email" name="email" required><br><br>
<button type="submit">Send</button>
</form>
</section>
</main>
<footer>
<hr>
<p>&copy; 2025 Chris’s Web Journal</p>
</footer>
</body>
</html>

What This Structure Gives You

Readable hierarchy — you can tell what each part does
Easier styling later with CSS
SEO-friendly (search engines understand your structure)
Cleaner code that’s easier to expand as your site grows

Media and Links in HTML
HTML gives you several simple but powerful tags to add visuals and interactivity.

Let’s break it down by type.

1. Images — <img>

The <img> tag lets you show pictures from your local files or the internet.

Code:

<img src="photo.jpg" alt="My profile photo" width="250">

Attributes you’ll use:

src → the image file path or URL
alt → description text (used if image fails to load)
width or height → control the size (in pixels)

Example with an online image:

Code:

<img src="https://picsum.photos/300" alt="Random photo">

If your image is in a folder:

Code:

<img src="images/profile.jpg" alt="Profile photo">

Tip:
Always use the alt attribute — it helps screen readers and SEO.

2. Links — <a> (Anchor Tag)

Links connect pages together.
Basic structure:

Code:

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

Common attributes:

href → destination URL
target="_blank" → opens the link in a new tab
title → shows a tooltip on hover

Example:

Code:

<a href="https://www.google.com" target="_blank" title="Go to Google">Open Google</a>

You can also link to another section on the same page:

Code:

<a href="#contact">Jump to Contact Section</a>

Or link to another file in your site:

Code:

<a href="about.html">About Page</a>

3. Video — <video>

You can embed and control videos easily:

HTML:

<video controls width="400">

<source src="video.mp4" type="video/mp4">

Your browser does not support the video tag.

</video>

Attributes:

controls → adds play/pause buttons
autoplay → plays automatically
loop → repeats
muted → starts with sound off

Example using an online video:

HTML:

<video controls width="300">

<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">

</video>

4. Audio — <audio>

Embedding sound or music is similar to video:

HTML:

<audio controls>

<source src="sound.mp3" type="audio/mpeg">

Your browser does not support the audio element.

</audio>

You can also use autoplay, loop, and muted here.

5. Embedding YouTube Videos (or External Media)

YouTube provides “embed” code — usually with <iframe>.

Example:

HTML:

<iframe width="560" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY"

title="YouTube video"

frameborder="0"

allowfullscreen>

</iframe>

You can replace the src link with any YouTube video’s embed URL.

6. Combining Media and Links
You can even make images clickable:

HTML:

<a href="https://myportfolio.com">

<img src="profile.jpg" alt="My portfolio" width="200">

</a>

Or link a button:

HTML:

<a href="contact.html">

<button>Contact Me</button>

</a>

Full Example — Media and Links Page

Here’s a clean HTML page showing all these in action:

HTML:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Media and Links in HTML</title>

</head>

<body>

<header>

<h1>HTML Media and Links</h1>

<nav>

<a href="#images">Images</a> |

<a href="#videos">Videos</a> |

<a href="#audio">Audio</a> |

<a href="#external">External Links</a>

</nav>

<hr>

</header>


<main>

<section id="images">


<h2>1. Adding Images</h2>


<p>Local or online images make your page more visual.</p>

<img src="https://picsum.photos/300" alt="Random image" width="300">

<br><br>

<a href="https://unsplash.com" target="_blank">View More Images on Unsplash</a>

</section>

<hr>

<section id="videos">

<h2>2. Embedding Videos</h2>

<video controls width="400">

<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">

</video>

<p>Or from YouTube:</p>

<iframe width="400" height="225" src="https://www.youtube.com/embed/tgbNymZ7vqY"title="Sample YouTube Video"frameborder="0"allowfullscreen>

</iframe>

</section>

<hr>


<section id="audio">


<h2>3. Adding Audio</h2>

<audio controls>
<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">

</audio>
</section>

<hr>

<section id="external">

<h2>4. External Links</h2>

<p>Visit these helpful HTML resources:</p>

<ul>

<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank">MDN HTML Guide</a></li>

<li><a href="https://www.w3schools.com/html/" target="_blank">W3Schools HTML Tutorial</a></li>

</ul>


</section>


</main>

<footer>

<hr>

<p>&copy; 2025 HTML Learning Project</p>

</footer>

</body>

</html>

What You’ll Learn by Doing This

How to embed images, audio, and video in a page
How to make clickable links and media previews
How to mix media and structure tags in one clean layout

Forms and User Input
A form is like a container that holds all your input fields — text boxes, buttons, checkboxes, etc.
The basic structure looks like this:

Code:

<form action="submit.php" method="POST">

<!-- input fields go here -->

</form>

Key attributes:

action → the page or script that will handle the data when submitted
method → how the data is sent (GET or POST)
GET shows data in the URL (used for searches)
POST hides data (used for login, sign-up, etc.)

1. Text Input — <input type="text">

Code:

<label for="name">Name:</label>
<input type="text" id="name" name="username" placeholder="Enter your name">

Attributes:

id → unique identifier for linking label
name → the key name used when sending data
placeholder → hint inside the input box

2. Password Field — <input type="password">

Code:

<label for="password">Password:</label>
<input type="password" id="password" name="password">

Hides characters as the user types.

3. Email and Number Inputs

Code:

<label>Email:</label>

<input type="email" name="email" placeholder="you@example.com">

<label>Age:</label>

<input type="number" name="age" min="1" max="120">

HTML automatically checks if the email format is valid and restricts number range.

4. Radio Buttons — <input type="radio">

Used for selecting one option from a group.

HTML:

<p>Gender:</p>

<input type="radio" name="gender" value="male"> Male

<input type="radio" name="gender" value="female"> Female

Same name = one selection only.

5. Checkboxes — <input type="checkbox">

Used for multiple selections.

HTML:

<p>Hobbies:</p>

<input type="checkbox" name="hobby" value="music"> Music

<input type="checkbox" name="hobby" value="sports"> Sports

<input type="checkbox" name="hobby" value="reading"> Reading

6. Dropdown Menu — <select>

HTML:

<label for="country">Country:</label>

<select id="country" name="country">

<option value="tanzania">Tanzania</option>

<option value="kenya">Kenya</option>

<option value="uganda">Uganda</option>

</select>

7. Textarea — <textarea>

Used for long text input (like messages).

HTML:

<label for="message">Your Message:</label><br>
<textarea id="message" name="message" rows="4" cols="40" placeholder="Type here..."></textarea>

8. Buttons

Submit button (sends form data):

Code:

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

Reset button (clears all fields):

Code:

<button type="reset">Clear</button>

Custom button (you can script it later):

Code:

<button type="button">Click Me</button>

9. File Upload — <input type="file">

HTML:

<label>Upload a profile picture:</label>
<input type="file" name="photo">

10. Hidden Fields

Stores data you don’t want users to see.

Code:

<input type="hidden" name="userid" value="12345">

Full Example — User Registration Form

Here’s everything combined into one clean HTML page:

HTML:

<!DOCTYPE html>



<html lang="en">



<head>



<meta charset="UTF-8">



<meta name="viewport" content="width=device-width, initial-scale=1.0">



<title>User Registration Form</title>



</head>



<body>



<h1>User Registration</h1>







<form action="submit.php" method="POST">



<!-- Text inputs -->



<label for="name">Full Name:</label><br>



<input type="text" id="name" name="fullname" placeholder="Enter your name" required><br><br>







<label for="email">Email:</label><br>



<input type="email" id="email" name="email" placeholder="you@example.com" required><br><br>







<label for="password">Password:</label><br>



<input type="password" id="password" name="password" required><br><br>







<!-- Radio buttons -->



<p>Gender:</p>



<input type="radio" id="male" name="gender" value="male">



<label for="male">Male</label>



<input type="radio" id="female" name="gender" value="female">



<label for="female">Female</label><br><br>







<!-- Checkboxes -->



<p>Hobbies:</p>



<input type="checkbox" name="hobby" value="music"> Music



<input type="checkbox" name="hobby" value="sports"> Sports



<input type="checkbox" name="hobby" value="reading"> Reading<br><br>







<!-- Dropdown -->



<label for="country">Country:</label>



<select id="country" name="country">



<option value="tanzania">Tanzania</option>



<option value="kenya">Kenya</option>



<option value="uganda">Uganda</option>



</select><br><br>







<!-- Textarea -->



<label for="bio">Short Bio:</label><br>



<textarea id="bio" name="bio" rows="4" cols="40" placeholder="Tell us something about you..."></textarea><br><br>







<!-- File upload -->



<label>Upload Profile Picture:</label>



<input type="file" name="profile_pic"><br><br>







<!-- Hidden input -->



<input type="hidden" name="ref" value="website">







<!-- Buttons -->



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



<button type="reset">Clear</button>



</form>



</body>



</html>

What You Learned Here

How to use <form> to collect user data
How each input type behaves differently
How to group fields with <label>, <select>, <textarea>, and <button>
What “action” and “method” really mean

LEARN HTML IN A SINGLE DAY

chrismory

Administrator

chrismory

Administrator