Basic HTML Tutorial: Build Your First Web Page in 10 Minutes
HTML is the markup language every web page is built from. It stands for HyperText Markup Language, and it works by wrapping your content in tags that tell the browser what each piece is: a paragraph, a heading, an image, a link. In this tutorial you'll go from an empty folder to a real page open in your browser, using nothing but a text editor and the tags that do most of the work on a basic page: html, head, body, p, h1 through h6, strong, em, u, img, and br.
This is the written version of the first video in my HTML beginners course. The video is embedded near the bottom if you'd rather watch me type it out.
Key Takeaways
- HTML is made of tags. Most tags come in a pair: an opening tag like
<p>and a closing tag like</p>, with your content in between. - Every page has the same skeleton:
<html>wraps everything,<head>holds information about the page,<body>holds what people actually see. - The file has to end in
.html(or.htm). A.txtfile will not render in a browser. <p>is for text,<h1>through<h6>are headings from biggest to smallest,<strong>/<b>bold,<em>/<i>italic,<u>underline.<img>and<br>are self-closing: they have no separate closing tag.
What HTML is
HTML is the standard markup language for the web. "Markup" means you take plain content and mark it up with tags so a browser knows how to treat it. The word paragraph on its own is just text; wrapped as <p>paragraph</p> it becomes a paragraph the browser can style and space correctly.
You don't need anything installed to write it. A browser can open an HTML file straight off your desktop. That's all a web page is at the start: a text file the browser knows how to read.
Setting up: an editor and a file
You can use any text editor. I recommend Visual Studio Code (VS Code), and it's what I use through the whole course. It's free, and it autocompletes tags and shows you a color picker later on.
- Make a new folder on your desktop. Call it
learning-html. - Open that folder in VS Code (File, Open Folder).
- Inside it, create a file called
index.html.
The extension matters. If the file is called index.txt, the browser will show you the raw text instead of rendering it. It has to be .html or .htm. You'll see the file's icon change in VS Code once the extension is right.
How a tag works
Almost every tag is a pair. Take the title tag:
<title>Hello World</title>That's an opening bracket, the tag name (title), a closing bracket, then your content, then the same thing again with a slash (</title>) to close it. The slash is what marks the end tag.
A few tags break this pattern and are self-closing (<img>, <br>), meaning there's no separate end tag. But the open/content/close pattern covers the large majority of HTML.
The page skeleton: html, head, body
Every page starts with the same three tags nested inside each other.
<html>
<head>
<title>Hello World</title>
</head>
<body>
</body>
</html><html>wraps the entire document.<head>holds information about the page that the visitor doesn't see directly: the title, metadata, links to stylesheets. The<title>you set here is what shows in the browser tab.<body>holds everything that actually appears on the page.
Save the file (Ctrl+S on Windows, Cmd+S on Mac) and open it in your browser. The page is blank, but the tab reads "Hello World". That's your <head> working.
Text: paragraphs, bold, italic, underline
Everything from here goes inside <body>. Text almost always goes in a paragraph tag:
<body>
<p>This is my first paragraph.</p>
</body>Save, refresh, and the sentence appears. Now the formatting tags:
<p>You can make text <strong>bold</strong> or <b>bold</b>.</p>
<p>You can make text <em>italic</em> or <i>italic</i>.</p>
<p>You can <u>underline</u> text.</p><strong> and <b> both render bold and look the same on screen. <em> and <i> both render italic and look the same. There's a semantic difference (<strong> and <em> signal importance and emphasis to screen readers and search engines, while <b> and <i> are purely visual), so when the meaning matters, reach for <strong> and <em>.
Headings: h1 through h6
Headings are <h1> to <h6>, and they get smaller as the number goes up.
<h1>Biggest heading</h1>
<h2>Second level</h2>
<h3>Third level</h3>
<h4>Fourth level</h4>
<h5>Fifth level</h5>
<h6>Smallest heading</h6><h1> is the biggest and carries the most weight; <h6> is the smallest and carries the least. Use one <h1> per page for the page's main title, then <h2> for major sections, <h3> for subsections, and so on. Search engines read that heading structure to understand how the page is organized, and screen-reader users navigate a page by jumping between its headings, so the order matters more than the size.
Adding an image
Images use the <img> tag, which is self-closing. It needs a src telling the browser where the image file is:
<img src="fallleaves.jpg" width="100%" />Download an image (I use Unsplash for free photos), drop it in your learning-html folder next to index.html, and rename it to something simple like fallleaves.jpg. Point src at that filename. If the image loads huge, set a width: width="100%" makes it fill the page width.
You should also add an alt attribute describing the image (alt="A pile of orange fall leaves") for screen readers and for when the image fails to load.
Line breaks
<br> drops the text after it onto the next line. It's self-closing, like <img>.
<p>First line.<br />Second line.<br />Third line.</p>Use it for genuine line breaks inside a block of text, like an address. Don't use a stack of <br> tags to add space between sections; that's what separate <p> tags and, later, CSS margins are for.
Where to go next
You now have a page with a title, headings, paragraphs, formatted text, an image, and line breaks. The catch is that it only exists on your computer. To put it on the internet, you upload it to a web host.
From here, the rest of this course covers links, lists, tables, forms, and the <head> tags that control how your page shows up in search and on social media. Work through them in order and you'll have a solid foundation before touching CSS.
FAQ
Do I need to install anything to write HTML?
No. You need a text editor (VS Code is a good free one) and a web browser, both of which you almost certainly already have. A browser opens an HTML file straight from your folder.
Why won't my HTML file open as a web page?
The most common reason is the file extension. It has to end in .html or .htm. A file saved as .txt will show as plain text. Rename it and reopen it in the browser.
What's the difference between <strong> and <b> (or <em> and <i>)?
They look identical on screen. <strong> and <em> also carry meaning: they tell screen readers and search engines that the text is important or emphasized. <b> and <i> are purely visual. When the emphasis is meaningful, use <strong> and <em>.
How many <h1> tags should a page have?
One. The <h1> is the page's main title. Use <h2> through <h6> for sections and subsections below it, in order, without skipping levels.
Which tags are self-closing?
The common ones on a basic page are <img> and <br>. They don't wrap content, so they have no separate closing tag. Most other tags come in an opening/closing pair.
