Computer Science
Grade 6
20 min
HTML Attributes: Adding Extra Information to Tags
Understand how to use attributes to modify tag behavior and appearance.
Tutorial Preview
1
Introduction & Learning Objectives
Learning Objectives
Define what an HTML attribute is and its purpose.
Identify the two parts of an attribute: the name and the value.
Correctly write an attribute inside an opening HTML tag using the name="value" syntax.
Use the `src` and `alt` attributes to add an image to a webpage.
Use the `href` attribute to create a clickable hyperlink.
Explain why attributes are essential for making websites interactive and descriptive.
Have you ever wondered how a website knows which picture to show or where a link should go? 🤔 It's all thanks to secret messages we add to our HTML tags!
In this lesson, you'll learn about HTML attributes, which are special keywords that give extra information to our HTML tags. Think of them as adding superpowers to your tags, tell...
2
Key Concepts & Vocabulary
TermDefinitionExample
AttributeA special word added inside an opening HTML tag to provide extra information or instructions about the element.In `<img src="dog.jpg">`, the attribute is `src="dog.jpg"`.
Attribute NameThe first part of an attribute that says what kind of extra information you are providing. It's like a label.In `href="https://www.nasa.gov"`, the attribute name is `href`.
Attribute ValueThe second part of an attribute that gives the specific information. It's always inside quotation marks.In `href="https://www.nasa.gov"`, the attribute value is `"https://www.nasa.gov"`.
src attributeShort for 'source'. This attribute tells the browser where to find the file for an element, like an image.`<img src=...
3
Core Syntax & Patterns
The Name-Value Pair Rule
attribute-name="value"
Attributes are always written as a name, followed by an equals sign, and then the value in quotation marks. For example, `src="puppy.png"`.
The Opening Tag Rule
<tagname attribute="value">Content</tagname>
Attributes ALWAYS go inside the opening tag of an HTML element, after the tag name. They never go in the closing tag.
The Multiple Attributes Rule
<tagname attribute1="value1" attribute2="value2">
You can add more than one attribute to a single tag. Just separate them with a space. For example, `<img src="robot.gif" alt="A dancing robot">`.
4 more steps in this tutorial
Sign up free to access the complete tutorial with worked examples and practice.
Sign Up Free to ContinueSample Practice Questions
Challenging
A website has an image of a red, octagonal stop sign. Which `alt` text is the MOST helpful and descriptive for a user with a screen reader?
A.alt="image"
B.alt="A red, octagonal stop sign with the word STOP in white letters."
C.alt="stop sign"
D.alt="picture of a sign used for traffic control on the street"
Challenging
Why is it generally better to use a `class` attribute and a separate CSS file for styling, instead of putting the same `style` attribute on ten different paragraphs?
A.It makes the HTML file smaller and easier to read, and allows you to change the style in only one place.
B.The `style` attribute is old and no longer works in modern browsers.
C.Using a `class` makes the website load faster because it uses less electricity.
D.The `style` attribute can only be used once per page.
Challenging
A developer wants a link to open in a new browser tab when clicked. They start with `<a href="https://example.com">Visit Site</a>`. What attribute is missing to achieve this specific behavior?
A.new-tab="true"
B.window="new"
C.open="external"
D.target="_blank"
Want to practice and check your answers?
Sign up to access all questions with instant feedback, explanations, and progress tracking.
Start Practicing Free