HTML attribute

Last updated

HTML attributes are special words used inside the opening tag to control the element's behaviour. HTML attributes are a modifier of a HTML element type. An attribute either modifies the default functionality of an element type or provides functionality to certain element types unable to function correctly without them. In HTML syntax, an attribute is added to a HTML start tag .

Contents

Several basic attributes types have been recognized, including: (1) required attributes, needed by a particular element type for that element type to function correctly; (2) optional attributes, used to modify the default functionality of an element type; (3) standard attributes, supported by many element types; and (4) event attributes, used to cause element types to specify scripts to be run under specific circumstances.

Some attribute types function differently when used to modify different element types. For example, the attribute name is used by several element types, but has slightly different functions in each. [1]

Description

HTML attributes generally appear as name–value pairs, separated by =, and are written within the start tag of an element, after the element's name:

<elementattribute="value">elementcontent</element>

Where element names the HTML element type, and attribute is the name of the attribute, set to the provided value. The value may be enclosed in single or double quotes, although values consisting of certain characters can be left unquoted in HTML (but not XHTML). [2] [3] Leaving attribute values unquoted is considered unsafe. [4]

Although most attributes are provided as paired names and values, some affect the element simply by their presence in the start tag of the element [5] (like the ismap attribute for the img element [6] ).

The abbreviation element, abbr, can be used to demonstrate these various attributes:

<abbrid="anId"class="aClass"style="color:blue;"title="Hypertext Markup Language">HTML</abbr>

This example displays as HTML in blue without being a link, and in most browsers, pointing the cursor at the abbreviation should display the title text "Hypertext Markup Language" within a floating yellow background (tooltip).

<divstyle="text-align: center;">Centered text</div>

In this other example, your text will look like this:

Centered text

Most elements also take the language-related attributes lang and dir.

Common attributes

Usually, HTML elements can take any of several most common standard attributes (See the complete list):

Varieties

HTML attributes are generally classified as required attributes, optional attributes, standard attributes, and event attributes:

Required and optional

Used by two elements

Used by multiple elements

Standard attributes

Standard attributes are also known as global attributes, and function with a large number of elements. [17] They include the basic standard attributes: these include accesskey, class, contenteditable, contextmenu, data, dir, hidden, id, lang, style, tabindex, title. There are also some experimental ones. Both xml:lang and xml:base have been deprecated. The multiple aria-* attributes improve accessibility. [17] The event handler attributes are listed later on.

Technically all standard attributes must be accepted by all elements, though they will not function with some elements. [18] The table below lists some common standard attributes, and some elements they can function with.

