standard logo    Personal Education

Home > Programming > HTML > HTML Elements

HTML Elements

This page is part of my effort to learn the way the World Wide Web works. I'm working on my own and with peers through the Peer to Peer University (P2PU) School of Webcraft which begins with the very practical Webmaking 101 activities. By writing my understanding into actual web pages, I solidify what I know. I believe that telling someone else about something is one of the critical steps in really understanding it myself. If you are reading this page and it helps you, then I am getting where I want to be, too.

If you work through the Webmaking 101 tasks, you'll be able to practice HTML by making and publishing a very simple (but complete) web page which will look something like this:

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>P2PU Webmaking101 "Hello World!"</title>
<meta name="author" content="Algot Runeman">
</head>

<body>
<h1>Hello World!</h1>
<p>First web page to publish in Webmaking101 class.</p>
</body>
</html>

After that, regular practice with more and more web pages will build your skill as a web designer. HTML is the core of that practice.

HTML wraps around the words, images and designs you develop for other humans. HTML helps you deliver your message effectively and quickly. Anybody connected to the Internet today can be your audience. HTML is a set of code elements which communicate not to humans, but to the browser on your computer. A browser, such as Firefox, Safari or Internet Explorer interprets the codes to display information on a computer monitor (or one of the portable devices like a tablet or cell phone which are sometimes not considered to be "a computer").

Paragraphs

HTML codes are commonly called "tags" and tags are enclosed in angle brackets <tag>. The tags generally come in pairs like the two paragraph tags exposed in the next paragraph.

<p>This is a paragraph (a short one!)</p>

(Emphasis added to make the code stand out.)

The opening paragraph tag contains a lower case letter "p" as a code abbreviation for "paragraph." The closing code tag matches the opening one, but the closing tag shows it is closing the paragraph by including a slash. The tags mark the start and finish of the paragraph.

The browser software on a computer has a standard way to display a paragraph, putting some space above and below the text. Browsers do not typically add an indent for the first line of a paragraph because the whitespace above and below the paragraph makes a series of paragraphs stand out from one another.

Code tags may be single letters as with the paragraph tag, but may also be longer abbreviations or even whole words.

HTML is the abbreviation for Hypertext Markup Language. "Hypertext" implies that the text is enhanced. The tags add to the basic words, giving them a visual context and a structure for meaning. For wordy Web pages like this one, the paragraph tag is the most common. From long experience with books and reading, we are used to paragraph structure. HTML paragraph tags clearly mark the beginning of a paragraph with <p> at the beginning and </p> at the end so the browser software will help us humans see the paragraphs effectively.

Headings

Other tags expand the structure of a web page, adding structure elements which allow us to see different pieces of the page with approprate emphasis. The tags also enhance the page by identifying elements as headings, for example. The browser usually displays headings as larger size text, making them stand out visually. By being tagged with one of several levels of heading tags, though, the headings become structurally clearer.

The level one heading tag is good for the title of the page, perhaps.
Of course, the tags are not normally visible. They are made visible here for emphasis of their effect.

<h1> Heading Level 1 </h1>

Level two headings then become effective section markers to help divide the page, enhancing the meaning again. This page does not go beyond the <h2> level and most use only two or three heading levels.

<h2> Heading level 2 </h2>

Level three headings, as well as 4, 5 and 6 further split the web page, emphasizing a series of sub-sections. In some ways, the headings act like the structure of an outline, helping develop a topic in both a visual and a structural way. Headings 4, 5, and 6 generally continue to be displayed smaller in steps.

<h3> Heading level 3 </h3>

By default, the browser settings determine the font (letter shape, style and size) to be displayed unless style is put in place with Cascading Style Sheets. On my Firefox, the default system font is serif at 16 points. If you have modified your browser settings or have a different default setting with your browser, perhaps you do not see the same font look as I do.

Images

font settings

The image just above is visible to you because the <img> tag tells your browser where to look to find it. The HTML code doesn't actually contain the image. The page you are currently reading is the result of the HTML tags surrounding text in headings and paragraphs AND the separate image file to which the <img> tag points.

The image tag is different from the heading and paragraph tags which had two separate "opening" and "closing" tags. We put one tag just before the start and the other closing tag just after the end of the text they control. The image tag is designed differently. The address of the image file is inside the brackets of a single tag instead of being set between opening and closing tags.

<img src="html-font.png">
("src" means "source" of the image. The source is the address of a file which is enclosed in quotation marks.)

There is no need for a separate closing tag because the whole job is accomplished within the single image tag. I imagine that the tag could have been made with the address between an opening and a closing tag, but it didn't happen that way. The early <img> tag was kept simple by the browser developer who shipped a working version (before there was a standards body involved) and the style never changed. There are some other single tag elements in HTML, but they aren't discussed in this document.

There is an important bit to understand about the address of the image file. In many cases, the image will be stored in the same folder as the HTML file. That makes it convenient to make the reference "relative" to the location of the HTML file. You could also use an absolute address reference.

<img src="http://runeman.org/programming/html/html-font.png">

