Attributes are values that can be added to tags. Attributes are sometimes referred to as properties. They are optional in some tags and required in others. When tags include attributes, the attributes are listed in the starting tag and must be inside the brackets with the tag name. All coding should be contained within < >. You will be using attributes in some of the tags you create this week. In container tags the attributes are only added to the start tag. The end tag will always remain the same. To create an html tag that includes attributes:
Example of tag without attributes: <h3>Text for the heading</h3>
Example of tag with attribute: <h3 align="right">Text for the heading</h3>
Note the syntax of adding an attribute to code. The format for adding an attribute to any tag is:
<tag attribute="value">Content for element</tag>
Look at the following examples of code with attributes. Being unfamiliar with the tags/attributes/values used in these codes doesn't matter. The important thing to notice is how the code is constructed. They all follow the same format. If you learn this format, you can use a reference like W3Schools to use attributes with any tag that is in the reference.
Examples:
Add an attribute to the level 1 heading tag for making the content of the heading display right-aligned on the page:
<h1 align="right">Text for Heading</h1>
Add an attribute to the level 2 heading tag for making the content of the heading display centered on the page:
<h2 align="center">Text for Heading</h2>
Add an attribute to a paragraph to make the text of the paragraph justified.
<p align="justify">Content for paragraph.</p>
Add an attribute to a table to make the width of the table 80%.
<table width="80%">content for table</table>
Add an attribute to a bulleted list to make the bullets display as squares.
<ul type="square">content for list</ul>
In all of the above examples, you should be able to identify the tag name, the attribute name and the value.
<h1 align="right">Text for Heading</h1>
tag name: h1
attribute name: align
value: right
<h2 align="center">Text for Heading</h2>
tag name: h2
attribute name: align
value: center
<p align="justify">Content for paragraph.</p>
tag name: p
attribute name: align
value: justify
<table width="80%">content for table</table>
tag name: table
attribute name: width
value: 80%
<ul type="square">content for list</ul>
tag name: ul
attribute name: type
value: square
You should notice that all of the above examples follow the same format:
<tag attribute name="value">Content</tag>
If you add more than one attribute="value" pair to a tag, you should leave a space between the attribute="value" pairs to make code easier to read, troubleshoot and edit. (If the tag is an empty tag, be sure to include the space and slash before the right bracket.)
Examples of tags with two attributes:
Add the width attribute to a horizontal rule to make it display across 65% of the screen. Also increase the size of the horizontal rule to a size of 4 pixels.
<hr width="65%" size="4" />
tag name: hr
attributes: width and size
values: "65%" and "4"
Create a horizontal rule with a size of 6 and a value of noshade for the noshade attribute. This is a strange one because the value of the attribute is the same as the name of the attribute.
<hr size="6" noshade="noshade" />
tag name: hr
attribute names: size and noshade
values: "6" and "noshade"
Add a meta tag that gives the attributes to set the character encoding for the page:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
tag name: meta
attribute names: http-equiv and content
values: "Content-Type" and "text/html; charset=windows-1252"
Add the namespace attribute to the opening <html> tag:
<html xmlns="http://www.w3.org/1999/xhtml">
tag name: html
attribute name: xmlns
value: "http://www.w3.org/1999/xhtml"
It is important to know how to use a reference like the W3Schools website as a reference tool when learning how to do coding.
<p>A paragraph with code like this will be left-aligned because no attribute is given. If no attribute is used, the browser will display paragraphs left-aligned by default.</p>
<p align="left">A paragraph with code like this will be left-aligned too.</p>
<p align="right">A paragraph with code like this will be right-aligned in the browser.</p>
<p align="center">A paragraph with code like this will be centered on the page.</p>
<p align="justify">When paragraphs are long enough to use word wrap to display continuous lines, the justify attribute will make the right margin display evenly much like the lines of text in columns of a newspaper or in a book.</p>
Use the XHTML Tag Reference List to explore optional attributes that can be used with tags used in this project:
<body>, <p>, <h3>, <hr>, <br>