HTML is plain text with tags that tell browsers what to display

HTML 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 — a label that says "this is a heading" makes text larger, a label that says "this is a link" makes text blue and clickable. You write HTML in any text editor, save it as a .html file, and open it in a browser. That's it.

The labels are called tags, and they always follow the same shape: an opening tag like <p>, the content, and a closing tag like </p>. Most tags work in pairs. A few, like the image tag, stand alone. When you nest tags inside each other — like putting a link inside a paragraph — the browser reads them in order and applies all the rules at once.

Real HTML does one job: it describes what content is, not how it looks. The browser and the reader's device decide how to display it. This separation means your HTML works on phones, tablets, desktops, and screen readers without you having to rewrite it.

Key Takeaways

  • HTML tags are labels in angle brackets that wrap around text to describe what it is — a heading, a paragraph, a link, an image.
  • Every opening tag like <p> needs a closing tag like </p>, except for a few self-closing tags like <img>.
  • A complete HTML document starts with <!DOCTYPE html>, wraps everything in <html> tags, and separates the head (metadata) from the body (visible content).
  • You write HTML in a plain text editor, save it with a .html extension, and open it in any browser to see how it looks.
  • HTML describes what content is, not how it looks — CSS handles styling, and JavaScript handles behavior.

The basic structure every HTML document needs

Every HTML file starts with a declaration that tells the browser this is HTML5, the current standard. Then comes the root <html> tag that wraps everything else. Inside that are two main sections: the <head>, which holds information about the page but is not displayed, and the <body>, which holds everything the reader sees.

Here is the minimum structure:

<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>

The <title> tag inside the head sets what appears in the browser tab. The <h1> tag marks the main heading on the page. The <p> tag marks a paragraph. When you save this as a file named index.html and open it in a browser, you see the heading and paragraph displayed, and the tab shows "Page Title".

Common tags and what they mean

Headings come in six levels: <h1> is the largest and most important, <h2> is smaller, down to <h6>. Use <h1> once per page for the main topic. Use <h2>, <h3>, and so on for sections and subsections.

<p> marks a paragraph. <strong> marks text that is important or emphasized — browsers usually show it bold. <em> marks text with emphasis — browsers usually show it italic. <a href="url"> creates a link; the href attribute tells the browser where to go when someone clicks it. <img src="filename"> displays an image; the src attribute points to the image file.

<ul> starts an unordered (bulleted) list, <ol> starts an ordered (numbered) list, and <li> marks each item inside either one. <div> is a container that groups content together so you can style it or organize it later. <header>, <nav>, <main>, <footer> are semantic tags that describe what role a section plays on the page — they work like <div> but tell both the browser and anyone reading the code what the content is for.

Attributes give tags extra information

An attribute is extra information you put inside an opening tag. It always has a name and a value. The value goes in quotes. For example, <a href="https://example.com">Click here</a> has an href attribute that tells the browser where the link points.

<img src="photo.jpg" alt="A sunset over water"> has two attributes: src tells the browser which image file to load, and alt provides text that displays if the image does not load and that screen readers read aloud. Always include an alt attribute on every image.

<a href="page.html" target="_blank"> uses the target attribute to open the link in a new tab. <input type="email"> uses the type attribute to tell the browser this is an email field. Attributes let you customize how a tag behaves without creating a new tag.

How to write and save your first HTML file

Open a plain text editor — Notepad on Windows, TextEdit on Mac (set to plain text mode), or any code editor like Visual Studio Code. Do not use Microsoft Word or Google Docs; they add invisible formatting that breaks HTML.

Type or paste your HTML code. Start with the basic structure above, then add your own headings, paragraphs, and links. Save the file with a name that ends in .html — for example, mypage.html or index.html. The name does not matter for testing, but index.html is the standard name for a home page.

Open your file manager, find the file you just saved, and double-click it. Your default browser opens and displays your HTML. If you make changes to the file, save it, then refresh the browser page (usually Ctrl+R or Cmd+R) to see the changes.

Nesting tags and keeping your code readable

Tags can go inside other tags. A link can go inside a paragraph, a strong tag can go inside a heading, a list can go inside a div. When you nest tags, always close them in the opposite order you opened them. If you open <p> then <strong>, close </strong> first, then </p>.

Indent your code to show which tags are inside which. This does not change how the browser reads it, but it makes your code much easier to read and debug:

<body>   <h1>My Page</h1>   <p>This is a paragraph with a <strong>bold word</strong>.</p>   <ul>     <li>First item</li>     <li>Second item</li>   </ul> </body>

Each level of nesting gets two or four more spaces at the start of the line. When you come back to your code weeks later, or when someone else reads it, the indentation shows the structure at a glance.

Common mistakes that break HTML

Forgetting to close a tag is the most common mistake. If you open <p> but never write </p>, the browser keeps applying paragraph formatting to everything that follows until it finds a closing tag or reaches the end of the file. Always check that every opening tag has a matching closing tag.

Mixing up the order of closing tags breaks the structure. If you write <p><strong>text</p></strong>, the tags are not properly nested and the browser may not display it correctly. Close tags in reverse order: <p><strong>text</strong></p>.

Using the wrong characters in tags causes the browser to ignore them. Angle brackets must be < and >, not parentheses or square brackets. Attribute values must be in straight quotes ", not curly quotes " — if you copy code from a word processor, it often changes quotes to curly ones and breaks the tag.

Forgetting the <!DOCTYPE html> declaration at the very start can cause the browser to display the page in an older, less predictable way. Always start with that line.

Frequently Asked Questions

What is the difference between HTML and a website?

HTML is the code you write. A website is what you see in the browser. HTML describes the content and structure. CSS (a separate language) controls how it looks. JavaScript (another language) controls how it behaves. A complete website usually uses all three, but HTML is the foundation.

Do I need to memorize all the tags?

No. You only need to know a handful of common ones: headings, paragraphs, links, images, lists, and divs. You can look up any tag you need while you work. Most developers keep a reference open while coding.

Can I see the HTML of a website I visit?

Yes. Right-click anywhere on a webpage and select "View Page Source" or "Inspect Element". You see the actual HTML the browser is reading. This is a great way to learn how other people structure their pages.

What happens if I make a typo in a tag?

The browser treats it as plain text instead of a tag. If you write <p> correctly but then write </pp> by mistake, the browser does not recognize the closing tag and keeps the paragraph formatting going. Check your tag names carefully.

Can I use HTML to make things look fancy, like change colors or fonts?

HTML alone cannot. HTML only describes what content is. To change colors, fonts, spacing, and layout, you use CSS, a separate language that works alongside HTML. HTML and CSS are partners — HTML is the structure, CSS is the appearance.