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, browsers 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

The browser ignored the new lines and the blank line because we didn't use any tags. Let's use some 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 to 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 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. (a 'division'. 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.

HTML5 introduced lots of new 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: a thematic grouping of content.
nav A navigation section, containing links to other pages or to parts within the current page.
header The header for a page or section of a page. (This is different from the head element, which contains metadata about the page!).
footer The footer for a page or section of a page.
main The main content of a page.
aside Content that's related to the main content, but could be considered separate from it.

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

Try This

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

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

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

Next Step:

Go on to HTML Structure