Elementidclassstyletitledirlangxml:langaccesskeytabindex
<param> id
<head> dirlangxml:lang
<html> dirlangxml:lang
<meta> dirlangxml:lang
<title> dirlangxml:lang
<style> titledirlangxml:lang
<applet> idclassstyletitle
<br> idclassstyletitle
<frame> idclassstyletitle
<frameset> idclassstyletitle
<iframe> idclassstyletitle
<basefont> idclassstyletitledirlang
<center> idclassstyletitledirlang
<dir> idclassstyletitledirlang
<font> idclassstyletitledirlang
<menu> idclassstyletitledirlang
<s> idclassstyletitledirlang
<strike> idclassstyletitledirlang
<u> idclassstyletitledirlang
<abbr> idclassstyletitledirlangxml:lang
<acronym> idclassstyletitledirlangxml:lang
<address> idclassstyletitledirlangxml:lang
<b> idclassstyletitledirlangxml:lang
<big> idclassstyletitledirlangxml:lang
<blockquote> idclassstyletitledirlangxml:lang
<body> idclassstyletitledirlangxml:lang
<caption> idclassstyletitledirlangxml:lang
<cite> idclassstyletitledirlangxml:lang
<code> idclassstyletitledirlangxml:lang
<col> idclassstyletitledirlangxml:lang
<colgroup> idclassstyletitledirlangxml:lang
<dd> idclassstyletitledirlangxml:lang
<del> idclassstyletitledirlangxml:lang
<dfn> idclassstyletitledirlangxml:lang
<div> idclassstyletitledirlangxml:lang
<dl> idclassstyletitledirlangxml:lang
<dt> idclassstyletitledirlangxml:lang
<em> idclassstyletitledirlangxml:lang
<fieldset> idclassstyletitledirlangxml:lang
<form> idclassstyletitledirlangxml:lang
<hr> idclassstyletitledirlangxml:lang
<h1> , <h2> , <h3> , <h4> , <h5> , <h6> idclassstyletitledirlangxml:lang
<i> idclassstyletitledirlangxml:lang
<img> idclassstyletitledirlangxml:lang
<ins> idclassstyletitledirlangxml:lang
<kbd> idclassstyletitledirlangxml:lang
<li> idclassstyletitledirlangxml:lang
<link> idclassstyletitledirlangxml:lang
<map> idclassstyletitledirlangxml:lang
<noframes> idclassstyletitledirlangxml:lang
<noscript> idclassstyletitledirlangxml:lang
<ol> idclassstyletitledirlangxml:lang
<optgroup> idclassstyletitledirlangxml:lang
<option> idclassstyletitledirlangxml:lang
<p> idclassstyletitledirlangxml:lang
<pre> idclassstyletitledirlangxml:lang
<q> idclassstyletitledirlangxml:lang
<samp> idclassstyletitledirlangxml:lang
<small> idclassstyletitledirlangxml:lang
<span> idclassstyletitledirlangxml:lang
<strong> idclassstyletitledirlangxml:lang
<sub> idclassstyletitledirlangxml:lang
<sup> idclassstyletitledirlangxml:lang
<table> idclassstyletitledirlangxml:lang
<tbody> idclassstyletitledirlangxml:lang
<td> idclassstyletitledirlangxml:lang
<tfoot> idclassstyletitledirlangxml:lang
<th> idclassstyletitledirlangxml:lang
<thead> idclassstyletitledirlangxml:lang
<tr> idclassstyletitledirlangxml:lang
<tt> idclassstyletitledirlangxml:lang
<ul> idclassstyletitledirlangxml:lang
<var> idclassstyletitledirlangxml:lang
<label> idclassstyletitledirlangxml:langaccesskey
<legend> idclassstyletitledirlangxml:langaccesskey
<object> idclassstyletitledirlangxml:langtabindex
<select> idclassstyletitledirlangxml:langtabindex
<a> idclassstyletitledirlangxml:langaccesskeytabindex
<area> idclassstyletitledirlangxml:langaccesskeytabindex
<button> idclassstyletitledirlangxml:langaccesskeytabindex
<input> idclassstyletitledirlangxml:langaccesskeytabindex
<textarea> idclassstyletitledirlangxml:langaccesskeytabindex

Event attributes

The standard attributes include the event handler attributes. They are all prefixed on-: [17]

Event attributes, added in HTML version 4, allow an element to specify scripts to be run under specific circumstances. The table below lists some common event handler attributes, and some elements they can function with.

ElementAtAtAtAtAtAtAtAtAtAtAtAtAtAtAtAtAt
<frameset> onloadonunload
<body> onloadonunloadonclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<abbr> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<acronym> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<address> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<b> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<big> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<blockquote> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<caption> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<center> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<cite> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<code> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<col> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<colgroup> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<dd> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<del> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<dfn> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<dir> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<div> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<dl> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<dt> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<em> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<fieldset> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<h1> , <h2> , <h3> , <h4> , <h5> , <h6> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<hr> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<i> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<ins> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<kbd> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<legend> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<li> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<link> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<map> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<menu> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<noframes> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<noscript> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<object> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<ol> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<optgroup> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<option> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<p> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<pre> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<q> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<s> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<samp> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<small> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<span> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<strike> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<strong> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<sub> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<sup> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<table> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<tbody> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<td> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<tfoot> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<th> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<thead> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<tr> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<tt> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<u> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<ul> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<var> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<img> onabortonclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyup
<a> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyuponbluronfocus
<area> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyuponbluronfocus
<button> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyuponbluronfocus
<form> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyuponbluronfocus
<label> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyuponbluronfocus
<select> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyuponbluronfocusonchange
<input> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyuponbluronfocusonchangeonselect
<textarea> onclickondblclickonmousedownonmousemoveonmouseoutonmouseoveronmouseuponkeydownonkeypressonkeyuponbluronfocusonchangeonselect

