Other Pages

HTML Tags

Goals

  • Add some tags to your HTML file

  • Learn more about available tags

Overview

Use Tags to Separate Blocks of Content

Tags convey meaning. And in order to display your content well, everything should be inside of a tag, not just words you want emphasized. So let's use the paragraph tag <p> and the header 1 tag <h1>.

You'll notice that even if you put in extra lines and spaces, HTML will treat any number of new line or space characters like there's just one space there. When you're getting started with HTML, this can seem like a pain, because you have to type

<p>first sentence</p>
<p>second sentence</p>

when all you want is a blank line between two sentences. But as you get more advanced, this aspect of HTML will feel more useful, because it means you can format your code however is most readable for you, without worrying about what the browser will think of your blank lines and spaces.

Nested Tags

It's common for an HTML tag to be nested inside another tag. In the example above, you saw:

<h1><em></em></h1>

Just make sure that the tags are correctly nested. For example, you can't do:

<h1><em>Hello World!</h1> I like you!</em>

The inner tag, em, needs to close before the outer tag closes.

Steps

Step 1

Add some more lines of content to your HTML file. Introduce yourself.

Hello <em>World</em>!

My name is Rachel.

Now save the file and refresh your browser.

Step 2

Even though we put in some blank lines, the browser ignored them. So we'll have to use tags to break up our content.

Update your HTML with an h1 tag and a p tag:

<h1>Hello <em>World</em>!</h1>
<p>My name is Rachel.</p>

Now save the file and refresh your browser.

Step 3

Now let's add a list of things we like.

<h1>Hello <em>World</em>!</h1>
<p>My name is Rachel.</p>
<p>I like:</p>
<ul>
  <li>Polka Dots</li>
  <li>Soccer</li>
  <li>Programming</li>
</ul>

Now save the file and refresh your browser.

Explanation

Tags for Every Occasion

The meteoric rise in popularity of the world-wide-web and the recent proliferation of web applications has made HTML hugely popular. While originally used only for simple documents, HTML now has tags for embedded video and music playback, embedding images, filling out web forms, and all kinds of other useful tags.

You just used two well-known tags, h1 for a headline and p for a paragraph. But there are a ton of other tags you might use:

More Tags

Tag Purpose
a A link (the 'a' stands for Anchor)
h1-h6 Various headers, h1 is the most important, h6 the least.
ul Start a bulleted list (an 'unordered list')
ol Start a numbered list (an 'ordered list')
li A single thing within a list (a 'list item')
table, tr, td You can make tables (like this one) with table rows and data cells
form A form that can collect data from user input
input A text input, a button, or a checkbox in a form
div A section marker that doesn't do anything specific to the contents itself, but does make a new line after. (More on this later.)
span Another section marker that doesn't do anything to its contents, but is inline - it does not make a new line after.

And HTML5 introduced lots of new HTML tags to make the HTML more semantic, meaning the tags should describe the content they describe. Some of the new elements introduced by HTML5 include:

Tag Purpose
section A section of a document
nav A navigation section
header The header for a page. (This is different from the head element, which contains metadata about the page!)
footer The footer for a page
main The important content on a page
aside Content not essential to the main content

Don't try to memorize all the tags! You can always look them up on sites like:

Try This

What happens if you change the <ul> to <ol>? (Don't forget to change the closing tag, too.)

Can you link your favorite things to their respective Wikipedia pages? Here's an example link for you: <a href="http://en.wikipedia.org/wiki/Ruby_(programming_language)">Ruby</a>

CLASS DISCUSSION: What are all the individual parts of the code to add a link?

Next Step:

Go on to HTML Structure