Getting Started With HTML, Part 2

To review: last time we covered the doctype declaration and the tags <html>, <head>, <title>, and <body>. You can check out our last post here.

Now let’s talk more about what kind of things we can put into our body.

If you think about the types of things we put into our documents, one thing that’ll come to mind is text. How do we break up that text, though? For most of us, it’s words that combine into sentences, that combine into paragraphs. Thankfully you don’t need to mark up your words or sentences, but you do need to mark up your paragraphs (remember, HTML doesn’t care about whitespace!). Thankfully, there’s an easy tag: <p>, short for paragraph. We can put this anywhere in the body, like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <p>Hello world! This is my own HTML document!</p>
  </body>
</html>

This element is what’s known as a block element, meaning it forms a block on a page, where text goes inside. This means that with CSS, you can style the block to be longer, shorter, wider, taller, etc.

Now you might say, what’s the point of using paragraph elements? Later you’ll learn that you can also write in line breaks and other things that make the paragraph seem painfully obsolete. Well, for one, using tags lets you later select and style paragraphs specifically. Secondly, the browser’s default styling will automatically break up paragraphs for you, so no need to worry about pesky line breaks.

Finally, the <p> tag is semantic. Rather than being used to describe solely the layout or style of the page, it also tells the browser and other readers (both human and non-human) that this text is a paragraph. It is especially important to use semantic HTML so things like screen readers and web crawlers1 can read your text.

Another thing you might have on a document is a title. We already have the <title> tag, which is incredibly useful for web crawlers. But titles and subtitles can also give us an important visual and informational hierarchy. To do that, we have a set of six tags: <h1>, <h2>, etc., all the way to <h6>. Each of these defines a title, from most to least important, so that <h1> is the most important header, and <h6> the least. In this sense, like the <p> tag, the <h1> to <h6> elements are also semantic.

Think about a chapter book you’re reading. The title of the book on the inside cover would be the <h1>. Each chapter heading would be <h2>. Each subheading in a chapter would be <h3>, and so on. It’s important that you only have one <h1> element, otherwise you suggest that there are two supremely important titles, which we know cannot be the case! So your new page might look like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello world!</h1>
    <h2>Thank you for visiting</h2>
    <p>This is my own HTML document!</p>
    <h2>How to contact me</h2>
    <p>You can contact me by phone at 1-800-555-1212.</p>
  </body>
</html>

Lets say your web pages are getting more complex and you want to create divisions in your web page to make it easier to style. There are two helpful elements: <div> and <section>. Both create similarly-behaving elements in the page. But unlike <section>, <div> is not semantic, and doesn’t tell non-humans about the page or the content inside. Where possible, definitely use a <section> tag, but only if you’re describing a section.

These two tags make little, if any, difference on the page to a human visitor, but later, when we explore styling, it’ll be incredibly useful for us to be able to select them. Using the new tags, your new page might look like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello world!</h1>
    <div>
      <h2>Thank you for visiting</h2>
      <p>This is my own HTML document!</p>
    </div>
    <div>
      <h2>How to contact me</h2>
      <p>You can contact me by phone at 1-800-555-1212.</p>
    </div>
  </body>
</html>

Let’s say you want to put a link to another website. Well, it’s easy: you just use the <a> tag, short for anchor. Wrap the text you want displayed within it and it becomes a link. But wait, where does the link itself go? Well, every element we’ve talked about here has the option to take on attributes, which specify something about our tag.

The <a> tag has one attribute we’re really interested in right now: the href attribute, short for hypertext reference. It’s easy to add: all we have to do is put it after the a, but before the greater-than symbol. Then we put an equals sign, and finally our link inside quotes, like this:

<a href="http://google.com">Link to Google</a>

Easy! The <a> element is called an inline element, meaning you can use it within blocks of text. But since it’s not a block element like the <p> tag, it means you can’t use styling to make it longer or shorter, though you can change the text properties of it. We’ll explore styling in a later tutorial.

Finally, let’s say you want to write a poem in HTML. Now this can be trickier, since a <p> element defines a paragraph. Each line can’t be it own paragraph. Not only would that be semantically incorrect, but it’d look really really bad, with way too much space between lines and (comparatively) not enough between stanzas. Here is a good time to introduce you to a new element, the line break.

Remember when I said HTML was ignorant to whitespace? That’s because it wants us to explicitly write out when we want it. Otherwise it would make formatting documents a huge hassle. Thankfully, it’s easy to add in line breaks, you just use a tag, <br>, short for break. Now, here’s time for a good note: remember when I said we have to close tags? Well, <br> is one of those tags that you don’t need to close. Take my word for it. I’ll be using a different form throughout the tutoral, which looks like <br />, but rest assured it is exactly the same as <br>.2

Okay. So you have your poem and you’re ready to write it into HTML. Though it seems strange, it’s perfectly acceptable to use <p> for poems, even though they’re used mainly for paragraphs. In fact, if you think about it, stanzas and paragraphs are rather similar. For brevity’s sake, I’m going to leave out the typical HTML elements to show you only how it might look to mark up a poem wherever you put it in your page. For this example, I’ve picked Shakespeare’s 18th sonnet:

<p>
  Shall I compare thee to a summer's day? <br />
  Thou art more lovely and more temperate: <br />
  Rough winds do shake the darling buds of May, <br />
  And summer's lease hath all too short a date:
</p>
<p>
  Sometime too hot the eye of heaven shines, <br />
  And often is his gold complexion dimm'd; <br />
  And every fair from fair sometime declines, <br />
  By chance, or nature's changing course, untrimm'd;
</p>

And so on. Note that there’s no need to put a line break after the last line of a stanza, since the new paragraph will automatically put some room after the last line.

Wow! That’s a lot. But the elements we’ve covered here barely scratch the surface of our work! They’re easily the most common elements you’ll use and encounter when working with HTML, but there are tons that you can use to semantically describe your text even further. In our next tutorial, we’ll go over some basic tags for our <head> element. Then later, we’ll revisit the <body> tag to introduce some new elements, such as adding images, footers, etc. Finally, in the next series, we’ll start working with CSS to style our sheets.

  1. A web crawler is a program that goes through and crawls along webpages, like a spider crawls along a web. Typically they’re used for indexing the web for search engines, like Google does. They’re not humans, so they need to be able to know about your webpage as best they can, and semantic HTML makes the job a lot easier, and can help you rank higher in search engines like Google. ↩

  2. If you’re like me, worried you’ll lose your self-closing tags, then you can use some syntactic sugar (syntax that is used for readability rather than correctness) and write <br />. It’s a bit of a pain but it helps me not stress about my self-closing tags when I’m searching for a mis-matched close. This is a holdover from the XHTML days of the mid-2000s (which thankfully are long gone). Both are completely acceptable options in HTML5, though if you’re hoping to use your document as XML (kind of a rare use-case), then you should use <br /> as <br> is invalid XML. As I said, I’ll use <br /> and similar syntactic sugar on other self-closing elements throughout my tutorial. ↩

Tags

An image of Armando León

Armando León

Columbia University history student who likes books.