HTML Attributes

#html #beginners #writing #css

What is an HTML attribute?

An HTML attribute is a component of the markup language that is used to modify how an HTML element behaves or looks.
For instance, attributes can alter the colour, HTML elements, size, or functionality.

Attributes are used by including them in the first HTML tag:

<tag_name attribute_name="value">Content</tag_name>

The name of the attribute is followed by an equals sign (=) and a value enclosed in quotes. Note that you can often declare a value using a value name and value. For example, you can use the style attribute to change the font-size value name to the value of 40px:

<tag_name style="font-size:40px">This text content will be sized to 40 pixels by the web browser.</tag_name>

Attribute list

Accept;
Types accepted by the server, typically a file type.
Action;
The form would be submitted by the URI of a program that processes it.
Align;
The horizontal alignment of the element is specified.
Alt;
Alternative text in case you can't display an image.
Cite;
It contains a URI pointing to the source or change of the quote.
Class;
is frequently used with CSS to style elements with similar properties.
Codebase;
This attribute specifies the absolute or relative URL of the directory containing the class files referenced by the code attribute.
Data;
Specifies the URL of the resource.
Datetime;
Indicates the element's associated date and time.
Form;
The form that owns the element is indicated.
Href;
a linked resource's URL.
Hreflang;
The language of the linked resource is specified.
ID;
is frequently used with CSS to style a specific element. This attribute's value must be unique.
Inputmode;
suggests the kind of data the user should submit when modifying elements or contents. The attribute can be applied to elements in an editing host or form controls (such as the value of text area elements) (e.g., using a content editable attribute).
Label;
Specifies the element's user-readable title.
List;
Determines a set of pre-defined options to recommend to the user.
Name;
Name of the element. For example, the server uses them to identify the fields in the form submitted.
Style;
Defines CSS styles that will override previously defined styles.
Title;
When hovering over an element, the text will be displayed in a tooltip.
Type;
Defines the type of the element.
Value;
Defines a default value displayed in the element on page load.
NB: these are but a few attributes.

How To Use HTML Attributes
The colour, size, and other characteristics of HTML elements can be changed through HTML attributes. For instance, you can alter a text element's font colour or size using an attribute or an image element's width and height using an attribute.

An example of how a HTML attribute is placed in an opening tag:

<element attribute="property:value;">

Style is a typical attribute that enables you to add style properties to an HTML element. At the same time, it's more typical to style an HTML document using a separate stylesheet.

Using the style attributes we can change multiple properties of an h1 element with the style attributes

<h1 style="font-size:40px;color:green;">This text is 40 pixels and green.</h1>

NB: In HTML, most attributes have two sides, and they are the content attribute and the Interface Definition Language (IDL) attribute.

The content attribute is the attribute as it appears in the content (the HTML code)
Even when an integer should be the expected value, the content attribute always has a string value. For instance, you must use setAttribute("maxlength", "42") on an input element to set its max length to 42 using the content attribute.

The IDL (Interface Definition Language) attribute is also a JavaScript property. These attributes can be read or changed using JavaScript properties like element.foo. The IDL attribute will always use the underlying content property to return a value when you obtain it and will always be saved in the content attribute when you set it. In essence, the IDL properties represent the content attributes, in other words.

Not all IDL attributes are strings; for example, input.maxlength is a number (a signed long). When you use an IDL attribute, you read or set values of the desired type, so input.maxlength will always return a number when you set input.maxlength, it wants a number. According to the standard JavaScript type conversion rules, passing another type is immediately converted to a number.

IDL attributes can reflect on other types, such as unsigned long URLs, booleans, etc. Unfortunately, there are no hard-and-fast guidelines, and each IDL attribute's behaviour concerning its associated content attribute will vary. It will generally adhere to the specifications' guidelines, but occasionally it won't. The HTML specifications try to make this as developer-friendly as possible.

Some content attributes (for example, required, read-only, and disabled) are referred to as boolean attributes. If there is a boolean attribute, its value is true; otherwise, it is false.

HTML specifies the permitted values for boolean attributes: If the attribute exists, its value must be either the empty string (the attribute may have an unassigned value) or an ASCII case-insensitive match for the canonical name of the attribute, with no leading or trailing whitespace. Below are good 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, albeit a little verbose.
</div>

The values "true" and "false" might not be allowed for boolean attributes. To represent a false value, the attribute must be removed entirely. This restriction clarifies a few common misconceptions: For example, with checked = "false," the element's checked attribute would be interpreted as true because the attribute is present.

I hope this article has given you a better understanding of HTML attributes and how to use them.