Element Tags

Help Center HTML Element Tags

We said on the Getting Started Page that HTML is nothing more than a box of highlighters that we use to carefully describe our text. This is mostly the entire story. Normally our content is just text we want to define in some way. But what if our content is not just text? What if, let’s say, we have a bunch of images that we want to include on the page? We certainly can’t type in 4-thousand pixels on the keyboard to make up a 200x200-pixel image…

Motivation and Syntax

When the content we want is not text, then we have to have of including that content on the page. The most common example is an image. The problem, however, is that html tags are like highlighters — they have an opening tag and a closing tag. Between the opening and closing tags fits the data that is “highlighted” by the tag. If we were to have an <image> tag in HTML (we don’t have that tag—one close to it though), what would go “inside” of it? What might you replace the stuff with inside of <image>stuff</image>?

It simply doesn’t make sense for an <image> tag to exist like all the other HTML tags because the other HTML tags define something else while image is, itself, something that can be defined.

The image tag and all such manner of tags are called “element” tags because, just like the name implies, the tags are themselves the elements all their own. For all intents and purposes you can treat element tags just like text.

If your content is like the words in a textbook and regular HTML is like a pack of highlighters, then these special element tags are indeed like the text and not like the highlighters at all.

The XML standard says that every tag must be closed. But we have this new breed of tags that really don’t make sense to be closed. What we have is a compromise between the two extremes. We have a self-closing tag. The tag is just like the tags we learned about on the General Syntax Page with two exceptions.

  1. There is no closing tag
  2. There is a / before the > to indicate that the tag is self-closing.

So this looks like:

<element/>

(There is commonly a space before the /, but again spacing after the name of the tag is arbitrary.)

You might imagine that there could be a tag that produces the copyright symbol (©). There isn’t (we’ll get to special characters later). But if there were, you might imagine there being an element tag called copyrightsymbol that we could use right in line with our text to produce a ©

Images

Images on Web sites take the form of image files stored on a server. Much like line breaks, images are element tags that are treated like text. The difference is that the image element tag is replaced by the actual image file.

We mentioned the (non-existent) <image> tag earlier in our discussion on the necessity of the element-style tags. The real tag to include an image on the page is <img>. This tag makes little sense if used without its src attribute.

Let’s say we have the image image1.jpg, a small image, uploaded to the same folder as our HTML file. To include the image on the page, all we have to insert is:

<p><img src="./image1.jpg" /></p>

Which would be rendered (displayed) like:

null

And, again, images are like text — they go right in with your content:

<p>This is image1: <img src="./image1.jpg" />.  Cool, right?</p>

This would be rendered like:

This is image1: null. Cool, right?

(More information on how to reference your images using different paths depending on where your images are stored can be found on the Internet File Management Page of the Web Publishing at the UW online curriculum.)

Alt Attributes

If your images contribute to the content of your site, then you should provide an alt attribute for your images. The alt attribute is a text version of your image. Usually it is just a concise sentence describing the image. The alt attribute will be used if your image is unavailable for any reason (e.g. if you delete the image file, if your viewers can’t see images, etc.)

If we had a picture of a dog jumping into a lake called spot.jpg, we might use the following HTML to place it on the page:

<p>A picture I took: <img src="./spot.jpg" alt="Spot jumping into a lake." /></p>

If your image is purely a visual element (e.g. an icon next to a download link or an image used in your page’s layout), then you don’t need to provide an alt attribute. If your web design work is sponsored by the University, be sure to check out the UW’s page on Web Site Accessibility by clicking here.

Line Breaks

The spacing rules of HTML say that when we break the line in the source code (e.g. using the enter key on the keyboard), we don’t also break the line on the rendered (displayed) version of the page.

This is why the following two blocks of code:

<p>This is text.  This is more text</p>
<p>This is text

This is text</p>

…are considered equivalent. They will both be displayed by the web browser in exactly the same way:

This is text. This is more text

If we want to break the line, however, perhaps for the lines of a poem, then we can use the <br /> element tag. The following block of code:
<p> In what particular thought to work I know not; <br />
	But in the gross and scope of my opinion, <br />
	This bodes some strange eruption to our state.<br />
</p>
..is rendered like:

In what particular thought to work I know not;
But in the gross and scope of my opinion,
This bodes some strange eruption to our state.

Special Characters

Above we imagined that there was an HTML element tag called copyrightsymbol that would be used to produce a Copyright symbol (©). If there were such a tag, we might have the following HTML:

<p>This page is Copyright (<copyrightsymbol />) 1989 By George Orwell</p>

There turns out to be so many such symbols that the creators of HTML decided to create a whole group of “special symbols” (or “special characters”). These characters are used in the place of any character you cannot type using a standard US-English QWERTY keyboard. They are also used in the place of some “reserved” characters (like the less-than and greater-than signs, <, and >).

Symbol HTML/XML
< &lt;
> &gt;
& &amp;
' &apos;
" &quot;
© &#xA9;
&#x2117;
&#x2122;

There are many such characters. They all start with an ampersand (&) and end with a semicolon (;). The web browser sees these and replaces them with the special character. Some of them are mentioned in the table to the right. You can find a complete listing of all such special characters by doing a search in your favorite search engine for HTML Special Characters.

Share this page Share