Note:
During the very early stages of learning web design, watch out for those relative file references. If, like most people, you develop your pages on your own laptop or tower computer, you will have the files saved to your hard drive while you are creating them. You will open the html files with your browser and be very excited to see your ideas becoming real. Watch out! When you actually start transferring files to an official server on the Internet, you must remember to transfer all the other supporting files to the server, too. A lot of beginner web designers just move a copy of the HTML file to the server and the image is inaccessible back on the laptop drive.

Another common issue happens if you use a graphical web design tool which hides the HTML from you. The image file may unintentionally get a local file reference and even if you transfer the image file to the server properly, the address will be something like this next example and will fail to work.

<img src="C:\webfiles\image.png">

The HTML image tag is pointing to the file on your personal hard drive instead of the copy on the server. Your web development computer isn't normally set up as a server for the internet. That link might have worked just fine while you tested your work, but nobody else can see your finished product. The link may still work for you because you are seeing the image on your hard drive. Everybody else has to look at the image available from a full-fledged server, and the link isn't pointing to that server copy of the file.

This example reveals another quirk of the Windows operating system. Windows browsers understand the reverse slash (\) as the way to identify folders on the hard drive. The Internet at large along with Macintosh and other kinds of computers with Linux or some other operating system use the standard slash.

Links

The link tag pair <a> and </a> are very important to the web. Link tags provide the connection from one HTML page to another and make it easy to go anywhere across the Internet for information.

<a href="helloworld.html">Hello World</a> (a relative link)

And here's the working link: Hello World (By the way, this is the page from the code at the beginning of the page.)

If you hover your mouse pointer over the link and look to the bottom of most browser windows, you will see the way the browser sees the the file location. It gets expanded from the simple relative link to the actual full address:
http://runeman.org/programming/html/helloworld.html so you don't need to worry.

In its simple version, the link created by the tags above tells the browser the path (address) to another HTML file. That file may be identified with a relative address such as when the file is in the same folder on the same server. However, a full address can be given and the browser will go to a different location, even a different server and ask for a file from there instead. Since you are considering writing web pages, you have by now, seen lots of those links while exploring the Internet. Links are the basis for the name "World Wide Web." The links from page to page, resource to resource and server to server create a virtual spider web of connections that may send your browser across the street, across the country or across a wide ocean. Wireless connections just recently allowed the amazing communication between a NASA computer here on Earth with the Voyager satellite which has just announced that it has finally reached the edge of the solar system.

The standard appearance of a link is blue, underlined words so don't style text that way unless it actually is a link.
However the link tags may also be put around more than words, an image for example, so clicking on the image sends the browser on its way.

My Cat

Doesn't everybody have to like cat pictures, even if they have been vectorized?

<a href="cat.svg"><img src="cat-sm.png"></a>

Look carefully at the structure of the tags in the line above. There is a pair of link tags enclosing the <img> tag. Lots is happening there. Watch out for tag overlap. Carefully start and finish a tag pair. The image tag is "nested" inside the link tags.

Nesting

I'll finish up with this second example of nesting to point out how it needs to work. For the example, I'll combine bold and italic so they both apply at once, together bold and italic.

<b><i>bold and italic</i></b> This works
It is not OK to overlap the tags. <b><i>THIS BREAKS!</b></i> This version breaks because it tries to close the bold before finishing up with the italic which started on the inside of the nesting.

HTML evolves.
The current standard is pushing toward what is called HTML5. Some tags have been assigned to fade away by the W3C standards organization (World Wide Web Consortium). Bold and Italic are examples. The old tags have been "deprecated" in favor of the newer ones.

<b> - </b> were the tags for bold. The recommended form is now <strong> - </strong> so the job of styling for bold can be left up to Cascading Style Sheets. The <i> - </i> pair is now recommended to be replaced by <em> - </em> for the same CSS benefits. The old style still works, though, and it is easier to write.

Wrapping Up

Four files build the page you are reading. One is the HTML file itself which has the tags and the text, the second and third are image files and the last is a stylesheet file. While it is possible to include style controls in the HTML page, design gurus say stylesheets should be in separate files so they are easier to maintain, and so they can be reused by many pages, and so those many pages have the same look.

This page has a stylesheet. That way, you see things more like the way I planned. For example, I said the headings should be a blockier sans-serif font instead of the default of your system. By switching from the default serif, with its little extensions at the tops and bottoms of letters, the headings stand out even more than they otherwise would because of their bigger size. Cascading style sheets (CSS) is a separate topic, but needs to be mentioned here because it is now in widespread use. CSS allows web page designers to be more in control of the "look" of a page than was originally possible. CSS styling allows a designer to override the browser defaults so what you and the designer see are closer to the exact same thing, in spite of being on different computers with different browsers.

Without using the stylesheet, there would be no background and no margins to the page. The text would all be serif or whatever your browser designated. When you start doing web pages, be patient with yourself. Learn in increments. Gradually add new tags to your pages. If you only use headings and paragraphs for a while, that's OK. There are a lot of little pieces (and some bigger ones, too) to make precisely the web pages you want.

Final Sections

The HTML page is divided into a few important sections:

Resources: (far from a complete list)
W3Schools - http://w3schools.com/html/default.asp>
Mozilla (Firefox Browser) Developer Network - https://developer.mozilla.org/en-US/learn/html
HTML.Net - http://html.net/tutorials/html5/
HTML in 20 Minutes - https://www.mtholyoke.edu/acad/germ/neh/HTML.html