HTML Attributes






<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]
-->



HTML Attributes



❮ Previous
Next ❯


Attributes provide additional information about HTML elements.



HTML Attributes



  • All HTML elements can have attributes

  • Attributes provide additional information about an element

  • Attributes are always specified in the start tag

  • Attributes usually come in name/value pairs like: name="value"



The href Attribute


HTML links are defined with the <a> tag. The link address is specified in the href attribute:



Example



<a href="https://www.w3schools.com">This is a link</a>

Try it Yourself »

You will learn more about links and the <a> tag later in this tutorial.



The src Attribute


HTML images are defined with the <img> tag.


The filename of the image source is specified in the src attribute:



Example



<img src="img_girl.jpg">

Try it Yourself »


The width and height Attributes


Images in HTML have a set of size attributes, which specifies the width and
height of the image:



Example



<img src="img_girl.jpg" width="500" height="600">

Try it Yourself »

The image size is specified in pixels: width="500" means 500 pixels wide.


You will learn more about images in our HTML Images
chapter.



The alt Attribute


The alt attribute specifies an alternative text to be used, when an
image cannot be displayed.


The value of the attribute can be read by screen readers. This way, someone "listening"
to the webpage, e.g. a blind person, can "hear" the element.



Example



<img src="img_girl.jpg" alt="Girl
with a jacket">

Try it Yourself »



The alt attribute is also useful if the image does not exist:




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">

Try it Yourself »





<!--
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]
-->




The style Attribute


The style attribute is used to specify the styling of an element, like color,
font, size etc.



Example



<p style="color:red">I am a paragraph</p>

Try it Yourself »


You will learn more about styling later in this tutorial, and in our
CSS Tutorial.




The lang Attribute


The language of the document can be declared in the <html> tag.


The language is declared with the lang attribute.


Declaring a language is important for accessibility applications (screen readers) and search engines:




<!DOCTYPE html>
<html lang="en-US">
<body>

...

</body>
</html>


The first two letters specify the language (en). If there is a dialect, use two more letters (US).



The title Attribute


Here, a title attribute is added to the <p>
element.
The value of the title attribute will be displayed as a tooltip when
you mouse over the paragraph:



Example



<p title="I'm a tooltip">
This is a paragraph.
</p>

Try it Yourself »


We Suggest: Use Lowercase Attributes


The HTML5 standard does not require lowercase attribute names.


The title attribute can be written with uppercase or lowercase
like title or TITLE.


W3C recommends lowercase in HTML, and demands
lowercase for stricter document types like XHTML.



At W3Schools we always use lowercase attribute names.




We Suggest: Quote Attribute Values


The HTML5 standard does not require quotes around attribute values.


The href attribute, demonstrated above, can be written without quotes:







Bad



<a
href=https://www.w3schools.com>

Try it Yourself »





Good



<a href="https://www.w3schools.com">

Try it Yourself »





W3C recommends quotes in HTML, and demands quotes for stricter document types like XHTML.


Sometimes it is necessary to use quotes. This example will not display
the title attribute correctly, because it contains a space:



Example



<p
title=About W3Schools>

Try it Yourself »


Using quotes are the most common. Omitting quotes can produce errors.

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">

Try it Yourself »


Chapter Summary



  • All HTML elements can have attributes

  • The title attribute provides additional "tool-tip" information

  • The href attribute provides address information for links

  • The width and height attributes provide size information for images

  • The alt attribute provides text for screen readers

  • At W3Schools we always use lowercase attribute names

  • At W3Schools we always quote attribute values with double quotes



Test Yourself with Exercises!



Exercise 1 »
Exercise 2 »
Exercise 3 »
Exercise 4 »
Exercise 5 »



HTML Attributes


Below is an alphabetical list of some attributes often used in HTML:



































AttributeDescription
altSpecifies an alternative text for an image, when the image cannot be
displayed
disabledSpecifies that an input element should be disabled
hrefSpecifies the URL (web address) for a link
idSpecifies a unique id for an element
srcSpecifies the URL (web address) for an image
styleSpecifies an inline CSS style for an element
titleSpecifies extra information about an element (displayed as a tool tip)


A complete list of all attributes for each HTML element, is listed in our:
HTML Attribute Reference.






❮ Previous
Next ❯

-

Popular posts from this blog

HTML5 Browser Support

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> HTML5 Browser Support ❮ Previous Next ❯ You can teach older browsers to handle HTML5 correctly. HTML5 Browser Support HTML5 is supported in all modern browsers. In addition, all browsers, old and new, automatically handle unrecognized elements as inline elements. Because of this, you can "teach" older browsers to handle "unknown" HTML elements. You can even teach IE6 (Windows XP 2001) how to handle unknown HTML elements. Define Semantic Elements as Block Elements HTML5 defines eight new semantic elements. All these are block-level elements. To secure correct behavior in older browsers, you can set the CSS display property for these HTML elements to block : header, section, footer, aside, nav, main, article, figure {     display: block; } Add New Elements to HTML You can also add new elements to an HTML page with a browser trick. This example adds a ne...
Read more

CSS Box Sizing

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> CSS Box Sizing ❮ Previous Next ❯ CSS Box Sizing The CSS box-sizing property allows us to include the padding and border in an element's total width and height. Without the CSS box-sizing Property By default, the width and height of an element is calculated like this: width + padding + border = actual width of an element height + padding + border = actual height of an element This means: When you set the width/height of an element, the element often appear bigger than you have set (because the element's border and padding are added to the element's specified width/height). The following illustration shows two <div> elements with the same specified width and height: This div is smaller (width is 300px and height is 100px). This div is bigger (width is also 300px and height is 100px). The two <div> elements above end up with different sizes in the re...
Read more

SVG Filters

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> SVG Filters ❮ Previous Next ❯ SVG Filters SVG Filters are used to add special effects to SVG graphics. Browser Support The numbers in the table specify the first browser version that supports SVG filters.   SVG Filters 8.0 10.0 3.0 6.0 9.6 SVG Filter Elements In the next chapters, we will only demonstrate a touch of the filter effects that are possible - and give you an idea of what can be done with SVG. The available filter elements in SVG are: <feBlend> - filter for combining images <feColorMatrix> - filter for color transforms <feComponentTransfer> <feComposite> <feConvolveMatrix> <feDiffuseLighting> <feDisplacementMap> <feFlood> <feGaussianBlur> <feImage> <feMerge> <feMorphology> <feOffset> - filter for drop sh...
Read more