Attributes

HTML attributes provide additional information about HTML elements.

HTML Attributes

All HTML elements can have attributes
Attributes provide additional information about elements
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"

Types of HTML Attributes

There are three main types of HTML attributes:

Core Attributes: These are basic attributes that can be applied to most HTML elements. Examples include id, class, and style.
Internationalization Attributes: These attributes help adapt the document to different languages and regions. Examples include lang and dir.
Generic Attributes: These attributes provide additional information about the element but don't necessarily affect its appearance or behavior. Examples include data-* attributes for storing custom data private to the page or application.

Core attributes are some of the most widely used attributes in HTML. There are four main types:

id
class
title
style

ID Attribute

The ID attribute is used to assign a unique identifier to an HTML element. Each element with an ID has its own unique identity, similar to how each individual has a unique identity. Multiple elements cannot have the same ID.

Example:

app/page.tsx

1 <p id="html">This is an HTML tutorial</p>
2  <p id="python">This is a Python tutorial</p>

In this example, the ID attribute helps to distinguish between two paragraphs by having different values: "html" and "python

The lang Attribute

You should always include the lang attribute inside the <html> tag, to declare the language of the Web page. This is meant to assist search engines and browsers.

The following example specifies English as the language:

app/page.tsx

1<!DOCTYPE html>
2<html lang="en">
3<body>
4...
5</body>
6</html>

Country codes can also be added to the language code in the lang attribute. So, the first two characters define the language of the HTML page, and the last two characters define the country.

The following example specifies English as the language and United States as the country:

Class Attribute

The class attribute is used to associate an HTML element with a particular class, typically for styling or JavaScript manipulation. Unlike the ID attribute, the class attribute is not unique, and multiple elements can share the same class.

Title Attribute

The title attribute provides additional information about an element and is often displayed as a tooltip when the mouse hovers over it.

Example:

app/page.tsx

1<h4 title="hello, motto">Title attribute</h4>

Style Attribute

The style attribute allows for inline styling of HTML elements. It is used in conjunction with CSS properties to directly style individual elements within the HTML code.

The width and height Attributes

The <img> tag should also contain the width and height attributes, which specify the width and height of the image (in pixels):

app/page.tsx

1<img src="img_girl.jpg" width="500" height="600">

Case Sensitivity

The HTML standard is flexible about the case of attribute names, allowing them to be written in either uppercase or lowercase, such as "title" or "TITLE." However, for best practices and compatibility with stricter document types like XHTML, the W3C recommends using lowercase attributes.

Prev Next