Brtest Tutorial
HTML – Structure of a Web Page
HTML (HyperText Markup Language) is the foundation of every web page. It defines the structure and content of a website. You will use HTML to add text, images, links, headings, paragraphs, and more.
Note: HTML elements are the building blocks of a web page. They tell the browser how to display the content.
Basic Structure
Every HTML page starts with a document declaration and has a head and a body section:
Example
Basic HTML page:
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first web page.</p>
</body>
</html>
Try it Yourself »
Tip: Save this file as index.html and open it in your browser to see your first web page!
The <head> Element
The <head> element contains meta information about the page, such as the title, character encoding, and linked files (CSS, JS, etc.).
Example
Head section with meta and title:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Awesome Page</title>
</head>
Try it Yourself »
Note: The <meta name="viewport"> tag ensures your page looks good on all devices (responsive design).
The <body> Element
The <body> element contains everything that is visible to the user: headings, paragraphs, images, links, and other HTML elements.
Example
Basic content inside the body:
<body>
<h1>My Web Page</h1>
<p>Welcome to my website!</p>
<a href="about.html">Learn more about me</a>
</body>
Try it Yourself »
Common HTML Elements
Here are a few of the most common HTML elements you will use:
<h1>–<h6>: Headings<p>: Paragraphs<a>: Links<img>: Images<ul>/<ol>: Lists<table>: Tables
Example
Using headings, paragraphs, and a link:
<h1>My Favorite Hobby</h1>
<p>I love web development!</p>
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools</a>
Try it Yourself »
Adding Images
Images are added with the <img> tag. Use the src attribute to define the image source and the alt attribute for alternate text.
Example
Adding an image:
<img src="pic_trulli.jpg" alt="Trulli" width="500" height="333">
Try it Yourself »
Tip: Always include the alt attribute for accessibility and better SEO.
HTML Page Layout
Modern web pages often use these semantic layout elements:
<header>- introductory content or navigation<nav>- main navigation links<section>- thematic grouping of content<article>- independent content like a blog post<footer>- footer content or contact info
Example
Simple layout using semantic elements:
<header>
<h1>My Website</h1>
<nav>
<a href="#home">Home</a> |
<a href="#about">About</a> |
<a href="#contact">Contact</a>
</nav>
</header>
<section>
<h2>Welcome</h2>
<p>Thanks for visiting my website.</p>
</section>
<footer>
<p>© 2025 My Website</p>
</footer>
Try it Yourself »
Summary
- HTML gives structure to a web page
- Each page has
<head>and<body>sections - Use semantic tags to organize content
- Save your first file as
index.html
In the next chapter, you will learn how to style your HTML pages using CSS.
