HTML Attributes

When a browser displays a web page to us, it reads the tags and decides how to display each element of the page. We can add extra information or instructions in the tags for browsers to follow. These extra pieces of information/instructions are called attributes. They could include formatting information about how that element should look (colour, fonts, size etc.) or even behaviors that element should have (such as hyperlinks).

Attributes are always specified in the start tag.

All HTML elements can have attributes, however some elements require attributes, for example the hyperlinks.

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

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

Without the href attribute the browser would not know what web address the link should go to.

The target attribute tells the browser if it should open a new tab or use the same one.


Attributes can be used to add formatting to other elements. For example, if we want to change the text colour of a paragraph we can use the style attribute and set the colour (note the american spelling):


<p style="color:red">This is red paragraph text.</p>

<p style="color:blue">This is blue paragraph text.</p>

Challenge

Create a new file in your text editor. Save the document as “attributes.html”

Add the <html>, <head>, <title> and <body> tags in the correct places.

Set the content of the title element to “Tags and Attributes”

Copy and paste the following text as the element content for the <body> tags:

HTML Tags and Attributes

Standards

Tags are used to provide structure to a webpage. The tags identify different elements of a page. There is normally a start and end tag for each element.


The browser will look at the tag and decide for itself how to format that element in the browser. In the early days of the World Wide Web, different browsers used different formatting from each other, so you would never know what your page might look like. However eventually an agreed set of standards was developed. You can learn about these standards on the W3C website.


Attributes

Attributes provide extra information about elements, such as the href attribute in hyperlinks. They can also tell the web browser how to format an element using the style attribute. For example this paragraph was made blue using an attribute added to the paragraph element.


You can find out more about attributes on the W3Schools website.

Then:

  • Add <h1>, <h2> and <p> tags around the correct text on the page (use the diagram below to help you).

  • Find the text “W3C website” and turn it into a hyperlink to https://www.w3.org

  • Find the text “W3Schools website” and turn it into a hyperlink to https://www.w3schools.com/html/html_attributes.asp

  • Set the style of the third paragraph so that the text is blue.