What Is HTML? Your First Web Page

What you will learn

By the end of this lesson you will know what HTML is, what an element and an attribute are, and you will have written and run your first web page.

What is HTML?

HTML stands for HyperText Markup Language. It is the language that describes the structure and meaning of a web page: which part is a heading, which is a paragraph, which is a link, an image or a list.

Every website you have ever used is built from three technologies that each have a job:

• HTML decides what is on the page (structure and content).
• CSS decides how it looks (colours, fonts, layout).
• JavaScript decides how it behaves (clicks, animations, data).

HTML comes first because CSS and JavaScript both work on top of it. This course teaches them in that order.

Good to know: HTML is a markup language, not a programming language. It describes content; it does not run logic such as loops or calculations.

How a browser uses HTML

When you open a web page, your browser downloads an HTML file, reads it from top to bottom, and builds the page you see from it. If the HTML says “this is a heading”, the browser draws large bold text. If it says “this is a link”, the browser makes it clickable.

You do not need to install anything to write HTML. A browser and a text editor are enough, and the code editor on this site runs your code instantly.

Elements, tags and attributes

HTML is made of elements. Most elements have an opening tag, some content, and a closing tag:

<p>This is a paragraph.</p>

• <p> is the opening tag.
• This is a paragraph. is the content.
• </p> is the closing tag (note the /).

Elements can carry extra information in attributes, which are written inside the opening tag as name="value":

<a href="https://mycodenest.in">Visit MyCodeNest</a>

Here <a> creates a link, and the href attribute says where the link goes.

Some elements have no content and no closing tag. These are called void elements. The image element is one:

<img src="photo.jpg" alt="A cat sitting on a sofa">

Your first web page

Here is a complete, valid HTML page. Do not worry about every line yet; the next lesson explains each part.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my first web page.</p>
  </body>
</html>

To run it on your own computer:

1. Open any text editor (Notepad, VS Code, TextEdit in plain-text mode).
2. Paste the code above.
3. Save the file as index.html. Make sure it does not end in .txt.
4. Double-click the file. It opens in your browser.

Or skip all of that: press Try it on the code block above, or the Practice in Editor button at the top of this page. The editor opens in a new tab, so you can keep this lesson open next to it.

Common mistakes

• Forgetting the closing tag. <p>Hello without </p> may appear to work, but it causes confusing problems later. Always close elements that need it.
• Saving as .txt. If your file is index.html.txt, the browser shows the code instead of the page. Turn on “show file extensions” to check.
• Changing the file and not refreshing. After editing, save the file and refresh the browser tab. The online editor refreshes for you.
• Mismatched quotes. Attribute values need matching quotes: href="page.html", not href="page.html'.

Practice

1. Change the heading text to your own name.
2. Add a second paragraph telling the reader one thing you want to learn.
3. Add a link to your favourite website using the <a> element and its href attribute.

Recap

• HTML describes the structure and meaning of a web page.
• An element is usually an opening tag, content, and a closing tag.
• Attributes add extra information to an element, like href on a link.
• You can write HTML in any text editor and open the file in a browser.