Back to Resources

HTML Basics Reference

The foundation of every website. Learn standard HTML5 structure, semantic tags, and attributes.

1. The Basic Boilerplate

Every HTML page starts with a standard structure that declares the language and encodes metadata.

<!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>
    <h1>Main Heading</h1>
    <p>Content goes here.</p>
</body>
</html>

2. Text Formatting Tags

<h1> to <h6>: Headings, with h1 being the most important.
<p>: Defines a paragraph.
<br>: Inserts a single line break (self-closing).
<strong>: Defines important text (bold).
<em>: Defines emphasized text (italic).

3. Links and Images

Links block href and images require an src attribute.

<!-- Anchor Link -->
<a href="https://example.com" target="_blank">Visit Example</a>

<!-- Image Tag -->
<img src="image.jpg" alt="Description of the image" width="500" height="300">

4. Lists

Unordered List: Uses <ul> along with <li> for bullet points.
Ordered List: Uses <ol> along with <li> for numbered points.

5. Semantic HTML5 Elements

Semantic tags describe their meaning to both the browser and the developer, improving accessibility and SEO.

<header>: Introductory content or navigational links.
<nav>: Defines navigation links.
<article>: Contains independent, self-contained content.
<section>: Represents a standalone section of a document.
<footer>: The footer of a document or section.