Aug
8
2011

Lesson 2 – Tags, Attributes and Elements

Tags

HTML is made up of opening tags and closing tags. Opening tags start with a less than sign (<) and end with a greater than sign (>).  An example of a opening tag is <html>.

Every opening tag must be accompanied by a closing tag which is the same as the opening except for a foward slash (/) character after the greater than sign.  An example of a closing tag is </html>.

The opening and closing tags are containers for other tags that go inside of them.  When tags are contained within other tags, it is referred to as nesting.

Sometimes you will write tags that do not contain other tags.  For instance, the line break tag does not contain other tags.  It simply tells the browser whatever follows needs to go on the next line.  The tag is written as:

Notice it’s written the same as an opening tag except for a space and a forward slash character after the tag name.

Attributes

Attributes are additional properties you give tags that give it more functionality. Attributes are added to the opening tags.

<a href="http://www.johnschilling.com">Link to my website</a>

An href attribute given to an <a> tag, or anchor tag, which defines where the link is supposed to redirect you to after it is clicked.

A popular attribute is the id attribute.  The id attribute is added to tags to specify a unique name which it can be referenced by..

<a href="http://www.johnschilling.com" id="mylink">Link to my website</a>

It is good practice to define attributes in lowercase as shown above.  Also note the double quotes on either side of the value.

Elements

Elements are pieces of the overrall page.  Typically elements are everything in between and including an opening tag and it’s corresponding closing tag.

<html>
<head>
    <title>Sample Title</title>
</head>
<body>
    Sample Page
</body>
</html>

For instance, everything between <body> and </body> including the tags is considered the body element. The title of a page is defined something similar to:

<title>Sample Title</title>

The code above would be considered the title element of a web page.   The text within the title tags is also considered an element.

Leave a comment