See also

Related Research Articles

A document type definition (DTD) is a specification file that contains set of markup declarations that define a document type for an SGML-family markup language. The DTD specification file can be used to validate documents.

<span class="mw-page-title-main">HTML</span> HyperText Markup Language

HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

Meta elements are tags used in HTML and XHTML documents to provide structured metadata about a Web page. They are part of a web page's head section. Multiple Meta elements with different attributes can be used on the same page. Meta elements can be used to specify page description, keywords and any other metadata not provided through the other head elements and attributes.

An HTML element is a type of HTML document component, one of several types of HTML nodes. The first used version of HTML was written by Tim Berners-Lee in 1993 and there have since been many versions of HTML. The current de facto standard is governed by the industry group WHATWG and is known as the HTML Living Standard.

A query string is a part of a uniform resource locator (URL) that assigns values to specified parameters. A query string commonly includes fields added to a base URL by a Web browser or other client application, for example as part of an HTML document, choosing the appearance of a page, or jumping to positions in multimedia content.

A framekiller is a technique used by websites and web applications to prevent their web pages from being displayed within a frame. A frame is a subdivision of a Web browser window and can act like a smaller window. A framekiller is usually used to prevent a website from being loaded from within a frameset without permission or as an attack, as with clickjacking.

A table cell is one grouping within a chart table used for storing information or data. Cells are grouped horizontally and vertically. Each cell contains information relating to the combination of the row and column headings it is collinear with. In software design, table cells are a key component in HTML and webpage building, and it is part of the <table> component. A coder may specify dimensions for a table cell, and use them to hold sections of webpages.

In the context of a web browser, a frame is a part of a web page or browser window which displays content independent of its container, with the ability to load content independently. The HTML or media elements in a frame may come from a web site distinct from the site providing the enclosing content. This practice, known as framing, is today often regarded as a violation of same-origin policy.

In computer hypertext, a URI fragment is a string of characters that refers to a resource that is subordinate to another, primary resource. The primary resource is identified by a Uniform Resource Identifier (URI), and the fragment identifier points to the subordinate resource.

<span class="mw-page-title-main">Online rich-text editor</span> Online interface for editing rich text

An online rich-text editor is the interface for editing rich text within web browsers, which presents the user with a "what-you-see-is-what-you-get" (WYSIWYG) editing area. The aim is to reduce the effort for users trying to express their formatting directly as valid HTML markup.

In HTML, <div> and <span> tags are elements used to define parts of a document, so that they are identifiable when a unique classification is necessary. Where other HTML elements such as <p> (paragraph), <em> (emphasis), and so on, accurately represent the semantics of the content, the additional use of <span> and <div> tags leads to better accessibility for readers and easier maintainability for authors. Where no existing HTML element is applicable, <span> and <div> can valuably represent parts of a document so that HTML attributes such as class, id, lang, or dir can be applied.

In HTML and XHTML, the blockquote element defines "a section [within a document] that is quoted from another source". The syntax is

A webform, web form or HTML form on a web page allows a user to enter data that is sent to a server for processing. Forms can resemble paper or database forms because web users fill out the forms using checkboxes, radio buttons, or text fields. For example, forms can be used to enter shipping or credit card data to order a product, or can be used to retrieve search results from a search engine.

In the Java computer programming language, an annotation is a form of syntactic metadata that can be added to Java source code. Classes, methods, variables, parameters and Java packages may be annotated. Like Javadoc tags, Java annotations can be read from source files. Unlike Javadoc tags, Java annotations can also be embedded in and read from Java class files generated by the Java compiler. This allows annotations to be retained by the Java virtual machine at run-time and read via reflection. It is possible to create meta-annotations out of the existing ones in Java.

