HTML Markup: Tag Syntax
Originally Published: 2001-03-26
Updated: 2006
In English class you may have been taught a simple rule of thumb: subject + verb + predicate = sentence. The extras like adverbs, and pronouns, and adjectives flavor the sentence. HTML tags, and elements, which help define structure and appearance of your content, have their own basic and flavoring requirements to have the information becoming an operational element. This article introduces you to the syntax found within the tags and elements of HTML.
Each time you use HTML, you are using a markup element. The elements will be enclosed with brackets similar, in appearance, to the lesser than (<) and greater than (>) symbols used in mathematics. These brackets help embed elements into the text document when viewed. Therefore you have to learn about the syntax within these elements. Sounds a tad bit scary, but it isn't.
You insert HTML elements right into the document where they lie dormant yet ready to go to work for you. The browser reads and then uses the bracketed information to display and manipulate the document's content for viewing. Elements host three areas of information within them through syntax: Element Name, Attribute, and Attribute Value.
Element Name
This is just what it says it is; name of the element. Generally the names will be shortened within the element itself. For example, paragraph becomes just the letter p, and emphasize simply shortened to em. On the other hand, strong will remain strong as will body.
In some instances there is singlet tags you will use, like with images, while others are part of paired sets with a starting and closing tags. These create visual elements in one's pages through HTML.
A variety of tags in HTML will lend you the ability to markup only sections within the content. In those cases, there will be a starting or opening tag and an ending or closing tag. An example of that would be <em>text to be emphasized placed here</em>. The </em> informs the browser to close the element so that the following text goes back to its normal, or default, appearance.
Attributes
Some elements will have required and/or optional features you can list for an element. The attribute helps to specify the element's behavior; some attribute thoughts would be placement [alignment], size, and color.
The HTML element itself will dictate what particular ones it can host. The attributes will be listed after the element's name with each attribute separated by a space. Their order of appearance is not an important issue.
The ones you will be more interested in will be the markup that allows more flexibility in the appearance of your page. Yet there are some instances when attributes will secretly assist some elements contained in a page to load faster for your viewers. Although some of these are optional, don't let this dupe you to feel that you skip merrily past considering using some of them.
Attribute Value
Values will be preceded by an equal sign (=) after the designated attribute. These values may be a word, a file name, color code, URL (Uniform Resource Locator or a Web address), or a number. Most values are enclosed with quotations marks. You must make sure you have the beginning and ending quotation marks in place to have the value and element work properly.
You may, if you want to, place a space before and/or after the equal sign but these spaces are not required. When I share HTML elements, within articles, I will not use those optional spaces; partially out of habit and to help have the element easier to read within these articles presented over time.
The ending, or closing, tag must match the starting, or opening, tag's name. If using <H2>, then you have to use </H2> to close the header text and not </H3>. When using attributes and values listed within an opening tag, of a paired set, you will only need to use the closing tag as there is not a need to repeat a listing of the attibutes within the closing tag.