HTML for absolute beginners: your very first web page
Welcome. If you have never written a line of HTML in your life, you are in the right place. We are going to write a real web page together, from a blank text file to something you can open in your browser, and by the end of this lesson you will understand what every single character does. No prior knowledge needed. Grab a cup of tea, this is going to be a long one, but I will go slow.
What is HTML, really?
HTML stands for HyperText Markup Language. That is a fancy way of saying "a way to mark up text so a browser knows what each piece means". When you open a webpage, the browser downloads a text file that looks something like a document with little angle brackets around words. Those angle brackets are called tags, and they tell the browser things like "this is a heading", "this is a paragraph", "this is an image", "this is a link to another page".
You write HTML in a plain text file, save it with the extension .html, and then open that file in a browser. That is it. There is no magic. The browser reads the file, follows the instructions in the tags, and renders the page.
Setting up your first file
Open any text editor. On Windows that is Notepad. On Mac, TextEdit (just make sure it is in "Plain Text" mode, not Rich Text). On Linux, gedit or nano or whatever you like. Do not use Microsoft Word for this, it adds hidden formatting that will confuse everything.
Create a new file. Type exactly the following, including all the angle brackets:
<code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;My first page&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Hello, world!&lt;/h1&gt;
&lt;p&gt;This is my first web page.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;</code>
Save the file as my-first-page.html somewhere you can find it, like your Desktop. Now double-click the file. It will open in your default browser. You should see a big "Hello, world!" heading and a smaller paragraph below it. Congratulations, you just built a real web page.
Understanding what you just wrote
Let us go line by line so you understand what is going on.
<!DOCTYPE html> is a special declaration. It tells the browser "this file is HTML5, the modern version of HTML". You always put it on the very first line, with no extra spaces or characters before it. The exclamation mark and the capital letters are required exactly like that.
<html> is the root tag. Everything in your page goes inside this tag. You open it here, and you close it at the very end with </html>. The forward slash in the closing tag is what makes it a closing tag. Most HTML tags come in pairs: an opening tag and a closing tag.
<head> is a section for metadata, which is information about your page that the visitor does not see directly. The browser uses this section to know the page title, the character set, and other technical details. You close it with </head>.
<title>My first page</title> sets the text that appears in the browser tab. Change it to your own name and refresh the browser to see the tab title change.
<body> is where all the visible content goes. Everything the user sees on the page lives inside the body tag.
<h1> is a top-level heading. There are six heading levels in HTML, from <h1> (most important) to <h6> (least important). Use them in order, do not skip levels just to change the size. The size is something you control later with CSS.
<p> is a paragraph. The browser automatically adds some space above and below each paragraph, so paragraphs look like distinct blocks of text.
Adding more content
Let us add a bit more. Replace the contents of your body with this:
<code>&lt;h1&gt;About me&lt;/h1&gt;
&lt;p&gt;Hi! My name is Hadi and I am learning HTML.&lt;/p&gt;
&lt;h2&gt;My hobbies&lt;/h2&gt;
&lt;p&gt;I like building small things on the web.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Reading&lt;/li&gt;
&lt;li&gt;Coding&lt;/li&gt;
&lt;li&gt;Walking&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;My favourite quote&lt;/h2&gt;
&lt;blockquote&gt;The best way to learn is to build.&lt;/blockquote&gt;</code>
Save and refresh. You now have headings of two sizes, a paragraph, an unordered list (the <ul> tag stands for "unordered list" and the <li> tags are the individual list items), and a blockquote. Notice how the browser automatically indents the list and gives the blockquote a left border and italic styling. You did not write any of that styling, the browser does it for you based on which tags you used.
Adding a link and an image
Two of the most useful tags in HTML are <a> (for links) and <img> (for images). Add these to your page:
<code>&lt;h2&gt;Where to learn more&lt;/h2&gt;
&lt;p&gt;Visit &lt;a href="https://developer.mozilla.org"&gt;MDN Web Docs&lt;/a&gt; for the best HTML reference.&lt;/p&gt;
&lt;h2&gt;A picture from my last trip&lt;/h2&gt;
&lt;img src="mountain.jpg" alt="A snowy mountain at sunrise" width="600"&gt;</code>
The <a> tag has an attribute called href which holds the URL the link should go to. The text between the opening and closing tags is what the visitor sees and clicks on.
The <img> tag is one of the few tags that does not have a closing tag. It stands alone. Its src attribute holds the path to the image file. The alt attribute is the text that screen readers (used by blind visitors) will read out loud, and it also shows up if the image fails to load. Always fill in the alt text. It is one of the most important accessibility habits you can build.
Common beginner mistakes to avoid
Forgetting the closing tag. Every tag that opens must close, except for a few special ones like <img> and <br>. If you forget a closing tag, the browser will try its best to render the page, but you can get strange visual bugs that are hard to track down.
Nesting tags in the wrong order. If you open tag A, then tag B, you must close B before A. Think of it like Russian nesting dolls. <p><strong>bold text</p></strong> is wrong. <p><strong>bold text</strong></p> is right.
Using heading tags for size instead of structure. Do not use <h1> because you want big text. Use it because this is the most important heading on the page. If you want big text for a different reason, that is what CSS is for, and we will cover that in the next lesson.
What is next
You now know enough HTML to build a basic page with headings, paragraphs, lists, links, and images. In the intermediate lesson, we go deeper: semantic HTML5 tags like <header>, <nav>, and <article>, building a proper contact form, embedding video, and the right way to structure a full multi-section page that search engines and screen readers actually understand.
← More in HTML