HTML Basic Elements

A simple guide to understanding basic HTML elements that are used to build web pages.

📝 This guide will help you understand the basic HTML elements that are used to create simple web pages. Even a 5-year-old can learn it!

What are HTML Elements? 🌍

HTML elements are like building blocks for web pages. Each element tells the web page what to display. These elements can be things like titles, text, pictures, or even links!

Let's explore some important HTML elements:

🧱 `<html>`, `<head>`, `<body>`

<html>: The big box that holds everything in your webpage.
<head>: The part of the box where we keep important things like the page name. This part is invisible.
<body>: Where the actual visible content of the webpage goes (like text, pictures, etc.).

📝 `<title>`

The <title> element defines the name of your webpage. This title shows up at the top of your browser tab.

Example:

<title>My Fun Webpage</title>

When you open a webpage, you'll see this title in your browser tab, such as "My Fun Webpage."

🏷️ `<h1>` to `<h6>` (Headings)

Headings are titles for different sections of your webpage. They range from large to small:

<h1>: The largest title (main title of the page).
<h2> to <h6>: Smaller titles.

Example:

<h1>This is the Big Title</h1>
<h2>This is a Smaller Title</h2>

The higher the number, the smaller the title!

📄 `<p>` (Paragraphs)

A <p> tag is used to create a paragraph, which is just a block of text.

Example:

<p>This is a paragraph. It can contain lots of text, like a story or important information.</p>

↩️ `<br>` (Line Break)

If you want to start a new line, use the <br> tag. It's like pressing the "Enter" key on your keyboard.

Example:

This is the first line.<br>
This is the second line, right under it.

── `<hr>` (Horizontal Rule)

An <hr> creates a horizontal line across the page. It’s like a divider that separates sections.

Example:

<hr>

This will create a horizontal line across the page.

💬 ``

A comment is like a note that no one can see on the webpage. It's only visible to the people who are building the webpage.

Example:

<!-- This is a note for the webpage builder! -->

The browser won’t show it, but it helps the page creators leave reminders or notes.

🧪 Try Yourself

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

Open Sandbox

HTML Basic Elements

What are HTML Elements? 🌍

🧱 `<html>`, `<head>`, `<body>`

📝 `<title>`

🏷️ `<h1>` to `<h6>` (Headings)

📄 `<p>` (Paragraphs)

↩️ `<br>` (Line Break)

── `<hr>` (Horizontal Rule)

💬 ``

🧪 Try Yourself

Conclusion 🎉

Resources 📚

Learn HTML5

HTML5 Tutorials

On this page