(click anywhere to close)
OPEN MENU

[HTML5] Attributes

category: Website | course: HTML5 | difficulty:
IN PRINT
QUICK CONTENTS:Intro
1. Standard (“Glo...

Every HTML element can have attributes. They provide additional information about an element, and are often necessary in self-closing tags. Attributes are always specified in the start tag, and follow the pattern of attribute=”value”.

HTMLAttributes

Attributes need to be lowercase, but you can use single or double quotes for the value.

Example: Hover over this piece of text to see the title (tooltip) attribute in action

Standard (“Global”) Attributes

The attributes presented in the table below are automatically available for every element. Pay special attention to the class and id attributes, as you'll need them a lot as you continue. You can forget the others for now.

Attribute

Values

Description

accesskey

Character

Specifies a key combination that can be used to access a certain element

class & id

Anything

Specify a class or ID name for an element so that we can access it via other languages.

contenteditable

true | false

Makes an element editable

data-*

Anything

Used to create your own attributes, again so that we can use other languages with our HTML

dir

ltr | rtl

Specifies the direction of the text; left to right or right to left.

hidden

hidden

Hides an element completely, but keeps its children accessible.

lang

Language

Specifies the language of the element

spellcheck

true | false

Enables spell checking on the element. The element needs to be editable to use this.

tabindex

Number

Specifies the order of the elements if the user presses tab

title

Anything

If the user hovers over the element for about a second, this title will appear next to the cursor (it could be called a built-in tooltip)

<!-- Specifies the language used within the element, and we add our own invented attribute we could use later on when styling or scripting the element -->
<p lang="en-UK" data-something="paragraph1">This is some English text!</p>

 

As you can see, the hidden attribute has only one value. This simply means that you use hidden=”hidden” if you want to hide something, and don’t use this attribute at all otherwise. Elements are visible by default (which is only logical), so hiding them should be something special.

These types of attributes are said to be minimized, and an alternative syntax for them is to only use the attribute name, without any value. This isn’t fully supported though, so I don’t recommend using that form, unless you really want your code to be as small and clean as possible.

Furthermore, it’s unwise to use the lang attribute on every element. Usually it is set once in the html tag: <html lang=”en-US”>.

Most of these aren’t very important though, for most standard tags in HTML are without any of these attributes. But, self-closing tags don’t have content, which means they rely on attributes to fill in the gaps. The same used to be true for some elements like tables (you can set the width and height as attributes), but as I said earlier: it’s recommended to keep style and design separate from the mark up. You’ll see these important attributes later on when I talk about the specific tag they belong to.

Now we can finally start learning all the actual tags and elements!

CONTINUE WITH THIS COURSE
Test your knowledge with the quiz!
How do you hide an element?
A
Use the minimized hidden attribute
B
Use name="value"
C
Use the title attribute
Do you like my tutorials?
To keep this site running, donate some motivational food!
Crisps
(€2.00)
Chocolate Milk
(€3.50)
Pizza
(€5.00)