HTML is plain text with tags that tell your browser what to display

HTML is not a programming language — it is a set of labels you wrap around text to tell a browser what each piece means. A browser reads those labels and decides how to show the content. You write HTML in any text editor, save it with a .html filename, and open it in a browser. That is the entire process.

The labels are called tags, and they always look the same: an opening tag like <p> and a closing tag like </p>. Everything between them is the content the tag describes. A browser ignores spaces, line breaks, and extra blank lines in your HTML — it only reads the tags and the text inside them.

You do not need special software, a server, or an internet connection to write and test HTML. You write it in Notepad or any text editor, save the file, and double-click it to open it in your browser. That file lives on your computer and works exactly the same way as a file on a website.

Key Takeaways

  • Save your HTML as a plain text file with a .html extension, then open it in your browser by double-clicking it or dragging it into a browser window.
  • Every HTML document needs an opening <!DOCTYPE html> declaration, an <html> tag, a <head> section, and a <body> section where your visible content goes.
  • Tags always come in pairs — an opening tag and a closing tag with a forward slash — and everything between them is what the tag describes.
  • Common tags like <p> for paragraphs, <h1> through <h6> for headings, and <a> for links tell the browser what each piece of content is.
  • Your browser's developer tools (right-click, then Inspect) show you the HTML of any page and let you test changes without saving them.

The basic structure every HTML file needs

Every HTML document starts with the same skeleton. The first line is <!DOCTYPE html>, which tells the browser this is HTML5 (the current standard). Then comes the <html> tag, which wraps everything else.

Inside the <html> tag are two main sections: the <head> and the <body>. The <head> contains information about the page — like the title that shows in the browser tab — but nothing that displays on the page itself. The <body> contains all the text, images, and links that the reader actually sees.

Here is a complete, working HTML file:

<!DOCTYPE html> <html> <head>   <title>My First Page</title> </head> <body>   <h1>Welcome</h1>   <p>This is my first HTML page.</p> </body> </html>

Copy this text exactly into Notepad or any plain text editor. Save it as index.html (not index.txt). Then open the file in your browser — double-click it, or drag it into a browser window. You will see "Welcome" as a large heading and "This is my first HTML page." as regular text below it.

Tags that describe what content is

The most common tags describe the type of content they contain. <p> means paragraph. <h1> through <h6> are headings, from largest to smallest — use <h1> for the main title of the page, <h2> for section headings, and so on. <strong> makes text bold and tells the browser it is important. <em> makes text italic and means emphasis.

<a> creates a link. It needs an href attribute — that is extra information inside the opening tag — that says where the link goes. For example: <a href="https://example.com">Click here</a> creates a clickable link that says "Click here" and goes to example.com.

<img> displays an image. It also needs an src attribute that points to the image file: <img src="photo.jpg">. Unlike most tags, <img> does not have a closing tag — it closes itself with a forward slash at the end.

<ul> creates a bulleted list, and <ol> creates a numbered list. Inside either one, each item goes in an <li> tag. For example:

<ul>   <li>First item</li>   <li>Second item</li> </ul>

How to test and fix your HTML

Open your HTML file in your browser, then right-click anywhere on the page and select Inspect or Inspect Element. This opens the browser's developer tools, which show you the actual HTML code side by side with how it looks on the page. You can see exactly which tag is responsible for each part of what you see.

If something does not look right, check for common mistakes: a closing tag with the wrong name, a missing closing tag, or a misspelled attribute. The developer tools often highlight errors in red or with a warning icon. Fix the mistake in your text editor, save the file, then refresh the browser (press Ctrl+R or Cmd+R) to see the change.

You can also edit HTML directly in the developer tools to test changes without saving them. Right-click an element in the developer tools and select Edit as HTML, make your change, and press Enter. The page updates when ready. This is useful for trying out ideas before you write them into your actual file.

Attributes add information to tags

An attribute is extra information you put inside an opening tag. It always has a name and a value. The value goes in quotes. You have already seen two: href in links and src in images.

The class attribute lets you label an element so you can style it later with CSS (the language that controls how things look). The id attribute gives an element a unique name — no two elements should have the same id. The alt attribute on an image describes what the image shows, which helps people using screen readers and shows up if the image fails to load.

For example: <img src="dog.jpg" alt="A golden retriever running in a field"> tells the browser where the image is and what it shows if the image does not load.

Nesting tags inside other tags

You can put tags inside other tags. This is called nesting. For example, you might put a link inside a paragraph:

<p>Visit <a href="https://example.com">our website</a> for more information.</p>

When you nest tags, the inner tag must close before the outer tag closes. This is wrong: <p><a href="...">text</p></a>. This is correct: <p><a href="...">text</a></p>. Think of it like parentheses in math — they have to match up in the right order.

You can nest as many levels deep as you need. A common pattern is a list of links inside a <nav> tag (which means navigation):

<nav>   <ul>     <li><a href="home.html">Home</a></li>     <li><a href="about.html">About</a></li>   </ul> </nav>

Frequently Asked Questions

What is the difference between HTML and a website?

HTML is the code — the text with tags. A website is HTML plus CSS (styling) plus JavaScript (interactivity), all hosted on a server so people can visit it through the internet. You can write and test HTML on your own computer without a website or server.

Do I need to learn HTML to use a website builder?

No. Website builders like Wix or Squarespace let you drag and drop elements without writing any code. They generate the HTML for you behind the scenes. Learning HTML is useful if you want to understand how websites work or customize something a builder cannot do.

Can I edit the HTML of a website I visit?

You can edit it in your browser using the developer tools, and you will see the changes on your screen. But those changes only exist on your computer — they do not change the actual website for anyone else, and they disappear when you refresh the page. To change a real website, you need access to the files on the server.

What happens if I make a mistake in my HTML?

The browser tries to display it anyway. It ignores tags it does not recognize and does its best to show the content. This is why HTML is forgiving — a small mistake usually does not break the whole page. Use the developer tools to find what went wrong.

Can I use Microsoft Word to write HTML?

Word can save files as HTML, but it adds a lot of extra code that makes the file messy and hard to edit. Use a plain text editor like Notepad, VS Code, or Sublime Text instead. They are free and designed for writing code.