Html display text attributes

HTML attribute reference

Elements in HTML have attributes; these are additional values that configure the elements or adjust their behavior in various ways to meet the criteria the users want.

Attribute list

Attribute Name	Elements	Description
accept	,	List of types the server accepts, typically a file type.
accept-charset		List of supported charsets.
accesskey	Global attribute	Keyboard shortcut to activate or add focus to the element.
action		The URI of a program that processes the information submitted via the form.
align Deprecated	, , , , , , , , , , , ,	Specifies the horizontal alignment of the element.
allow		Specifies a feature-policy for the iframe.
alt	, ,	Alternative text in case an image can’t be displayed.
async		Executes the script asynchronously.
autocapitalize	Global attribute	Sets whether input is automatically capitalized when entered by user
autocomplete	, , ,	Indicates whether controls in this form can by default have their values automatically completed by the browser.
autoplay	,	The audio or video should play as soon as possible.
background	, , ,	Specifies the URL of an image file.

Note: Although browsers and email clients may still support this attribute, it is obsolete. Use CSS background-image instead.

Background color of the element.

Note: This is a legacy attribute. Please use the CSS background-color property instead.

Note: This is a legacy attribute. Please use the CSS border property instead.

This attribute sets the text color using either a named color or a color specified in the hexadecimal #RRGGBB format.

Note: This is a legacy attribute. Please use the CSS color property instead.

Specifies the height of elements listed here. For all other elements, use the CSS height property.

Note: In some instances, such as , this is a legacy attribute, in which case the CSS height property should be used instead.

Specifies a Subresource Integrity value that allows browsers to verify what they fetch.

Note: This attribute is obsolete, use instead.

For the elements listed here, this establishes the element’s width.

Note: For all other instances, such as , this is a legacy attribute, in which case the CSS width property should be used instead.

Content versus IDL attributes

In HTML, most attributes have two faces: the content attribute and the IDL (Interface Definition Language) attribute.

The content attribute is the attribute as you set it from the content (the HTML code) and you can set it or get it via element.setAttribute() or element.getAttribute() . The content attribute is always a string even when the expected value should be an integer. For example, to set an element’s maxlength to 42 using the content attribute, you have to call setAttribute(«maxlength», «42») on that element.

The IDL attribute is also known as a JavaScript property. These are the attributes you can read or set using JavaScript properties like element.foo . The IDL attribute is always going to use (but might transform) the underlying content attribute to return a value when you get it and is going to save something in the content attribute when you set it. In other words, the IDL attributes, in essence, reflect the content attributes.

IDL attributes are not always strings; for example, input.maxlength is a number (a signed long). When using IDL attributes, you read or set values of the desired type, so input.maxlength is always going to return a number and when you set input.maxlength , it wants a number. If you pass another type, it is automatically converted to a number as specified by the standard JavaScript rules for type conversion.

IDL attributes can reflect other types such as unsigned long, URLs, booleans, etc. Unfortunately, there are no clear rules and the way IDL attributes behave in conjunction with their corresponding content attributes depends on the attribute. Most of the time, it will follow the rules laid out in the specification, but sometimes it doesn’t. HTML specifications try to make this as developer-friendly as possible, but for various reasons (mostly historical), some attributes behave oddly ( select.size , for example) and you should read the specifications to understand how exactly they behave.

Boolean Attributes

Some content attributes (e.g. required , readonly , disabled ) are called boolean attributes. If a boolean attribute is present, its value is true, and if it’s absent, its value is false.

HTML defines restrictions on the allowed values of boolean attributes: If the attribute is present, its value must either be the empty string (equivalently, the attribute may have an unassigned value), or a value that is an ASCII case-insensitive match for the attribute’s canonical name, with no leading or trailing whitespace. The following examples are valid ways to mark up a boolean attribute:

div itemscope>This is valid HTML but invalid XML.div> div itemscope=itemscope>This is also valid HTML but invalid XML.div> div itemscope="">This is valid HTML and also valid XML.div> div itemscope="itemscope"> This is also valid HTML and XML, but perhaps a bit verbose. div> 

