Your First Website: Building a Page With HTML Tags
Every website you have ever visited -- your favorite game site, a video site, even the page this lesson is on -- is built from the same basic ingredient: HTML. HTML stands for HyperText Markup Language, and it is not really a programming language for doing math or logic. It is more like a set of labels that tell a web browser 'this part is a heading,' 'this part is a paragraph,' or 'this part is a picture.' The very first website ever put online, created in 1991 by Tim Berners-Lee, was made of plain HTML text -- no fancy graphics, just labeled text. You are about to learn the same basic labels, called tags, that built that first page.
What You'll Learn
- What an HTML tag is and how opening and closing tags work together - Four essential tags: heading, paragraph, bold, and link - How a web browser reads your tags and turns them into a real page - How to build your own simple webpage using just these tags
How Tags Work: Opening and Closing
An HTML tag is a word wrapped in angle brackets, like <h1>. Almost every tag needs a matching closing tag with a forward slash, like </h1>, to mark where that piece ends. Whatever sits between the opening and closing tag is what gets labeled. For example: <h1>Space Facts</h1> tells the browser 'Space Facts is a big heading.' The browser doesn't show the tags themselves -- it reads them as instructions, then displays 'Space Facts' in large, bold heading text. This opening-tag / content / closing-tag pattern is the single most important rule in HTML.
Four Tags You Need to Know
<h1> and </h1> -- makes a big, bold heading, usually the title of your page. <p> and </p> -- stands for 'paragraph,' and wraps regular sentences of text. <b> and </b> -- makes the wrapped text bold, for emphasis. <a href="..."> and </a> -- creates a clickable link; the href part inside the opening tag holds the web address it links to, and the text between the tags is what the visitor actually clicks on. Notice that the link tag is a little different: it carries extra information (the address) right inside the opening tag itself. This extra information is called an attribute, and href is short for 'hypertext reference.'
<p>My favorite animal is a <b>red panda</b>.</p> -- A browser reads this and displays: My favorite animal is a red panda. (with 'red panda' shown in bold). The tags themselves never appear on the actual page a visitor sees.
Building a Tiny Page, Line by Line
A real webpage wraps everything inside two more tags: <html> at the very start and end, and <body> around the visible content. Here is a complete, working mini-page: <html> <body> <h1>My Pet Facts</h1> <p>My dog's name is <b>Max</b>. He is 3 years old.</p> <p>Learn more about dogs at <a href="https://www.akc.org">the AKC website</a>.</p> </body> </html> Read top to bottom: a heading, then a paragraph with one bold word, then a paragraph containing a clickable link. That is genuinely enough HTML to publish a real, working webpage.
In the tag <a href="https://www.akc.org">the AKC website</a>, what does the visitor actually see and click on?
What is wrong with this line of HTML: <h1>Space Facts<p>?
Write Your Own Mini Webpage
On paper or in a plain text document, write your own complete mini webpage about a topic you love (a hobby, an animal, a game). It must include: one <h1> heading, at least two <p> paragraphs, at least one <b>bold</b> word, and one <a href="...">link</a> to a real website about your topic. Read your finished code out loud to a partner, describing what each tag does, before showing them the 'rendered' version you imagine a browser would display.
Want to keep learning?
Sign up for free to access the full curriculum — all subjects, all ages.
Start Learning Free