HTML Basics: Tags, Attributes and Structure

HTML (HyperText Markup Language) is the markup language that defines the structure and meaning of web content. You write it as elements, made of tags such as <h1> or <p> that wrap content, and you add details to those elements with attributes such as href or alt. Every page follows the same basic structure: a doctype, an <html> element, a <head> for metadata and a <body> for visible content.

Key takeaways#

• HTML describes what content is (a heading, a paragraph, a link); CSS controls how it looks and JavaScript controls how it behaves.
• Start every page with <!DOCTYPE html>, which tells browsers to use standards mode.
• Attributes add details to elements: href sets a link's destination, alt describes an image and class gives CSS and JavaScript a hook.
• Built-in form attributes such as type="email" and required provide validation without any JavaScript.
• Prefer semantic elements such as <header>, <nav> and <main> over generic <div> elements.

What is HTML?#

HTML is not a programming language: it has no logic, variables or loops. It is a markup language that tells the browser what each piece of content is:

• "This is a heading."
• "This is a paragraph."
• "This is a button."

1. What is the basic structure of an HTML page?#

Every HTML document follows this structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Page</title>
    <!-- Metadata, CSS links and scripts go here -->
</head>
<body>
    <!-- Visible content goes here -->
    <h1>Welcome to WebFiddle</h1>
</body>
</html>

• <!DOCTYPE html>: Tells the browser to render the page in standards mode rather than the legacy "quirks mode" used for very old pages (MDN: quirks mode and standards mode).
• <html lang="en">: The root element. The lang attribute tells screen readers and translation tools which language the page is written in.
• <head>: Information about the page that isn't displayed in the page itself, such as the character encoding, the viewport settings for mobile devices and the <title> shown in the browser tab.
• <body>: The visible content of the page.

2. Which HTML tags should you learn first?#

These elements cover most everyday pages.

Text

• <h1> to <h6>: Headings, from most important to least important.
• <p>: A paragraph.
• <strong>: Content with strong importance, shown in bold by default.
• <em>: Stressed emphasis, shown in italics by default.

Containers

• <div>: A generic block container with no meaning of its own. Use it for layout when no semantic element fits.
• <span>: A generic inline container, often used to style part of a line of text.

Block elements such as <div> start on a new line and accept a width, while inline elements such as <span> flow inside a line of text and ignore it. The CSS box model explained shows how that difference affects padding and margins.

Links, buttons and images

• <a href="https://www.google.com">: An anchor (link). Include https:// for external sites; without it, href="google.com" is treated as a relative path on your own site (MDN: the a element).
• <button>: A clickable button.
• <img src="cat.jpg" alt="A cute cat">: An image. Always add alt text that describes the image, for screen reader users and for when the image fails to load.

3. How do HTML forms collect user input?#

Forms let users send data, usually to a server.

<form>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="[email protected]" required>

    <label for="pass">Password:</label>
    <input type="password" id="pass" name="password" required>

    <button type="submit">Log in</button>
</form>

• type="email": The browser checks that the value looks like an email address, and on devices with on-screen keyboards it may show a keyboard suited to typing emails (MDN: input type="email").
• required: The browser blocks submission while the field is empty. No JavaScript needed!
• name: The key each value is sent under. A field without a name is not included when the form is submitted.
• <label for="...">: Connects the label to the input with the matching id, so clicking the label focuses the field and screen readers announce the label.

Without an action attribute, the form submits to the URL of the current page.

4. What are HTML attributes?#

Attributes are name-value pairs written inside an element's opening tag. They add details to the element.

• id="unique": An identifier that must be unique within the page, like a passport number.
• class="btn red": One or more space-separated group names, like team jerseys. Mostly used as hooks for CSS and JavaScript.
• style="color: red;": Inline styles. Avoid them for anything reusable, and put styles in CSS classes instead.

5. Why should you use semantic HTML?#

Don't use <div> for everything. Semantic elements describe the role of the content they contain.

• Use <header> for introductory content, such as the logo and site title.
• Use <nav> for major navigation links.
• Use <main> for the primary content of the page.
• Use <footer> for closing information, such as copyright and contact links.

Screen readers expose these elements as landmarks that users can jump between, and they make your markup easier for other developers and tools to understand. Learn more in semantic HTML for SEO and accessibility.

Summary#

HTML is forgiving: browsers try to display broken markup instead of showing an error. That forgiveness can hide bugs, so follow a few rules:

1. Close your elements (</h1>, </div>). Void elements such as <img> and <input> are the exception: they have no closing tag.
2. Nest elements correctly. For example, don't put a <div> inside a <p>. A paragraph may only contain phrasing content, so the browser ends the paragraph before the <div>, which changes your structure (WHATWG HTML Standard: the p element).
3. Use semantic elements (<article>, <header>) where they fit.

Write your first HTML page in the live HTML editor, then make it look good with CSS basics: box model, selectors and Flexbox.

Frequently asked questions#

Is HTML a programming language?

No. HTML is a markup language: it describes the structure and meaning of content but has no variables, conditions or loops. Browsers use HTML to build the page, CSS to style it and JavaScript to add behavior. Learning HTML first makes CSS and JavaScript easier, because both of them work with HTML elements.

What is the difference between an HTML tag and an element?

A tag is the markup you type, such as an opening paragraph tag or its matching closing tag. An element is the complete unit: the opening tag, the content inside it and the closing tag together. Void elements, such as images and inputs, consist of a single tag and cannot contain any content.

Why does my HTML link go to the wrong page?

If an href value has no protocol, such as google.com, the browser treats it as a path relative to the current page, so the link points to a page on your own site that probably doesn't exist. Write the full address, including https://, for external sites, and start internal paths with a slash.

Do I need a closing tag for every HTML element?

No. Void elements such as img, input, br and meta never take a closing tag, because they cannot have content. The HTML standard also lets you omit some other end tags, such as those for paragraphs and list items, in certain situations. Writing closing tags for all non-void elements is still the clearest habit.