Let us write a complete page for an imaginary bookshop. Type it yourself instead of pasting it. You will remember it better.
index.html
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Juniper Books</title>
</head>
<body>
<h1>Welcome to Juniper Books</h1>
<p>We sell new and used books, and we know where everything is.</p>
<p>Open every day from 9 to 6.</p>
</body>
</html>What each line does
<!DOCTYPE html>tells the browser this is a modern HTML page.<html lang="en">wraps the whole page and says the language is English.<head>holds information about the page that visitors do not see on the page itself.<meta charset="UTF-8">makes sure letters such as é and ₹ display correctly.<title>sets the text shown in the browser tab.<body>holds everything visitors see.<h1>is the main heading and each<p>is a paragraph.
What you see
The browser shows a large heading and two paragraphs. The title Juniper Books appears in the browser tab, not on the page.
Try small changes
Change the heading text. Add a third paragraph. Remove the closing </p> from one paragraph and see what happens. Browsers are forgiving and will often still show something, but your code will be harder to maintain. Always close what you open.
lightbulb
Save, then refresh
Edits only show after you save the file and refresh the page. If nothing changes, check that you saved and that you are looking at the right tab.
Exercise: a page about you
Create a new file called about.html. Give it a title, a main heading with your name and two paragraphs: one about what you do and one about what you want to learn.
Show a possible solution
about.html
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>About Asha</title>
</head>
<body>
<h1>Asha Verma</h1>
<p>I work in a library and I like organising things.</p>
<p>I want to learn how to build websites.</p>
</body>
</html>Next, look at the structure of the page more closely in HTML Page Structure.