■ STUDY STACK · Notes Vol. 1
HTML Elements
The Complete Beginner's Guide
Learn HTML the fun way — with real examples & diagrams!
<html>
<body>
<p>
</p>
</body>
</html>
■ Topic ■ Level ■ Style
HTML Elements Beginner Visual Notes
© Study Stack · studystack.notes · Page 1 of many
,■ STUDY STACK HTML Elements — Beginner Notes
1
What is HTML?
The skeleton of every website
HTML stands for HyperText Markup Language. It is the standard language used to create web
pages. Think of HTML as the skeleton of a website — it gives the page its structure, just like bones
give your body its shape.
■ FUN EXAMPLE
Imagine you are building a house. HTML is the bricks and walls. CSS is the paint and decoration.
JavaScript is the electricity that makes things work!
HTML Document Structure
<!DOCTYPE html> ← tells the browser: this is HTML5!
<html>
<head> <body>
<title> <h1> <p>
Structure Content container Content tags
<div> <img>
Every HTML file follows this tree structure.
Your very first HTML page:
HTML
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello, World! ■</h1>
<p>Welcome to my first web page!</p>
</body>
</html>
© Study Stack · studystack.notes Page 2
, ■ STUDY STACK HTML Elements — Beginner Notes
■ PRO TIP
Always save your HTML file with the .html extension, e.g. index.html Then open it in any web
browser to see it live!
Anatomy of an HTML Element
Anatomy of an HTML Element
<p class="intro"> Hello World! </p>
Opening Attribute Content Closing
tag tag
Every element has an opening tag, optional attributes, content, and a closing tag.
■■ REMEMBER
Some elements are SELF-CLOSING — they have no content and no closing tag! Examples: <br>,
<hr>, <img>, <input>, <meta>, <link>
© Study Stack · studystack.notes Page 3
HTML Elements
The Complete Beginner's Guide
Learn HTML the fun way — with real examples & diagrams!
<html>
<body>
<p>
</p>
</body>
</html>
■ Topic ■ Level ■ Style
HTML Elements Beginner Visual Notes
© Study Stack · studystack.notes · Page 1 of many
,■ STUDY STACK HTML Elements — Beginner Notes
1
What is HTML?
The skeleton of every website
HTML stands for HyperText Markup Language. It is the standard language used to create web
pages. Think of HTML as the skeleton of a website — it gives the page its structure, just like bones
give your body its shape.
■ FUN EXAMPLE
Imagine you are building a house. HTML is the bricks and walls. CSS is the paint and decoration.
JavaScript is the electricity that makes things work!
HTML Document Structure
<!DOCTYPE html> ← tells the browser: this is HTML5!
<html>
<head> <body>
<title> <h1> <p>
Structure Content container Content tags
<div> <img>
Every HTML file follows this tree structure.
Your very first HTML page:
HTML
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello, World! ■</h1>
<p>Welcome to my first web page!</p>
</body>
</html>
© Study Stack · studystack.notes Page 2
, ■ STUDY STACK HTML Elements — Beginner Notes
■ PRO TIP
Always save your HTML file with the .html extension, e.g. index.html Then open it in any web
browser to see it live!
Anatomy of an HTML Element
Anatomy of an HTML Element
<p class="intro"> Hello World! </p>
Opening Attribute Content Closing
tag tag
Every element has an opening tag, optional attributes, content, and a closing tag.
■■ REMEMBER
Some elements are SELF-CLOSING — they have no content and no closing tag! Examples: <br>,
<hr>, <img>, <input>, <meta>, <link>
© Study Stack · studystack.notes Page 3
