Introduction: Introduction to HTML attributes
HTML attributes are like the adjectives of web development. In HTML, attributes are extra
pieces of information that you add to an element’s opening tag to define its properties or
behavior.
The lang Attribute
The lang attribute specifies the language of the element's content. It's most commonly used
on the root <html> tag to declare the language for the entire document.
● Purpose: Primarily for accessibility and search engine optimization (SEO). Screen
readers use it to select the correct voice profile, and search engines use it to filter results
by language.
● Simple Example:
HTML
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>My Website</title>
</head>
<body>
<p>This page is in United States English.</p>
</body>
</html>
● Intermediate Insight: You can use lang on any element to specify that a particular
section of the page is in a different language. For example, if you quote a French phrase
within an English paragraph.
● Real-world Use Case:
HTML
<p>As the French say, <span lang="fr">c'est la vie</span>.</p>
The class and ID attributes
These two attributes are crucial for applying styles with CSS and manipulating elements with
JavaScript. Though they seem similar, they have a key difference.
The id Attribute
The id attribute assigns a unique identifier to an element. An id name must be unique within
the entire HTML document. Think of it like a person's national identification number – only one
person has it.
● Purpose: To target a single, specific element for styling, JavaScript manipulation, or
creating internal page links (anchor links).
● Simple Example:
HTML
<div id="main-header">
<h1>Welcome to my Page</h1>
</div>
In CSS, you would target this with #main-header.
The class Attribute
The class attribute assigns one or more class names to an element. The same class can be
used on multiple elements. Think of it like a category or a tag – many items can share the
same one.
● Purpose: To group multiple elements together to apply the same styles or behavior.
● Simple Example:
HTML
<p class="highlight">This paragraph is important.</p>
<p>This one is not.</p>
<p class="highlight">This one is also important.</p>
In CSS, you would target these elements with .highlight.
● Intermediate Insight: An element can have multiple classes, separated by spaces. This
is a cornerstone of modern CSS methodologies like BEM (Block, Element, Modifier).
HTML
<button class="btn btn-primary btn-large">Submit</button>
● Real-world Use Case: Use id for a unique page section like a main navigation bar (<nav
id="main-nav">) and class for repeatable components like buttons or alert messages
(<div class="alert-success">).
The href, src, and alt Attributes
These attributes are essential for creating links and embedding media.
The href Attribute
The hypertext reference (href) attribute specifies the URL of the page the link goes to. It is
used exclusively with the anchor <a> tag.
● Purpose: To create hyperlinks to other web pages, files, locations within the same page,
email addresses, or other URLs.
● Simple Example:
HTML
<a href="[Link] to Google</a>
The src Attribute
The source (src) attribute specifies the path to the resource to be embedded. It's used with
elements like <img>, <audio>, <video>, and <script>.
● Purpose: To embed external content, such as an image or a JavaScript file, into the
document.
● Simple Example:
HTML
<img src="/images/[Link]" alt="My Company Logo">
The alt Attribute
The alternate text (alt) attribute provides descriptive text for an image if the image cannot be
displayed for any reason (e.g., slow connection, error in the src path, or if the user is using a
screen reader).
● Purpose: Crucial for web accessibility. It allows screen readers to describe the image
to visually impaired users. It also helps with SEO.
● Simple Example:
HTML
<img src="[Link]" alt="A golden retriever puppy playing with a red ball">
● Intermediate Insight: If an image is purely decorative and adds no real content (like a
background pattern), you should still include the alt attribute but leave it empty (alt="").
This tells screen readers to skip it.
The title and style Attributes
These attributes provide extra information and inline styling.
The title Attribute
The title attribute specifies extra information about an element. The information is most often
shown as a tooltip text when the mouse moves over the element.
● Purpose: To provide supplementary, non-essential information about an element.
● Simple Example:
HTML
<p title="I'm a tooltip!">Hover over this paragraph.</p>
● Real-world Use Case: Adding more context to an abbreviation using the <abbr> tag.
HTML
<p>I love learning about <abbr title="HyperText Markup Language">HTML</abbr>.</p>
The style Attribute
The style attribute is used to apply inline CSS styles directly to an element.
● Purpose: To apply unique styling to a single element.
● Simple Example:
HTML
<p style="color:blue; font-size:20px;">This text is blue and large.</p>
● Intermediate Insight: While useful for quick tests or in specific JavaScript-driven
scenarios, using the style attribute is generally considered bad practice for styling a
website. It mixes content (HTML) with presentation (CSS), making the code harder to
maintain. It's almost always better to use external CSS stylesheets with class or id
selectors.
The name and value Attributes
These attributes are fundamental when working with HTML forms (<form>).
The name Attribute
The name attribute is used to identify form data after it has been submitted to the server. For
form elements like <input>, <textarea>, and <select>, the name attribute is required for the
data to be included in the submission.
● Purpose: To give a variable name to the form data.
● Simple Example:
HTML
<form action="/login" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
</form>
When submitted, the server would receive a key-value pair like username=user_input.
The value Attribute
The value attribute's meaning changes depending on the element.
● For <input> elements, it specifies the initial value of the input field.
● For <button> elements, it specifies the value associated with the button's name when
submitted.
● Purpose: To set a default or submitted value for a form element.
● Simple Example:
HTML
<input type="text" name="country" value="Nigeria">
<button type="submit" name="action" value="subscribe">Subscribe</button>
● Real-world Use Case: In a user profile settings page, the value attribute would be used
to pre-populate form fields with the user's current data (e.g., their existing email
address).
Summary ✨
● Attributes provide additional information about HTML elements.
● lang: Sets the language for accessibility and SEO.
● id: A unique identifier for one element.
● class: A non-unique identifier to group multiple elements.
● href: Specifies the destination URL for a link <a>.
● src: Specifies the source path for embedded media like <img>.
● alt: Provides essential alternative text for images for accessibility.
● title: Adds supplementary info, often as a tooltip.
● style: Applies CSS styles directly to an element (use sparingly!).
● name & value: Used in forms to identify and define the data being submitted.
Practice Exercise: Create a Simple Bio Card 📝
Try creating a small [Link] file with the following elements to practice using these
attributes:
1. Set the document's language to English in the <html> tag.
2. Create a main container <div> with a unique id of bio-card.
3. Inside the div, add an <h2> for your name.
4. Add a profile picture using an <img> tag. Provide a valid src (you can find an image online
and use its URL) and a descriptive alt text.
5. Add a paragraph <p> with a short bio. Give this paragraph a class of bio-text.
6. Add a link <a> that points to your favorite website. The link text should be "My Favorite
Website". Use the title attribute on this link to add a tooltip that says "Click to visit!".
7. Use the style attribute on your name (<h2>) to make it a unique color (e.g., style="color:
navy;").
This simple exercise will help you see how these attributes work together to build a structured
and more functional webpage. Happy coding!