HTML5 Basics: The Building Blocks of the Web

What is HTML?#

HTML stands for HyperText Markup Language. It is not a programming language (it doesn't have logic or loops). It is a structural language. It tells the browser what things are.

"This is a heading." "This is a paragraph." "This is a button."

1. The Skeleton of a Page#

Every HTML file follows this structure:

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
    <!-- Metadata, CSS links, Scripts go here -->
</head>
<body>
    <!-- Visible content goes here -->
    <h1>Welcome to WebFiddle</h1>
</body>
</html>

play_arrowRun this in the HTML editor

<!DOCTYPE html>: Tells the browser "We are using modern HTML5".
<head>: Invisible settings (SEO title, analytics).
<body>: The visible page.

2. Common Tags#

You will use these 90% of the time.

Text

<h1> to <h6>: Headings (Importance hierarchy).
<p>: Paragraph.
<strong>: Bold (semantic importance).
<em>: Italic (emphasis).

Containers

<div>: A generic box. Use it for layout.
<span>: A generic inline text wrapper.

Interaction

<a href="google.com">: Anchor (Link).
<button>: Clickable button.
<img src="cat.jpg" alt="A cute cat">: Image. (Always add alt text for accessibility!).

3. Forms: Getting User Input#

Forms are how users send data to your server.

<form>
    <label for="email">Email:</label>
    <input type="email" id="email" placeholder="you@example.com" required>
    
    <label for="pass">Password:</label>
    <input type="password" id="pass">
    
    <button type="submit">Login</button>
</form>

play_arrowRun this in the HTML editor

type="email": Mobile phones will show the @ key on the keyboard automatically.
required: The browser will prevent submission if this is empty. No JS needed!

4. Attributes: Adding Details#

Tags can have Attributes (name-value pairs).

id="unique": A unique identifier (like a Social Security Number).
class="btn red": A group identifier (like a Team Jersey). Used for CSS styling.
style="color: red;": Inline styles (Avoid using this, use CSS classes instead).

5. Semantic HTML (Best Practice)#

Don't just use <div> for everything. Use meaningful tags.

Use <header> for the top logo area.
Use <nav> for menus.
Use <main> for the primary content.
Use <footer> for the copyright bar.

This helps search engines (SEO) understand your content structure.

Summary#

HTML is simple but strict.

Close your tags (</h1>).
Nest them correctly (don't put a <div> inside a <p>).
Use Semantic tags (<article>, <header>) whenever possible.

Write your first HTML page now