HTML Tags & Attributes: The Building Blocks
Discover how to give your website structure and meaning with the essential building blocks of the web.
/* Tags are like labels... */Anatomy of an HTML Tag
Tags are keywords wrapped in angle brackets like <p>. They act as containers, telling the browser how to format and display the content inside them. Most tags come in pairs: an opening tag (<h1>) and a closing tag (</h1>). The closing tag has a forward slash before the tag name.
Adding Detail with Attributes
Attributes provide extra information about an HTML element. They are always included in the opening tag and are made up of a name and a value in the format name="value". For example, in <a href="https://example.com">, `href` is the attribute name and `https://example.com` is its value.
Nesting Elements Correctly
You can place HTML elements inside other elements—this is called nesting. For proper nesting, tags must be closed in the reverse order they were opened. For example, <p><strong>This is correct.</strong></p> is valid, but <p><strong>This is not.</p></strong> is invalid.
Void Elements: The Exception
Some tags, called void or empty elements, don't have a closing tag because they don't contain any content. They are self-closing. Common examples include the image tag <img>, the line break tag <br>, and the horizontal rule <hr>.
Practice Zone
Interactive Test 1: Assemble a Tag
Assemble a link tag. Drag the pieces into the correct order to create a valid anchor element.
Arrastra en el orden correspondiente.
Arrastra las opciones:
Completa el código:
Interactive Test 2: Identify the Parts
Rellena los huecos en cada casilla.
<img ="" alt="A cute cat">
Practice Example: Code Editor
Create a heading tag `h2` with the text "My First Attribute" and give it an `id` attribute with the value "main-heading".
Bringing Your HTML to Life
HTML provides the structure, but its true power is unlocked when combined with CSS for styling and JavaScript for interactivity. Here’s how they connect.
1. The DOM: Your Page's Blueprint
The Document Object Model (DOM) is a tree-like representation of your HTML. JavaScript can access and manipulate this tree to change content, styles, and structure dynamically—no page reload required.
// JS finds the h1 and changes it
document.querySelector('h1')
.textContent = 'Hello, DOM!';Hello, DOM!
2. Linking CSS for Styling
To style your page, you link an external CSS file from the <head> section. The browser fetches this file and applies the rules to the matching elements in the DOM.
<head>
<link rel="stylesheet" href="styles.css">
</head>
/* styles.css */
body {
background-color: #f0f8ff;
}3. Adding Interactivity with JavaScript
JavaScript is usually added just before the closing </body> tag. This ensures the entire DOM is loaded before the script tries to interact with it, preventing errors.
<body>
<button>Click Me</button>
<script src="app.js"></script>
</body>Practical Takeaway: HTML is the skeleton, CSS is the clothing, and JavaScript is the brain. Understanding how they connect through the DOM is the cornerstone of modern web development.
Tags & Attributes Glossary
- Tag
- A keyword enclosed in angle brackets (
<p>) that defines the type of content. Most come in opening and closing pairs. - Element
- The complete unit, consisting of the opening tag, the content, and the closing tag. For example:
<h1>My Title</h1>. - Attribute
- A property that provides additional information about an element. It's always specified in the opening tag, like
hrefin<a href="...">. - Void Element
- An element that does not have a closing tag because it cannot contain any content. Examples include
<img>,<br>, and<hr>. - Nesting
- The practice of placing one HTML element inside another. Proper nesting is crucial for valid HTML.