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
The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link
goes to:
Example
<a href="https://www.w3schools.com">Visit W3Schools</a>
You will learn more about links in our HTML Links chapter.
The src Attribute
The <img> tag is used to embed an image in an HTML page. The src attribute specifies the
path to the image to be displayed:
Example
<img src="img_girl.jpg">
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="img_girl.jpg". If the URL begins with a slash, it will be relative
to the domain. Example: src="/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 <img> tag should also contain the width and height attributes, which specify the width
and height of the image (in pixels):
Example
<img src="img_girl.jpg" width="500" height="600">
The alt Attribute
The required alt attribute for the <img> 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
<img src="img_girl.jpg" alt="Girl with a jacket">
Example
See what happens if we try to display an image that does not exist:
<img src="img_typo.jpg" alt="Girl with a jacket">
The style Attribute
The style attribute is used to add styles to an element, such as color, font, size, and more.
Example
<p style="color:red;">This is a red paragraph.</p>
You will learn more about styles in our HTML Styles chapter.
The lang Attribute
You should always include the lang attribute inside the <html> 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:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
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:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
ISO 639-1 Language Codes
ISO 639-1 defines abbreviations for languages:
Language ISO Code
Abkhazian ab
Afar aa
Afrikaans af
Akan ak
Albanian sq
Amharic am
Arabic ar
Aragonese an
Armenian hy
Assamese as
Avaric av
Avestan ae
Aymara ay
Azerbaijani az
Bambara bm
Bashkir ba
Basque eu
Belarusian be
Bengali (Bangla) bn
Bihari bh
Bislama bi
Bosnian bs
Breton br
Bulgarian bg
Burmese my
Catalan ca
Chamorro ch
Chechen ce
Chichewa, Chewa, Nyanja ny
Chinese zh
Chinese (Simplified) zh-Hans
Chinese (Traditional) zh-Hant
Chuvash cv
Cornish kw
Corsican co
Cree cr
Croatian hr
Czech cs
Danish da
Divehi, Dhivehi, Maldivian dv
Dutch nl
Dzongkha dz
English en
Esperanto eo
Estonian et
Ewe ee
Faroese fo
Fijian fj
Finnish fi
French fr
Fula, Fulah, Pulaar, Pular ff
Galician gl
Gaelic (Scottish) gd
Gaelic (Manx) gv
Georgian ka
German de
Greek el
Greenlandic kl
Guarani gn
Gujarati gu
Haitian Creole ht
Hausa ha
Hebrew he
Herero hz
Hindi hi
Hiri Motu ho
Hungarian hu
Icelandic is
Ido io
Igbo ig
Indonesian id, in
Interlingua ia
Interlingue ie
Inuktitut iu
Inupiak ik
Irish ga
Italian it
Japanese ja
Javanese jv
Kalaallisut, Greenlandic kl
Kannada kn
Kanuri kr
Kashmiri ks
Kazakh kk
Khmer km
Kikuyu ki
Kinyarwanda (Rwanda) rw
Kirundi rn
Kyrgyz ky
Komi kv
Kongo kg
Korean ko
Kurdish ku
Kwanyama kj
Lao lo
Latin la
Latvian (Lettish) lv
Limburgish ( Limburger) li
Lingala ln
Lithuanian lt
Luga-Katanga lu
Luganda, Ganda lg
Luxembourgish lb
Manx gv
Macedonian mk
Malagasy mg
Malay ms
Malayalam ml
Maltese mt
Maori mi
Marathi mr
Marshallese mh
Moldavian mo
Mongolian mn
Nauru na
Navajo nv
Ndonga ng
Northern Ndebele nd
Nepali ne
Norwegian no
Norwegian bokmål nb
Norwegian nynorsk nn
Nuosu ii
Occitan oc
Ojibwe oj
Old Church Slavonic, Old Bulgarian cu
Oriya or
Oromo (Afaan Oromo) om
Ossetian os
Pāli pi
Pashto, Pushto ps
Persian (Farsi) fa
Polish pl
Portuguese pt
Punjabi (Eastern) pa
Quechua qu
Romansh rm
Romanian ro
Russian ru
Sami se
Samoan sm
Sango sg
Sanskrit sa
Serbian sr
Serbo-Croatian sh
Sesotho st
Setswana tn
Shona sn
Sichuan Yi ii
Sindhi sd
Sinhalese si
Siswati ss
Slovak sk
Slovenian sl
Somali so
Southern Ndebele nr
Spanish es
Sundanese su
Swahili (Kiswahili) sw
Swati ss
Swedish sv
Tagalog tl
Tahitian ty
Tajik tg
Tamil ta
Tatar tt
Telugu te
Thai th
Tibetan bo
Tigrinya ti
Tonga to
Tsonga ts
Turkish tr
Turkmen tk
Twi tw
Uyghur ug
Ukrainian uk
Urdu ur
Uzbek uz
Venda ve
Vietnamese vi
Volapük vo
Wallon wa
Welsh cy
Wolof wo
Western Frisian fy
Xhosa xh
Yiddish yi, ji
Yoruba yo
Zhuang, Chuang za
Zulu zu
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
<p title="I'm a tooltip">This is a paragraph.</p>
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.
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:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
Bad:
<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>
Sometimes you have to use quotes. This example will not display the title attribute correctly,
because it contains a space:
Example
<p title=About W3Schools>
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:
<p title='John "ShotGun" Nelson'>
Or vice versa:
<p title="John 'ShotGun' Nelson">
HTML Headings
HTML headings are titles or subtitles that you want to display on a
webpage.
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least
important heading.
Example
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Example
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Bigger Headings
Each HTML heading has a default size. However, you can specify the size
for any heading with the style attribute, using the CSS font-
size property:
Example
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:60px;">Heading 1</h1>
<p>You can change the size of a heading with the style
attribute, using the font-size property.</p>
</body>
</html>
HTML Display
You cannot be sure how HTML will be displayed.
Large or small screens, and resized windows will create different results.
With HTML, you cannot change the display by adding extra spaces or
extra lines in your HTML code.
The browser will automatically remove any extra spaces and lines when
the page is displayed:
<!DOCTYPE html>
<html>
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
<p>
The number of lines in a paragraph depends on the size of the
browser window. If you resize the browser window, the number
of lines in this paragraph will change.
</p>
</body>
</html>
HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML page, and is most often
displayed as a horizontal rule.
The <hr> element is used to separate content (or define a change) in an
HTML page:
Example
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
</body>
</html>
Note:
The <hr> tag is an empty tag, which means that it has no end tag.
HTML Line Breaks
The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new
paragraph:
Example
<!DOCTYPE html>
<html>
<body>
<p>This is<br>a paragraph<br>with line breaks.</p>
</body>
</html>
The Poem Problem
This poem will display on a single line:
<!DOCTYPE html>
<html>
<body>
<p>In HTML, spaces and new lines are ignored:</p>
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
</body>
</html>
Solution - The HTML <pre> Element
The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-width font (usually
Courier), and it preserves both spaces and line breaks:
<!DOCTYPE html>
<html>
<body>
<p>The pre tag preserves both spaces and line breaks:</p>
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
</body>
</html>
HTML Styles
The HTML style attribute is used to add styles to an element, such as
color, font, size, and more.
Example
I am Red
I am Blue
I am Big
<!DOCTYPE html>
<html>
<body>
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>
</body>
</html>
The HTML Style Attribute
Setting the style of an HTML element, can be done with the style attribute.
The HTML style attribute has the following syntax:
<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.
Background Color
The CSS background-color property defines the background color for an HTML
element.
Example
Set the background color for a page to powderblue:
<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Text Color
The CSS color property defines the text color for an HTML element:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Fonts
The CSS font-family property defines the font to be used for an HTML
element:
Example
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
</body>
</html>
