HTML Elements and Tags-1

This chapter takes a close look at tags, the fundamental building blocks of HTML. It covers how they work, some exceptions to the normal way they work, and a brief discussion on tag attributes.

Structure of Tags

Generally, matching pairs of tags surround the section of text which they affect. Two matching pairs of tags, along with the content they enclose, are called an “element.”

This element begins and ends with the "strong" tag.

The opening tag can contain additional attributes which provide more information about the contents of the tag and how to display them. These attributes are written as name–value pairs, separated by an equals ( = ) sign, with the value placed in quotes.

<a href="http://example.com">This is a link. The tag is an "a" for "anchor," and the href (hyper reference) attribute specifies where the link is pointing.

A few tags do not occur in matching pairs, because they are used to insert something, rather than describe text. These are called “empty” or “void” tags, and the most common one is the one used for inserting an image. The src attribute is used to specify the URL of the image.

<img src="http://media.whoishostingthis.com/2/v60/images/wiht-logo.png" />

Notice there is no closing tag, and therefore no enclosed text. The slash right before the final angle bracket ( /> )is used to “self-close” the tag. This is not absolutely required, but it is a good reminder that whatever follows will not be enclosed.

There are several other empty tags. Two are fairly straight forward and common.


  • inserts a line-break.


  • inserts a horizontal rule (line) separator.

Others do not insert something visual, but are used to provide information about the page itself.

<link rel="stylesheet" type="text/css" href="theme.css" />

<meta name="description" content="Title of this page." />

Additionally, the tag (which is used to add Javascript to a page) can be empty, but it doesn’t have to be.

(More information on , , and tags will be provided later in this guide.)

Block-level vs. inline

With the exception of tags that provide information about the document itself, HTML tags fall into two categories, block and inline.

Block elements

Block elements represent rectangular blocks of content. They have an implied line break before and after. Block elements include sectional content like paragraphs (

), divisions (

), and headlines (

,

).

It is standard practice to type most block-level tags on individual lines above and below their content:

This is a div.

However, this is not always done, especially with headlines:

This is the title of a page

This is a major section

Some content in a paragraph.

Block-level elements can be nested, but some block-level elements can not contain other block-level elements:

Title of an article

First paragraph of article.

Paragraphs and headlines cannot contain other block-level elements.

Inline elements

Inline elements are elements used within text. Bold ( ), italic ( ), and links ( ) are all inline elements.

Inline elements are sometimes called “span-level” elements. There is also a generic span-level elements, simply called a span ( ). This doesn’t do a whole lot by itself, but can be used to create customized types of text-display, through the use of elements.

<span class="special-text">This text is special.

(See the chapter on CSS for information on how to make class="special-text" display in a special format.)………continue……in next..

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s