# Attributes **ALSO SEE:** [[element]] ## [[HTML]] used to provide additional information about HTML elements always specified in the start tag usually has a name/value pair like **name="value"** - recommended to have values in quotes, but typically not required unless using stricter document types like XHTML - can use single `' '` or double quotes `" "`. if the value contains one type of quotes then use the other type ### Global attributes can be applied to any element [more info on W3 Schools](https://www.w3schools.com/tags/ref_standardattributes.asp) - [[#`accesskey`]] - [[#`class`]] - [[#`contenteditable`]] - [[#`data-*`]] - [[#`dir`]] - [[#`draggable`]] - [[#`enterkeyhint`]] - [[#`hidden`]] - [[#`id`]] - [[#`inert`]] - [[#`inputmode`]] - [[#`lang`]] - [[#`popover`]] - [[#`spellcheck`]] - [[#`style`]] - [[#`tabindex`]] - [[#`title`]] - [[#`translate`]] ### Attribute Details ###### `accesskey` - global attribute ###### `alt` - used in [[element#`<img>`|images]] - specifies alternate text for an image, if the image cannot be displayed for any reason - required ###### `class` - global attribute ###### `contenteditable` - global attribute ###### `cite` - used in [[element#`<blockquote>`|block quotes]] - example: `<blockquote cite="http://www.worldwildlife.org/who/index.html">` ##### `data-*` ###### `dir` ###### `draggable` ###### `enterkeyhint` ###### `hidden` ###### `height` - used in [[element#`<img>`|images]] - specifies height in pixels - example: `<img src="img_girl.jpg" width="500" height="600">` ###### `href` - used in [[element#`<a>`|links]] - specifies the URL of the page the link goes to - example: `<a href="https://www.w3schools.com">This is a link</a>` ###### `id` ###### `inert` ###### `inputmode` ###### `lang` - specifies the language of the element's content - should be included in the [[element#`<html>`|<html> tag]] - `<`_element_ `lang="`_language code_`">` - `en` for English - `es` for Spanish - `fr` for French - Country codes can be added to the language code such that the first 2 characters define the language and the last two characters define the country. - Ex. `<html lang="en-US">` - [language code reference on W3 Schools](https://www.w3schools.com/tags/ref_language_codes.asp) - [lang attribute reference on W3 Schools](https://www.w3schools.com/tags/att_global_lang.asp) ###### `popover` ###### `spellcheck` ###### `style` - adds styles to an element such as color, font, size, etc. - syntax: - `<` *tagname* `style="` *property:value;* `">` - where the property and value are [[CSS]] - examples: ```html <p style="color:red;">This is a red paragraph.</p> <h1 style="border:2px solid Tomato;">Hello World</h1> <h1 style="background-color:rgb(255, 99, 71);">...</h1> <h1 style="background-color:#ff6347;">...</h1> <h1 style="background-color:hsl(9, 100%, 64%);">...</h1> <h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1> ``` - ` ###### `src` - used to embed an [[element#`<img>`|images]] - specifies the path to the image to be displayed, using either absolute url or relativel url - relative url: - If the URL begins without a slash, it will be relative to the current page. Example: `src="img_girl.jpg"`. If the URL begins with a slash, it will be relative to the domain. Example: `src="/images/img_girl.jpg"`. - Example: `<img src="img_girl.jpg">` ###### `tabindex` ###### `target` - used to specify what window a [[element#`<a>`|link]] opens in, possible values are: - `_self` - Default. Opens the document in the same window/tab as it was clicked - `_blank` - Opens the document in a new window or tab - `_parent` - Opens the document in the parent frame - `_top` - Opens the document in the full body of the window - Example: `<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>` ###### `title` - global attribute - defines extra info about an element - will be displayed as a tooltip when you mouse over the element - Ex. `<p title="I'm a tooltip">This is a paragraph.</p>` [link](https://www.w3schools.com/html/tryit.asp?filename=tryhtml_attributes_title) ###### `translate` ###### `width` - used in [[element#`<img>`|images]] - specifies width in pixels - example: `<img src="img_girl.jpg" width="500" height="600">` ###### `xmins` - if you need your content to conform to XHTML - [attribute reference on W3 Schools](https://www.w3schools.com/tags/att_html_xmlns.asp) ### Also See [[element]] - [[element#`<img>`|images]] - [[element#`<a>`|links]]