HTML Attribute List - Dofactory

Có thể bạn quan tâm

HTML Attributes HTML Elements HTML Global Attributes

Attributes provide features or functionality to an element.

Attributes are placed inside the element's opening tag.

An element can have any number of attributes.

Example

#

This example has 2 <input> elements with type attributes. The different attribute values create 2 totally different input controls: a text field, and a button.

<input type="text"> <input type="button" value="Submit"> Try it live

For details on type attribute, see our HTML <input> type reference.

Syntax

#

Attributes have two parts: a name and a value.

<element> is the HTML element.
name1 and name2 are the attribute names.
value1 and value2 are the attribute values.
Attribute values are set between single quotes (') or double quotes (").
Examples include id, style, class, name, href, etc.

A paragraph element with 3 attributes: id, class, and style.

<p id='p1' class='color-teal' style='font-size:16px;'> Paragraph with three attributes. </p>

For a list of all attributes, see our HTML Attribute List.

Next, we'll review some common attributes.

HTML Elements HTML Global Attributes

HTML href Attribute

#

The href attribute defines a link address for an <a> tag.

Visit Google Visit <a href="https://www.google.com" target="_blank">Google</a> Try it live

Note: The target attribute indicates that the page will appear in a new tab or window.

For details on href attribute, see our HTML <a> href reference.

HTML src Attribute

#

The src attribute on an <img> element specifies the source file (url) for the image.

<img src="/img/html/vangogh.jpg" /> Try it live

For details on src, see our HTML <img> src reference.

HTML width and height Attributes

#

The width and height attributes define the size of an HTML element.

<img src="/img/html/vangogh.jpg" width="130" height="180"/> Try it live

Tip: Image height and width can also be specified with CSS.

For details on width and height, see our HTML width and HTML height reference guides.

HTML alt Attribute

#

The alt attribute specifies the alternative text to be displayed if the image cannot be loaded.In this example the image name is misspelled.

<img src="/img/html/vangooch.jpg" alt="Van Gogh, Self-portrait" /> Try it live

Tip: Always include an alt with your <img> tags in case the image has an error. This will also help with SEO (search engine optimization).

For details on alt, see our HTML <img> alt attribute reference.

HTML style Attribute

#

The style attribute changes the appearance of an HTML element, such as, color, font, and size.

This text has been styled.

<p style="color:royalblue;font-style:italic;background:lavender;"> This text has been styled. </p> Try it live

For details on style, see our HTML style attribute reference.

HTML lang Attribute

#

The <html> element has a lang attribute which specifies the document language. This example sets the document language to English US.

For details on lang, see our HTML lang attribute reference.

HTML title Attribute

#

The title attribute adds extra information to an element. Its value displays as a tooltip when hovering the mouse over the element. Here's a title attribute on a <span> element. Move your mouse over the text and a tooltip will appear.

Your order has shipped.

<p title="Order number: 831001">Your order has shipped.</p> Try it live

Tip: Tooltips are an easy way to give the user some extra information about an icon, a button, an image, etc.

For details on title, see our HTML title attribute reference.

Did you know?

#

Custom data-* attributes

Custom attributes can be applied to any HTML element using the data-* attribute. They store hidden values commonly used by JavaScript to create a more engaging user experiences.

A data-* attribute consists of an attribute name and an attribute value. The attribute name must be lowercase and at least one character long after the data- prefix.

Custom data-id and data-price attributes.

<ul data-type="products"> <li data-id="3" data-price="$9.59">Aniseed Syrup</li> <li data-id="5" data-price="$3.39">Chef Anton's Gumbo Mix</li> <li data-id="29" data-price="$12.79">Thüringer Rostbratwurst</li> </ul> Note: Custom data-* attributes are not displayed by the browser.

For details on data-* attributes, see our HTML data-* attribute reference.

Attribute List

#

Some commonly used HTML attributes:

Attribute	Description
id	Set a unique identifier for the element.
class	Sets one or more CSS classes to be applied to the element.
style	Sets the style for the element.
data-*	Defines additional data that can be used by JavaScript.
hidden	Specifies whether the element is hidden.
title	Sets a title that displays as a tooltip when element is hovered.
href	Sets the URL for a link
src	Sets the URL for an image
alt	Alternative text for an image if the image cannot be displayed
type	Used in input elements. Specifies input type (text, radio, and others)
value	Used in input elements. Specifies the initial value of the element
disabled	Specifies that an input element is disabled

Note: The global attributes are marked with a global icon These attributes don't belong to a specific element and can be applied to any element.

#

Our HTML Global Attributes Tutorial
Our HTML a Tag Reference
Our HTML img Tag Reference
Our HTML input Tag Reference