<span class="mw-page-title-main">Attribute (computing)</span> Metadata which defines a property

In computing, an attribute is a specification that defines a property of an object, element, or file. It may also refer to or set the specific value for a given instance of such. For clarity, attributes should more correctly be considered metadata. An attribute is frequently and generally a property of a property. However, in actual usage, the term attribute can and is often treated as equivalent to a property depending on the technology being discussed. An attribute of an object usually consists of a name and a value. For an element these can be a type and class name, while for a file these can be a name and an extension, respectively.

Lazy loading is a technique commonly used in computer programming and mostly in web design and web development to defer initialization of an object until the point at which it is needed. It can contribute to efficiency in the program's operation if properly and appropriately used. This makes it ideal in use cases where network content is accessed and initialization times are to be kept at a minimum, such as in the case of web pages. For example, deferring loading of images on a web page until they are needed for viewing can make the initial display of the web page faster. The opposite of lazy loading is eager loading.

Extensible HyperText Markup Language (XHTML) is part of the family of XML markup languages which mirrors or extends versions of the widely used HyperText Markup Language (HTML), the language in which Web pages are formulated.

<span class="mw-page-title-main">CSS</span> Style sheet language

Cascading Style Sheets (CSS) is a style sheet language used for specifying the presentation and styling of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

XFrames is an XML format for combining and organizing web based documents together on a single webpage through the use of frames. Similarly to HTML Frames, XFrames can be made useful through its power to create a content frame that is scrollable while other frames - such as sidebar menus, the header and footer remain in place on the page. XFrames will be particularly useful to web developers who will be able to modify a single document and have that modification appear on all pages that contain the document within a frame.

Thymeleaf is a Java XML/XHTML/HTML5 template engine that can work both in web (servlet-based) and non-web environments. It is better suited for serving XHTML/HTML5 at the view layer of MVC-based web applications, but it can process any XML file even in offline environments. It provides full Spring Framework integration.

References

[19] [20]

  1. "Index of the HTML 4 Attributes". W3C. Retrieved 13 February 2015.
  2. "On SGML and HTML". World Wide Web Consortium. Retrieved November 16, 2008.
  3. "XHTML 1.0 – Differences with HTML 4". World Wide Web Consortium. Retrieved November 16, 2008.
  4. Korpela, Jukka (July 6, 1998). "Why attribute values should always be quoted in HTML". Cs.tut.fi. Retrieved November 16, 2008.
  5. "Tags used in HTML". World Wide Web Consortium. November 3, 1992. Retrieved November 16, 2008.
  6. "Objects, Images, and Applets in HTML documents". World Wide Web Consortium. December 24, 1999. Retrieved November 16, 2008.
  7. However, multiple identifiers may apply to the same element; in particular an element may be inside another element, each having an identifier.
  8. "HTML id". W3Schools. Archived from the original on Apr 27, 2020. Retrieved 2020-04-27.
  9. "HTML Global id Attribute". W3Schools. Retrieved 2020-04-27.
  10. "HTML Classes". W3Schools. Retrieved 2020-04-27.
  11. "HTML Global class Attribute". W3Schools. Retrieved 2020-04-27.
  12. "HTML Styles". W3Schools. Retrieved 2023-05-12.
  13. "HTML Global style Attribute". W3Schools. Retrieved 2023-05-12.
  14. "CSS Syntax". W3Schools. Retrieved 2023-05-12.
  15. "HTML Global Attributes". W3Schools.
  16. "HTML Event Attributes". W3Schools.
  17. 1 2 3 "Global attributes – HTML (HyperText Markup Language)". MDN Web Docs. Retrieved 2015-02-12.
  18. "HTML reference – HTML (HyperText Markup Language)". MDN Web Docs. Retrieved 13 February 2015.
  19. accept retrieved 28-11-2018
  20. src simmons university