HTML Tutorial

Elements

We've seen that HTML elements are used to define the structure of a web page. Let's step away from the page to look at the element in a little more detail.

A well-formed HTML element can include the following:

• A start tag.
• One or more attributes, declared inside the start tag.
• Content, located between the start and end tags.
• An end tag.

Attributes

Attributes allow you to specify additional information about an HTML element. All attributes have certain things in common:

Attributes:

Are always declared inside the start tag

Have names.

Have values, enclosed in quote marks.

Are declared using the following syntax: name="value"

The following attributes can be added to pretty much any element.

• class. This attribute is usually used in conjunction with CSS to apply display rules to an HTML element. Lately, this attribute has also found a semantic meaning, and is used as part of microformat markup.
  • Example: <p class="indented">This is a test. This is only a test.</p>
• id. This attribute gives the element an identity. Every single value of id should be unique. CSS and Javascript can act upon elements with id values.
  • Example: <h1 id="masthead">Home Page</h1>
• style. This attribute associates some CSS rules with the element. It's best not to over-rely on this, however, as it makes the document harder to update and can bloat the file size. Where possible, use external style sheets.
  • Example: <p style="font-family:serif;color:#00f;text-indent:1em">Foo bar baz quux.</p>
• title. This attribute causes a tooltip containing the attribute's value to pop up when the element is moused over. This attribute is often used in links, images and <abbr> and <acronym> tags.
  • Example: <acronym title="Hypertext Markup Language">HTML.</acronym>
• xml:lang. This attribute specifies the language of an element's content. This helps make your pages accessible and aids internationalisation.
  • Example: <cite xml:lang="de">Heiligefliegendekinderscheisse!</cite>