HTML Basics: A Complete Beginner's Guide
Learn the fundamentals of HTML including elements, attributes, and document structure.
What is HTML?
HTML (HyperText Markup Language) is the standard markup language for creating web pages. It describes the structure of a web page using a series of elements that tell the browser how to display content.
Every website you've ever visited is built with HTML at its core. Whether it's a simple blog or a complex web application, HTML provides the foundation that other technologies like CSS and JavaScript build upon.
HTML Document Structure
Every HTML document follows a specific structure. Here's the basic template you'll use for every webpage:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
</head>
<body>
<!-- Your content goes here -->
</body>
</html>
Let's break down each part:
<!DOCTYPE html>: Tells the browser this is an HTML5 document<html>: The root element containing all other elements<head>: Contains metadata about the document<body>: Contains the visible page content
Understanding HTML Elements
HTML elements are the building blocks of web pages. An element typically consists of an opening tag, content, and a closing tag.
Basic Element Syntax
<tagname>Content goes here</tagname>
Some elements are self-closing (also called void elements):
<img src="image.jpg" alt="Description">
<br>
<input type="text">
Essential HTML Elements
Headings
HTML provides six levels of headings, from <h1> (most important) to <h6> (least important):
<h1>Main Page Title</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>
Use headings hierarchically to create a logical document outline. Search engines use headings to understand your content structure.
Paragraphs and Text
<p>This is a paragraph of text.</p>
<strong>Bold text</strong>
<em>Italic text</em>
<mark>Highlighted text</mark>
Links
Links connect pages together and are essential for navigation:
<a href="https://example.com">Visit Example</a>
<a href="/about">About Page</a>
<a href="#section">Jump to Section</a>
Images
<img src="photo.jpg" alt="A descriptive text" width="800" height="600">
Always include the alt attribute for accessibility and SEO.
Lists
Unordered Lists:
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
Ordered Lists:
<ol>
<li>Step one</li>
<li>Step two</li>
<li>Step three</li>
</ol>
HTML Attributes
Attributes provide additional information about elements. They're always specified in the opening tag.
<element attribute="value">Content</element>
Common attributes include:
id: Unique identifier for the elementclass: One or more class names for stylingstyle: Inline CSS stylestitle: Tooltip text
Best Practices
- Always use proper indentation for readable code
- Close all tags even if technically optional
- Use semantic elements like
<article>,<nav>,<header> - Include alt text on all images
- Validate your HTML using the W3C validator
Next Steps
Now that you understand HTML basics, you're ready to:
- Learn about semantic HTML for better structure
- Explore HTML forms for user input
- Add styling with CSS fundamentals
Use our HTML Layout Generator to quickly create page structures while you learn.