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
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.
- There is no closing tag
- There is a
>to indicate that the tag is self-closing.
So this looks like:
(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 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
Let’s say we have the image
image1.jpg, , 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:
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: . 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.)
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.
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
<br />element tag. The following block of code:
..is rendered like:
<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>
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.
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 >).
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.