Understanding Tags and Attributes

A web page includes different elements, such as headings, paragraphs, and bulleted lists. In an HTML document, these elements are indicated by codes (called tags) that are attached to content. Refer to the Session 8.1 Visual Overview for some examples of the tags you can use in an HTML document and how these tags display content in a web page.

Because tags must identify all the elements in a web page, you frequently need to include one or more sets of tags within other tags. Tags that are included within other tags are called nested tags. For example, within a set of tags that identifies the beginning and end of a paragraph, you might include tags to display certain words in that paragraph using bold or italic. You might also include tags to identify the font size to use for the text in the paragraph.

Tags are either two-sided, such as the paragraph tags that indicate the beginning and end of a paragraph, or one-sided. An example of a one-sided tag is the HTML <br/> tag, which indicates a line break in a web page. Some tags include attributes that specify additional information about the content to be formatted by the tag. For example, as described in the Session 8.1 Visual Overview, the <h1> tag is a two-sided tag that creates a large heading in a web page. The <h1> and </h1> tags can be used to indicate the beginning and end of the heading, respectively. However, you can also include one or more optional attributes in the opening tag to describe the heading’s content in other ways, such as indicating the alignment of the heading or the font color of its text. For example, the following tag creates a large heading in a web page that contains red text and is centered on the page:

<h1 style="text-align:center;color:red;">Heading 1 Content</h1>

When a browser interprets this tag, it creates a large heading using the text “Heading 1 Content,” centers it on the page, and displays it in a bold, red font color. This syntax conforms to HTML specifications by adding the "style attribute and using quotation marks to enclose the attribute values.

Tip: All heading tags create bold text.

Some attributes are optional; others are not. You might be familiar with a webpage that contains a form with text boxes into which you might type your first name, last name, and phone number; a group of option buttons so you can select your age group, with options such as 18 to 25 or 26 to 35; or a check box that you click to authorize an organization to send information to your email address. An HTML document uses the <input /> tag to create the various inputs on the form, such as the text box or option button. In the <input /> tag, the type attribute is required because it is necessary to specify the type of object to create. For example, setting the type attribute to “radio” creates an option button on the page. (An option button was originally called a radio button, and this is where the attribute gets its name.) If you omit the value for the type attribute, the browser doesn’t know which kind of object to create. However, assigning a default value of “yes” or “no” to indicate the status of the object when the browser loads the page is optional; if you omit this attribute, the browser will apply the default option, which creates an unselected object (such as an empty check box). For example, the following input and label tags <input name="mycheckbox" value="yes" checked="checked" /><label for="mycheckbox">List</label> creates a check box named “mycheckbox” with the initial value of “yes” (indicating a checked check box) and adds a label for the checkbox to be "List":

 List

As you work more with HTML, you will learn which attributes must be used with tags and which attributes are optional.