HTML Basic

HTML Basic: Core Document Structure and Essential Tags

Basic HTML pages rely on a small group of foundational tags to present text, links, and visuals. Learning how these core tags fit inside a document skeleton gives you everything needed to build real web pages.

The Standard Document Blueprint

Every HTML5 page opens with DOCTYPE html, wraps all markup inside the html root element, and splits metadata (head) from visible content (body).

flowchart TD
    A["DOCTYPE html"] --> B["html root element"]
    B --> C["head (title, meta, CSS links)"]
    B --> D["body (visible content)"]
    D --> E["Headings, paragraphs, links, images"]

Inside the body section, you combine four everyday elements:

• Headings (h1 to h6): Define the main page title and section hierarchy.
• Paragraphs (p): Group readable blocks of prose with automatic vertical spacing.
• Links (a): Connect users to other pages or sections using the href attribute.
• Images (img): Embed graphics using src for the file path and alt for accessible text.

Complete Basic HTML Example

Here is a clean, working page combining headings, paragraphs, a hyperlink, and an image element:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic HTML Page</title>
</head>
<body>
    <h1>Developer Profile</h1>
    <p>HTML basic tags organize text, links, and media clearly for web browsers.</p>
    <p>Explore documentation on <a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">MDN Web Docs</a>.</p>
    <img src="/images/developer-avatar.webp" alt="Developer workspace portrait" width="240" height="160">
</body>
</html>

Notice that img is a void element, so it does not wrap text and has no closing tag. Adding width and height attributes lets the browser reserve space before the file finishes downloading, preventing layout shift.

Common Mistakes to Avoid

• Omitting alt on images: Missing alt descriptions block screen reader users and leave empty gaps when images fail to load.
• Using target="_blank" without rel="noopener noreferrer": External tabs opened without rel="noopener" can expose security risks on older browsers.
• Wrapping whole pages inside a single paragraph: Keep headings, lists, and images outside p tags so the DOM stays valid.

Frequently Asked Questions

What happens if I forget the DOCTYPE tag?

Browsers drop into quirks mode and apply outdated layout rules from the 1990s, causing inconsistent widths and font sizes.

Can an HTML page have multiple paragraphs and links?

Yes. You can place as many p and a elements inside body as your content requires.