Design Primer 2: Fundamental Tags
After working through Part 1, you now know the structure of a web page and how to make text bold. So what else can you do? This part will show you some of the most fundamental HTML tags and how to use them. So lets go!
Understanding HTML Tags
Types of Tags
First we have to understand one thing: there are different 'types' of tags.
Block-Level
Some tags are designed to define a block of space (e.g. be placed around a block of text). These are called block-level tags.
Inline
Other tags are designed to define just a segment of something on the page (e.g. be placed around a bit of text inline with other text). These are called inline tags.
Structural
Finally, there are tags that are designed to create structure on the page (e.g. place a carriage return on the screen). These are called structural tags.
Block-Level Tags
The block-level tags insert a line break before the start of the block and after the end of the block. This means two chunks of text placed in separate block-level tags appear one on top of the other on the screen. Confused? That's okay - looking at the following example should help. It builds on the example from Part 1, but now includes the block-level paragraph (<p> and </p>) tags:
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<p>
<b>Hello</b>
</p>
<p>
Web design is so much fun!
</p>
</body>
</html>
Now when you save and view the web1.html file (open the file in Internet Explorer as described in Part 1 and click the Refresh button when you have made the changes to the web1.html file), you will see the Hello is above the Web design is fun!. That makes sense, since we obviously placed Hello above Web design is fun! when we wrote the HTML in the file.
An interesting thing about HTML, though, is that it ignores 'white space'. White space is the carriage returns, indents, etc. we add in our HTML to make it more readable. Knowing that, what would happen if we removed some of the indents and carriage returns so our HTML looked like the following?
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<p><b>Hello</b></p><p>Web design is so much fun!</p>
</body>
</html>
The answer is: absolutely nothing. It looks exactly the same on the screen (try it yourself - save the changes and refresh Internet Explorer). The reason nothing changed is because the tags themselves defined the appearance, not how we spaced the tags in the HTML file. Since <p> is a block level tag, Internet Explorer adds the carriage returns before and after the <p>…</p> block, regardless of what the layout of our HTML looks like in Notepad.
In fact, the page will look identical if you write the HTML without any carriage returns or indents (but it's a heck of lot harder to read the HTML without them!). You can try writing the HTML as follows (the same HTML as you just wrote, but with the formatting removed) to prove this to yourself:
<html><head><title>My First Web Page</title></head><body><p><b>Hello</b></p><p>Web design is so much fun!</p></body></html>
See? It still works, but it's not recommended to write HTML this way, as when web sites get more complicated, keeping the code as easy to read as possible is very important.
Inline Tags
If you've grasped the block-level tags (or at least got a notion of what they're all about!), inline tags will be a breeze - you've used one set already (yup, the <b> and </b> tags). Unlike block-level tags, inline tags don't add carriage returns before and after. This means inline tags can be next to each other on the screen. In the following example, we'll build on the HTML we've already written, but we'll add a second inline tag, italics (<i> and </i>; recall that our first inline tag is bold - <b> and </b>):
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<p>
<b>Hello</b>
</p>
<p>
<b>Web design</b> is so much <i>fun</i>!
</p>
</body>
</html>
When you save this and look at in Internet Explorer (don't forget to refresh), the "Web design" is bolded and the "fun" is in italics, with no carriage returns between them. These are inline tags in action! Again to show that it's the tags defining the on screen layout and not the layout of the HTML in Notepad, we'll change the code as follows:
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<p>
<b>Hello</b>
</p>
<p>
<b>Web design</b> is so much
<i>
fun
</i>!
</p>
</body>
</html>
Wow! This should make a big difference, right? Again, the way we write the HTML in Notepad does not affect the way the web page looks on the screen. If you try this nothing changes! That's because Internet Explorer ignores the 'white space' we've added. It knows <i> and </i> are inline tags, so it doesn't show the carriage returns we've associated with them on screen. Once again, it should be stressed that it's not a good idea to write your HTML like this (as it's hard to read, and browsers will sometimes incorrectly add an extra space or some other oddity). This was just done to demonstrate a point.
Structural Tags
Structural tags are those tags that are used to build the 'framework' of the web page. These include the <html>, <head> and <body> tags we've already encountered. Their job is to define the structure of the web page. This is sort of like creating a skeleton on which we hang the contents of the web page.
Summary of Tag Types
So that's the difference between block-level, inline and structural tags. Now that we understand that, we can go on to the fun stuff: the different tags themselves!
The Fundamental Tags
The following are some of the most fundamental tags in HTML. Don't forget to add both the open and closing parts of the tag! All the examples for the tags shown here are placed within the body of the web page, so we'll leave off the surrounding tags for the sake of space:
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
(only the HTML in here is shown)
</body>
</html>
Also note that each example is shown in isolation to demonstrate the tag being discussed; it does not build on the examples before it. As a result, the new HTML is not highlighted as it was above.
Paragraph - block-level tag
The paragraph tag <p> and </p> define a paragraph on the web page. Paragraphs are separated from other elements on the web page by a carriage return before and after the paragraph.
Example:
<p>
This is a paragraph. It is contained within paragraph tags. It can contain many sentences. Paragraphs are separated from other page elements by carriage returns.
</p>
<p>
This is another paragraph. It can also contain many sentences. Note how it is separated from the above paragraph by a carriage return.
</p>
Heading - block-level tag
The heading tag is used to display titles (headings) and subtitles (subheadings). They are typically shown in bold font. Headings come in a variety of font sizes, 1 through 6, where 1 is the largest font size and 6 is the smallest.
The tags are <h1> and </h1> through to <h6> and </h6>. Using headings for titles and subtitles is better than using the bold tag to accomplish the same look (there are many reasons for this, including making the page easier to understand for search engines, verbal browsers used by the blind, etc.).
Example:
<h1>My Cool Web Page</h1>
<h3>My First Sub Heading</h3>
<p>This is the text under my first sub heading…</p>
<h3>My Second Sub Heading</h3>
<p>This is the text under my second sub heading…</p>
Lists - block-level tag
The list tag is used to display a bulleted or numbered list. It's composed of two types of tags that are nested within each other. The first are the tags that define the beginning and the end of the list, and these come in two varieties: unordered and ordered.
Unordered lists display a bullet before each item in the list. Its tags are <ul> and </ul>; Ordered lists display consecutive numbers before the each item in the list. Its tags are <ol> and </ol>.
The other type of tag used for lists is the list item tag, <li> and </li>. These tags define the start and end of each item within the list.
Example:
<p>My two lists. The first is unordered, the second is ordered</p>
<ul>
<li>This is the first item in my unordered list</li>
<li>This is the second item</li>
<li>This is the third item</li>
</ul>
<ol>
<li>This is the first item in my ordered list. Note the numbers!</li>
<li>This is the second item</li>
<li>This is the third item</li>
</ol>
Bold - inline tag
The bold tag, <b> and </b> makes the section of text within the tags bold.
Example:
<p>This text is not bold, <b>but this text is</b>!</p>
Italics - inline tag
The italics tag, <i> and </i> makes the section of text within the tags italicized.
Example:
<p>I want this to be <i>emphasized</i>, so I italicized it!</p>
Underline - inline tag
The underline tag, <u> and </u> makes the section of text within the tags underlined. Note that is considered very poor form to use the underline tag, as underlining is understood to be a link on a web page. This tag is only mentioned as a caution not to use it!
Line Break - structural tag
The line break tag, <br /> inserts a single carriage return at the position it is placed on the page. It is unique compared to the tags we have seen so far, in that it does not have both an opening and closing tag. This is because it does not contain anything (e.g. text) within it. Tags of this nature end with a /> to close themselves. If this doesn't make much sense, don't worry about it. It's just how this tag works!
Example:
<p>I want to divide this paragraph in two.<br />I want this sentence to appear below the first one.</p>
Horizontal Rule - block-level tag
The horizontal rule, <hr />, adds a horizontal line across the page. Like the <br /> tag, this tag does not need separate opening and closing tags, so it closes itself.
Example:
<p>This paragraph is separated from the one below by a horizontal rule.</p>
<hr />
<p>This paragraph is below the horizontal rule.</p>
Well, that's it for the fundamental HTML tags. Now you can create simple, text based web pages. Not too shabby, eh? In Part 3, we will look at more advanced tags that let us add images, hyperlinks and some additional formatting to our text.
