HTML · Lesson 1
The frame of every web page
Every web page, from a news site to an online game, starts with the same short frame of tags. Learn this frame once and you can start any page.
A web page is written in HTML. HTML uses tags: short words inside angle brackets, like <body>.
Most tags come in pairs. The opening tag <body> starts something, and the closing tag </body>, with a slash, ends it.
Whatever you write between the two belongs to that tag.
A few tags have nothing to wrap, so they have no closing tag. You'll meet them in Lesson 2.
Every page has two parts: information about the page, and the page itself. Tags tell the browser which part is which.
Think of a book. The whole book is <html>.
The information page at the front (author, publisher, the book's name) is <head>. It belongs to the book, but it isn't part of the story.
The name printed on the spine, which you can see while the book sits on a shelf, is <title>. In a browser, the "spine" is the tab at the top.
The pages you actually read are <body>.
Just like a front and back cover hold a book together, <html> and </html> hold the whole page.
Inside, each part opens and closes in turn: <head> … </head>, then <body> … </body>.
When you put an opening tag, some content and a closing tag together, you get an element.
For example, <title>Front Page Bytes</title> is a title element.
A good habit: type the closing tag right after the opening tag, then go back and write the content between them. The code editors on WebCore leave closing tags to you, so this habit keeps every tag closed.
Elements can go inside other elements, like smaller boxes inside a bigger box. <head> and <body> sit inside <html>, and <title> sits inside <head>.
The picture below shows which tag is inside which.
When one element is inside another, close the inner one first. That's why </title> comes before </head>, and </head> comes before </html>.
The browser reads your code from top to bottom. It uses what's in <head> to set up the page, such as the name on the tab. Then it shows what's in <body> in the window.
Let's build the front page of Front Page Bytes, our pretend tech news site, one small step at a time. New lines in each step are highlighted, and the mini browser beside the code shows what you'd see.
<!DOCTYPE html>
<!DOCTYPE html> tells the browser: "this is a modern HTML page." It goes on the very first line and has no closing tag.
The page is still blank, which is expected, since nothing has been added to show yet.
<!DOCTYPE html><html lang="en"> </html>
<html> wraps the whole page. Its closing tag </html> goes on the last line, and everything else goes between them.
lang="en" is extra information written inside the opening tag (more on this in Lesson 4). It says the page is in English, which helps screen readers (apps that read pages aloud) pronounce it correctly. For Filipino, you would write lang="fil".
<!DOCTYPE html><html lang="en"> <head> <title>Front Page Bytes</title> </head></html>
Look at the tab of the mini browser: it now says Front Page Bytes. That text comes from <title>, which belongs inside <head>.
The page area is still empty, because <head> holds information about the page, not things to show on it.
Notice the spaces at the start of some lines. They only make the code easier to read by showing what sits inside what. The browser ignores them.
<!DOCTYPE html><html lang="en"> <head> <title>Front Page Bytes</title> </head> <body> <h1>Front Page Bytes</h1> <p>Your daily tech news, made simple.</p> </body></html>
Now something shows up. Everything you want visitors to see goes between <body> and </body>.
Here, <h1> makes a big heading and <p> makes a paragraph. Both are covered in Lesson 2.
That's a complete web page. The pages you build next all start from this same frame.
<!DOCTYPE html>
Page type (first line)
<!DOCTYPE html>How to use
Examples
The first line of every page you make, right above <html>.
<!DOCTYPE html><html lang="en"><html>
The whole page
<html lang="en"> ... </html>How to use
lang="en"
The language of the page. Use lang="fil" for Filipino.
<head> then <body>
The two parts inside it, in this order.
</html>
Closes the page on the last line.
Examples
A page written in English.
<html lang="en"> ...</html>A page written in Filipino.
<html lang="fil"> ...</html><head>
Information about the page
<head> ... </head>How to use
<title>
The name on the browser tab. It goes inside <head>.
Examples
Give the page a tab name.
<head> <title>Front Page Bytes</title></head>Add CSS rules for the page (you will see this in the CSS lessons).
<head> <title>Front Page Bytes</title> <style> body { background-color: #F0F7FF; } </style></head><title>
Name on the browser tab
<title>Front Page Bytes</title>How to use
Examples
The home page of a news site.
<title>Front Page Bytes</title>A story page: the story first, then the site name.
<title>New Phones Arrive | Front Page Bytes</title><body>
What people see
<body> ... </body>How to use
<h1>, <p>, <img> …
The content tags from Lesson 2 go here.
Examples
A page with a heading and a paragraph.
<body> <h1>Front Page Bytes</h1> <p>Your daily tech news.</p></body>A page with a picture and a link.
<body> <img src="logo.png" alt="Logo"> <a href="/news">Read the news</a></body>These are mistakes many beginners make. Each mini browser shows what really happens.
<!DOCTYPE html><html lang="en"> <head> <title>Front Page Bytes </head> <body> <h1>Front Page Bytes</h1> <p>Your daily tech news, made simple.</p> </body></html>
Without </title>, the browser treats everything after it as part of the title. The page goes blank, and the tab fills up with your code.
Tip: Close it on the same line: <title>Front Page Bytes</title>
<!DOCTYPE html><html lang="en"> <head> <tittle>Front Page Bytes</tittle> </head> <body> <h1>Hello, readers!</h1> </body></html>
The browser doesn't know a tag called <tittle>, so it skips the tag and shows the words on the page. The tab gets no title.
Tip: Spell it t-i-t-l-e. When text shows up in an unexpected place, check the tag names first.
<!DOCTYPE html><html lang="en"> <head> <title>Front Page Bytes</title> <h1>Front Page Bytes</h1> </head> <body> <p>Your daily tech news, made simple.</p> </body></html>
This one looks fine, because the browser quietly moves the heading into <body>. It's still best to put it there yourself: the code is easier to read, and other tools may not correct it the same way.
Tip: Keep everything people should see inside <body>.
Edit the code on the left. The mini browser updates as you type, and each goal gets a check mark when it's done.
No clicking needed. Each goal gets a check mark by itself once your code does it.
Nice work! You finished every goal.
<!DOCTYPE html>, then <html> wraps everything else.<head> holds information about the page. Its <title> shows on the browser tab.<body> holds everything people see on the page.Lesson content prepared by the WebCore F.E. team for beginner learners. The following references were used in preparing this lesson.