HTML Basics for Beginners: Structure, Elements & Your First Page
Learn HTML basics from scratch. Understand the DOCTYPE, html, head, and body tags, how browsers parse HTML, and write your first complete webpage in minutes.
HTML — HyperText Markup Language — is the language browsers use to understand the structure and content of a webpage. Before any styling, any interactivity, or any JavaScript, there is HTML. It tells the browser: "this is a heading," "this is a paragraph," "this is an image," "this is a link."
This lesson covers the fundamentals: what HTML actually is, how a document is structured, and how to write your first complete webpage.
What Is HTML?
HTML is not a programming language — it doesn't have loops, variables, or logic. It's a markup language: a way of annotating content so that a browser knows what each piece of content means.
You write HTML as tags wrapped in angle brackets. Most elements have an opening tag and a closing tag:
<p>This is a paragraph.</p>Here, <p> is the opening tag and </p> is the closing tag. The text between them is the content. Together, opening tag + content + closing tag make up an HTML element.
Some elements are self-closing — they have no content and no closing tag:
<img src="photo.jpg" alt="A landscape photo">
<br>
<hr>The Structure of an HTML Document
Every HTML document follows the same basic skeleton:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first HTML page.</p>
</body>
</html><!DOCTYPE html>
This is the document type declaration. It's not an HTML element — it's an instruction to the browser that tells it this document uses HTML5. Always put it on the very first line. Without it, browsers may render your page in "quirks mode," causing unpredictable layout issues.
<html lang="en">
The <html> element is the root of the entire document. Everything else goes inside it. The lang="en" attribute tells browsers and screen readers that the page is in English — important for accessibility and SEO.
<head>
The <head> element contains metadata about the page — information that doesn't appear on screen but is used by the browser, search engines, and other tools. <meta charset="UTF-8"> tells the browser to use UTF-8 character encoding, which supports virtually all languages and special characters. <meta name="viewport" ...> controls how the page scales on mobile devices. <title> sets the text shown in the browser tab and in search engine results.
<body>
The <body> element contains everything visible on the page: headings, text, images, links, forms, and so on. This is where almost all your HTML writing happens.
HTML Attributes
Attributes provide additional information about an element. They go inside the opening tag as name="value" pairs:
<a href="https://example.com">Visit Example</a>
<img src="logo.png" alt="Company logo" width="200">
<p class="intro">Welcome to the page.</p>Key points: attributes always go in the opening tag, never the closing tag. Values are usually wrapped in double quotes. Some attributes are required for an element to work (like src on <img>). Some are optional enhancements (like width on <img>). And some are boolean — their presence alone enables a feature: <input disabled>.
Block vs Inline Elements
HTML elements fall into two main display categories.
| Type | Description | Examples |
|---|---|---|
| Block | Takes up the full width available; starts on a new line | <p>, <h1>–<h6>, <div>, <ul>, <table> |
| Inline | Takes up only as much width as its content; flows within text | <a>, <strong>, <em>, <img>, <span> |
This distinction matters when you start applying CSS — block elements stack vertically by default, inline elements flow horizontally.
Nesting and Indentation
HTML elements can be nested inside one another. The inner element is called a child; the outer element is the parent:
<div>
<h2>About Us</h2>
<p>We build <strong>great software</strong> for everyone.</p>
</div>Always close tags in the reverse order you opened them. Indent child elements for readability (2 or 4 spaces — pick one and be consistent). Never overlap tags: <b><i>text</b></i> is invalid; <b><i>text</i></b> is correct.
Your First Complete HTML Page
Let's put it all together. Create a file called index.html, open it in your text editor, and paste this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Me</title>
</head>
<body>
<h1>Hi, I'm Alex</h1>
<p>I'm a web developer learning HTML from scratch.</p>
<h2>What I'm Learning</h2>
<p>Right now I'm working through an <strong>HTML & CSS fundamentals</strong> course.</p>
<h2>My Goals</h2>
<p>By the end of this course, I want to be able to build a complete, styled webpage without any frameworks.</p>
</body>
</html>Save the file and open it in your browser (drag the file into a browser window, or right-click → Open with). You should see a clean page with a large heading and paragraphs. Congratulations — you've written your first HTML page.
Common Mistakes to Avoid
Forgetting to close tags. Browsers are forgiving, but unclosed tags cause unexpected layout bugs. Always close what you open.
Putting content outside <body>. Everything visible should live inside <body>. Content placed between </body> and </html> may or may not render correctly depending on the browser.
Skipping <!DOCTYPE html>. This triggers quirks mode in older browsers, causing layout differences you'll spend hours debugging.
Using <br> for spacing. <br> is a line break for content (like a line in a poem), not a tool for creating visual whitespace. Use CSS margins and padding for spacing.
Next: Lesson 2 — HTML Text Elements
Part of the HTML & CSS Fundamentals course.