Attributes

Attributes provide additional information about elements. All HTML elements can have one or more attributes.

Attribute Syntax

Attributes are listed inside the opening tag of an element. They are not case-sensitive, but it is conventional to use lowercase.

<tag attribute="value">content</tag>

The value of attributes can be wrapped in single or double quotes. Both work as long as they are not mismatched.

<h2 class="subheading">Subheading 1</h2>
<h2 class='subheading'>Subheading 2</h2>

<h2 class='subheading">Subheading 1</h2>

Multiple attributes are separated by a space.

<p class="body-paragraph" id="paragraph-1a">The mitochondria is the powerhouse of the cell.</p>

Global Attributes

Global attributes are HTML attributes that can go in every HTML element. While, most normal attributes can only go in a select few elements. There are many global attributes, but the two most important ones are class and id.

Class Attribute

The class attribute adds one or more classes to an HTML element. Classes are used to group similar elements, which is useful with CSS and JavaScript.

<div class="city">
    <h2>London</h2>
    <p>London is the capital of England.</p>
</div> 

<div class="city">
    <h2>Paris</h2>
    <p>Paris is the capital of France.</p>
</div>

<div class="city">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan.</p>
</div>

Multiple classes are separated by a space.

<h2 class="highlighted">This is a highlighted heading</h2>
<p class="body-paragraph">This is a regular body paragraph.</p>
<p class="body-paragraph highlighted">This is a highlighted body paragraph.</p>

ID Attribute

The id attribute adds a single ID to an HTML element. IDs are unique and are used to identify one single element on a page. There cannot be multiple elements with the same ID on a page.

<h1 id="page-header">Welcome to my Website!</h1>

Anchor Element

The anchor element (<a>) is used to create links on your website. Any text within the <a> will become a link.

<a href="https://google.com">Click here to go to Google!</a>

The href attribute controls where the link leads to. By default, the link opens in the current window, but this can be changed by setting the target attribute to "_blank".

<a href="https://google.com" target="_blank">Click here to go to Google!</a>

There are four values for the target attribute. But, you only really need to know _self and _blank. Yon can check them out on MDN web docs.

<a href="https://google.com" target="_self">Self</a>
<a href="https://google.com" target="_blank">Blank</a>
<a href="https://google.com" target="_parent">Parent</a>
<a href="https://google.com" target="_top">Top</a>

Anchor elements can also link to different elements within the webpage using the id attribute. For example, this section has an id attribute of anchor_element.

<a href="#anchor_element">Go to Anchor Element</a>

Empty Elements (Self-closing Tags)

There is one other type of element in HTML: empty elements. Empty elements are a type of element that do not have contents. Their syntax consists of a single self-closing tag.

<tag>

That's it. Just one self-closing tag. An empty element can still have attributes inside of this tag. Sometimes an optional forward slash will be put at the end of the tag as well.

<tag/>

Line Break Element

The line break element (<br/>) is one way to insert empty lines in a webpage. It is an empty element, since it doesn't make sense for a line break to have content.

<p>Hello<br/>Hello Again!</p>

Image Element

The image element (<img/>) is used for inserting images into a webpage. It is also an empty element, since it wouldn't make sense for an image to have text on top of it.

The image address is specified using the <src> attribute. The image can be either an online address or a file on your computer.

<img src="banana.jpg" />

You can also specify the size of the image using the width and height attributes

<img src="banana.jpg" width="400"/><br/>
<img src="banana.jpg" height="20"/><br/>
<img src="banana.jpg" width="400" height="20"/><br/>

Another useful attribute you can use is the alt attribute. The alt attribute provides a description in case the image cannot be seen (wrong address, corrupt file, screen reader).

<img src="banan.jpg" alt="a banana"/>

Boolean Attributes

There is one other type of HTML attribute: the boolean attribute. The boolean attribute does not have a value. It is either present or it is not.

<tag attribute></tag>
<tag attribute/>

Video Element

The video element is used to insert... videos onto a webpage. Video elements have many boolean attributes. They also support multiple sources, in case one source fails to load.

<video controls loop muted width="250">
    <source src="flower.webm" type="video/webm">
    <source src="flower.mp4" type="video/mp4">
    Sorry, your browser doesn't support embedded videos.
</video>

Sources are empty elements within the video element that specify a source and a file type. If all sources fail to load, the text inside the video element will be displayed instead.

Audio Element

Audio elements work similarly to video elements. They have many of the same attributes and can have multiple sources.

<audio controls>
    <source src="t-rex-roar.mp3" type="audio/mp3"/>
    Your browser does not support the <code>audio</code> element.
</audio>

Downloads