<!doctype html>
Activates modern standards mode. Without it, browsers may use older compatibility behavior.
Platform under construction
HTML Basic
Write your first real HTML page: doctype, html, head, body, title, metadata, visible content, file paths, browser parsing and a live code lab.
HTML Basic
A basic HTML page is a complete document, not just a few tags.
When people say “basic HTML”, they often mean the smallest page a browser can read correctly. That page still
has structure. It starts with a doctype, contains one root html element, has a
head for information about the page and a body for the visible content.
This matters because the browser does not guess your intention like a human does. It reads a document from top to bottom, builds a tree from the markup and then renders the result. A clean starting structure makes every next lesson easier: headings, paragraphs, links, images, CSS, JavaScript, SEO and accessibility.
1
<!doctype html>
Tell the browser to use modern standards mode.
2
<html lang="en">
The root element that wraps the complete document.
3
<head>
Metadata, title, character set, viewport and linked files.
4
<body>
The visible page: text, buttons, links, media and layout.
Document skeleton
This is the first complete HTML file you should understand.
The skeleton below is not decoration. Every line has a job. The doctype controls browser mode. The
lang attribute helps browsers, translation tools and assistive technology. The charset tells the
browser how to read characters. The viewport makes the page behave correctly on phones. The title appears in
browser tabs, bookmarks and search results.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My first HTML page</title> </head> <body> <h1>Hello HTML</h1> <p>This is my first page.</p> </body> </html>
Beginner rule: if you can explain every line in this skeleton, HTML stops feeling like magic
and starts feeling like a document you control.
Line by line
The first document has invisible parts and visible parts.
A beginner often looks only at what appears on the screen. HTML has more than that. Some parts are meant for the browser, search engines and tools. Other parts are meant for the visitor. A good developer knows which is which.
<html lang="en">
Wraps the document and tells tools the main language of the page.
<head>
Contains page information that usually is not shown as visible content.
<meta charset>
Defines the character encoding. Use UTF-8 for modern pages.
<meta viewport>
Makes responsive layout possible on phones and tablets.
<body>
Contains the content users can see and interact with.
Tag anatomy
Most HTML elements have an opening tag, content and a closing tag.
HTML is built from elements. An element is usually made from an opening tag, content and a closing tag. The tag
name describes what the content is. A paragraph uses p. A heading uses h1 to
h6. A link uses a. The browser uses those names to understand the document.
Opening tag
<p>
Content
This is a paragraph.
Closing tag
</p>
Some elements do not wrap text content. Examples are meta, img, br,
input and link. Those are often called void elements. You do not write
</img> or </meta> in modern HTML.
Basic attributes
Attributes add settings to an element.
The element name tells the browser what something is. Attributes add extra information. A link without
href does not know where to go. An image without src does not know what file to load.
An image without useful alt text is weaker for accessibility.
Element with attributes
<a href="/html/elements/"> Learn HTML elements </a>
Image with fallback text
<img src="assets/img/editor.png" alt="Code editor showing HTML" >
Readable style: quote attribute values, keep names lowercase and write values that explain
intent. Clean attributes make HTML much easier to review later.
Head versus body
The head describes the page. The body displays the page.
The head is easy to misunderstand because most of it is not visible. But it is extremely
important. It controls the document title, character encoding, mobile viewport, CSS files, icons and metadata
that search engines or social platforms may use. The body is where the visible user interface
lives.
Inside head
meta charsetmeta viewporttitlelink rel="stylesheet"- SEO and sharing metadata
Inside body
headerand navigationmaincontent- Headings and paragraphs
- Images, buttons and forms
footercontent
Files and paths
A basic page usually starts as index.html.
The file name matters. A web server usually looks for index.html when someone opens a folder or
the root of a website. That is why the first page of a static website is commonly called index.html.
Keep related files in predictable folders so paths stay readable.
Project folder
my-first-site
A simple but scalable structure for a first HTML project.
my-first-site/
index.html
assets/
css/
styles.css
js/
app.js
img/
logo.svg
If index.html links to assets/css/styles.css, the browser starts from the location of
the HTML file and follows that path. Many broken CSS and image problems are simply path problems.
How the browser reads it
The browser parses HTML into the DOM before you see the page.
When you open an HTML file, the browser does not just paint text on the screen. It parses the markup, creates the DOM, applies CSS, runs JavaScript and then renders pixels. The DOM is the live document tree. DevTools show this tree, which is why DevTools sometimes looks different from your raw source file.
HTML source
The text file you wrote in the editor.
Parser
The browser reads tags, text and nesting.
DOM tree
A live structure CSS and JavaScript can work with.
Rendered page
The visual result users see and click.
Common mistakes
Basic HTML mistakes are small, but they create confusing results.
Browsers are forgiving, so broken HTML often still shows something. That can trick beginners into thinking the code is correct. Learn to spot the small mistakes early, because the same patterns become harder to debug when a project grows.
Missing doctype
The browser may switch into older compatibility behavior.
No viewport meta
The page can look wrong on phones even when the desktop version looks fine.
Unclosed elements
The browser may repair the DOM in a way you did not expect.
Head content in body
Metadata belongs in head, visible content belongs in body.
Wrong file paths
Images and CSS fail because the path does not match the folder structure.
Visual tags as structure
Do not choose elements only because the browser default style looks nice.
Live code lab
Build a basic page and watch the browser render it.
Change the title text, heading, paragraph or list items. The preview updates live. The lab wraps your HTML in a full document so you can focus on the visible structure first, then compare it with the skeleton above.
Try it yourself
Your first useful HTML page
Checklist
Before you move on, your basic page should pass this checklist.
Doctype present
The first line is <!doctype html>.
Language set
The html element has a useful lang attribute.
Metadata included
The document has charset, viewport and title in the head.
Visible structure
The body contains clear headings, paragraphs and sections.
Readable nesting
Child elements are indented under their parent elements.
Browser tested
The file has been opened, refreshed and inspected in DevTools.
Next step
Now that the basic page is clear, study elements and attributes separately.
The basic page gives you the frame. The next lessons explain the pieces inside that frame. Start with HTML elements to learn the vocabulary, then move into attributes to understand how elements are configured.
Self-check
Before you continue, prove that you own this lesson.
Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.
- Can you explain what problem this lesson solves in a real website?
- Can you identify the most important tag or attribute from this lesson?
- Can you name one accessibility mistake this lesson helps prevent?
- Can you write one good example and one weak example without copying the page?
- Can you explain when you would use this in production and when you would avoid it?