To be clear, the values » true » and » false » are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether. This restriction clears up some common misunderstandings: With checked=»false» for example, the element’s checked attribute would be interpreted as true because the attribute is present.

Event handler attributes

Warning: The use of event handler content attributes is discouraged. The mix of HTML and JavaScript often produces unmaintainable code, and the execution of event handler attributes may also be blocked by content security policies.

In addition to the attributes listed in the table above, global event handlers — such as onclick — can also be specified as content attributes on all elements.

All event handler attributes accept a string. The string will be used to synthesize a JavaScript function like function name(/*args*/) , where name is the attribute’s name, and body is the attribute’s value. The handler receives the same parameters as its JavaScript event handler counterpart — most handlers receive only one event parameter, while onerror receives five: event , source , lineno , colno , error . This means you can, in general, use the event variable within the attribute.

div onclick="console.log(event)">Click me!div> div onclick="console.log(onclick)">Click me!div> 

Источник

HTML 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»

The href Attribute

Example

You will learn more about links in our HTML Links chapter.

The src Attribute

The tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed:

Example

There are two ways to specify the URL in the src attribute:

1. Absolute URL — Links to an external image that is hosted on another website. Example: src=»https://www.w3schools.com/images/img_girl.jpg» .

Notes: External images might be under copyright. If you do not get permission to use it, you may be in violation of copyright laws. In addition, you cannot control external images; it can suddenly be removed or changed.

2. Relative URL — Links to an image that is hosted within the website. Here, the URL does not include the domain name. If the URL begins without a slash, it will be relative to the current page. Example: src=»https://www.w3schools.com/html/img_girl.jpg». If the URL begins with a slash, it will be relative to the domain. Example: src=»https://www.w3schools.com/images/img_girl.jpg».

Tip: It is almost always best to use relative URLs. They will not break if you change domain.

The width and height Attributes

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

Example

The alt Attribute

The required alt attribute for the tag specifies an alternate text for an image, if the image for some reason cannot be displayed. This can be due to a slow connection, or an error in the src attribute, or if the user uses a screen reader.

Example

Example

See what happens if we try to display an image that does not exist:

You will learn more about images in our HTML Images chapter.

The style Attribute

The style attribute is used to add styles to an element, such as color, font, size, and more.

Example

You will learn more about styles in our HTML Styles chapter.

The lang Attribute

You should always include the lang attribute inside the 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:

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:

You can see all the language codes in our HTML Language Code Reference.

The title Attribute

The title attribute defines some extra information about an element.

The value of the title attribute will be displayed as a tooltip when you mouse over the element:

Example

We Suggest: Always Use Lowercase Attributes

The HTML standard does not require lowercase attribute names.

The title attribute (and all other attributes) can be written with uppercase or lowercase like title or TITLE.

However, W3C recommends lowercase attributes in HTML, and demands lowercase attributes for stricter document types like XHTML.

At W3Schools we always use lowercase attribute names.

We Suggest: Always Quote Attribute Values

The HTML standard does not require quotes around attribute values.

However, W3C recommends quotes in HTML, and demands quotes for stricter document types like XHTML.

Good:

Bad:

Sometimes you have to use quotes. This example will not display the title attribute correctly, because it contains a space:

Example

At W3Schools we always use quotes around attribute values.

Single or Double Quotes?

Double quotes around attribute values are the most common in HTML, but single quotes can also be used.

In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes:

Chapter Summary

• All HTML elements can have attributes
• The href attribute of specifies the URL of the page the link goes to
• The src attribute of specifies the path to the image to be displayed
• The width and height attributes of provide size information for images
• The alt attribute of provides an alternate text for an image
• The style attribute is used to add styles to an element, such as color, font, size, and more
• The lang attribute of the tag declares the language of the Web page
• The title attribute defines some extra information about an element

HTML Exercises

HTML Attribute Reference

A complete list of all attributes for each HTML element, is listed in our: HTML Attribute Reference.

Источник