START A COURSE

The HTML and CSS Blog:

What You Learn in This HTML Lesson

In this lesson you’ll learn how to create the important but basic HTML codes that you need to learn to write HTML: paragraphs and headings.

Basic HTML 101: Headings and Paragraphs

lewis carrol quote

Heading and Paragraph tags: for HTML coders like Lewis Carrol who want to begin at the beginning. [image via The Design Inspiration]

HTML uses tags (also called elements) to mark up content, and define its structure.

For example, without any tags, text would not have any separation of paragraphs. Without these basic HTML codes, we’d have no clue which text was important (e.g. is it the important information I should read first or is it the small legal l text I should ignore?).

Basic HTML: Creating Multiple Paragraphs with the Paragraph Tag

Let’s start by using paragraph tags to separate each paragraph.

You will put <p> at the beginning of your paragraph, and end the paragraph with </p>.

HTML is a markup language: you mark-up the content by surrounding it with tags (still also called elements) to indicate to the web browser what it is (i.e. “you are a paragraph”)….to provide structure to the content.

a puppy between paragraph tags

Here’s an example, to see this most basic code in action:

The most basic of HTML codes is the paragraph tag, which is used to separate every paragraph on the world wide web. That’s a lot of paragraph tags, isn’t it?

Notice that the closing tag is the same as the open tag, except it includes a slash. This is a pattern with HTML tags. The slash always indicates it is a closing tag, which marks the end of your content. Tags that have an open and closing pair are called “container” tags because they surround or “contain” their content.

HTML paragraph tag

The HTML paragraph tag

Using the <p> tag will create separate paragraphs, and you may notice quite a lot of space in-between the paragraphs. The <p> tag has default spacing between paragraphs. You will be able to redefine that space by creating a CSS rule to define text formatting and other visual properties for each HTML tag. Creating a CSS rule, such as a tag selector for the <p> tag, and defining top and bottom margin properties, will be covered in an upcoming CSS tutorial.

Basic HTML Codes 102: Heading Tags

Some of the paragraphs are more important than others. It is helpful to your search engine to give clues about whether paragraphs are plain paragraphs (like body text) or are headings. And headings can follow a hierarchy, where there are six different levels of heading paragraphs, with Heading 1 being the most important. Note that the Title of this blog post, “Basic HTML Codes: Heading and Paragraph,” is a heading at the 1-level. Usually the first-level header is the title of the document—can’t get much more basic than the document’s title!

HTML heading tag

The <h1> tag is the most important heading on the page

In our example, let’s add heading content and surround it with <h1> heading tags for the most important headings. The heading tags are containers tags, so you will use an open and close pair to markup the beginning and ending of the heading paragraphs. You can use <h1> through <h6>, with <h1> being the most important and <h6> heading the least important. Search engines will usually prioritize the content it finds in <h1> and <h2> heading tags, thinking those tags indicate what is the most important content on the page (within the body).

Were you able to identify which part of the document you’re reading now is the <h2>? Have a scroll, and report back…

cat gives drum roll to announce the most learned basic HTML students

And the winner is…                                                          [image via Eco Cat Lady]

…if you’re thinking that the section marked “Basic HTML Codes 102: heading tags” is an <h2>, you nailed it. Likewise any of the sections that are the same size, color and font. Naturally, however the <h2> tags (or <h1> or <h3>, etc.) are styled, we want all the same heading level to look the same so they are clearly of the same level. This makes it easy at a glance for the reader to know how the text is organized.

 

And here’s how that looks with our design settings:

This is the H1, the Most Important of Headings

This is the sub-title, H2, Still Pretty Darn Important

Don’t Leave Me Out, H3, I’m still Set Apart From the Regular Text

H4 Would Like to Make A Point and Divide Up the Text Further, If You’ll Let Me

Would Someone Please Mark Some Text Up With H5, Pretty Please?
Zzzzzzz, Ahem, Oh, did Someone Need H6? No? Zzzzzzz

use CSS for design unicornNotice that the default is to format the content in Heading tags bold and change the size, so that the heading 1 is the largest, and each heading is a slightly different size with default space above and below the heading paragraph. This formatting can be defined by creating CSS rules that redefine the default properties, (such as font, text color, text size, space between paragraphs, and other visual properties). HTML controls the structure of objects (Is it an important heading or a plain paragraph? The title of the document, or just the head of a section?), and CSS controls how things look (what color and font is the heading?).

HTML tag summary:

<h1> </h1>
<h2> </h2>
<h3>  </h3>
<h4>  </h4>
<h5>  </h5>
<h6>  </h6>

Heading tags, 6 levels available,

H1 through H6

H1 is the most important

<p> </p>

Paragraph tag

Brain Snack: You try it!

Learn HTML with this Activity: Using Heading and Paragraph Tags

You are going to practice working with HTML tags by used heading and paragraph tags to close your HTML tags reminder bunnycreate a structure for your text.

Go to this link to open these instructions in the sandbox. This is a playground where you can test out your code and see the results immediately, without having to upload it to a browser. All the instructions below will be repeated in the sandbox, as a comment.

You can save your own copy of the sandbox code, or share it.

Tip: Make sure to close all tags.

Step one: break up the following content into 4 paragraphs. Notice that without any structural tags it all runs together visually, as if it were one paragraph.

Step Two: Add headings, starting with the most important, and surround the headings with <h1> through <h6> HTML heading tags.

heading tags h1 through h6

Mark up important content with HTML heading tags h1 through h6

Fun Facts About the Beatles John A huge fan of the B-52s and Bing Crosby, this Beatle decided to play rock music when he first heard Elvis’s “Heartbreak Hotel.” Lennon loved the kitties, at one point owning six cats. The young Lennon played harmonica before he ever picked up a guitar, and he first met McCartney at a church in Liverpool. He was both a boy scout and a choir boy (McCartney auditioned for the choir—and was rejected!). Paul Maybe it’s because of Paul McCartney’s boyish good looks, but many don’t realize that he sings the soulful bluesy vocals on Beatles tracks like “Oh Darling” and “Helter Skelter,” not John. The only Beatle to graduate from secondary school is left-handed. He has four entries in the Guinness Book of World Records, that in various ways describe him as statistically the most successful songwriter of all time…though to this day he still can’t read musical notation. His appearance on the The Simpsons in 1995 was conditional on the character of Lisa becoming vegetarian. McCartney has been jailed several times, once in Japan for marijuana and once for setting a condom on fire (hey he just needed a little light!). If not for that jail stint in Japan, it’s said that he and his wife Linda Eastman never spent a night apart in 29 years of marriage. He’s said, “Every love song I write is for Linda.” You may not know that McCartney witnessed the 9/11 attacks in New York from an airplane.    George George Harrison was the lead guitarist for The Beatles. Sometimes called “the quiet one,” he made plenty of noise playing more than 26 different instruments. This gave the Beatles much of the variety in their sound, including introducing the Western world to the sounds of the sitar. Harrison helped produce the Monty Python movie Monty Python’s Life of Brian. He was married to the woman Clapton’s song “Lola” was written about. Ringo This blue-eyed vegetarian married a Bond girl and narrated the kid’s movie Thomas the Tank Engine, as well as acting in several films. Starr’s contribution to The Beatles is often overlooked (as drummers often are) though he is a favorite among percussionists. The list of famous drummers he influenced includes Phil Collins (Genesis), Steve Gorman (The Black Crowes), Don Henley (The Eagles), Dave Grohl (Nirvana), Danny Carey (Tool), Liberty DeVitto (Billy Joel’s band), Nicko McBrain (Iron Maiden), Eric Carr (Kiss), Phil Rudd (AC/DC), Orri Páll Dýrason (Sigur Rós), and Mike Portnoy (Dream Theater)…phew!

The blockquote tag

The blockquote tag is used to mark up quotations.

Extra Credit: Block Quotes

Blockquotes: The HTML tag for quotations

The <blockquote> tag is useful for marking up quotations. The default formatting is to indent the blockquotes on the left and right side to distinguish it from the other paragraphs.

Here’s an example of the blockquote tag used for a quotation:

<blockquote>

    Imagine. —Jonn Lennon

</blockquote>

Insert the following quotations from each Beatle, using the <blockquote> HTML tag, after each Beatle’s paragraph:

“Count your age by friends, not years. Count your life by smiles, not tears.”  by John Lennon

“Sadness isn’t sadness. It’s happiness in a black jacket. Tears are not tears. They’re balls of laughter dipped in salt. Death is not death. It’s life that’s jumped off a tall cliff.”  by Paul McCartney

“Anyway, there is one thing I have learned and that is not to dress uncomfortably, in styles which hurt: winklepicker shoes that cripple your feet and tight pants that squash your balls. Indian clothes are better.”   by George Harrison

“I had no schooling before I joined The Beatles and no schooling after The Beatles. Life is a great education.”  by Ringo Starr

The Easiest Way to Learn HTML and CSS
Hi! I'm Diane. I'm an experienced web design teacher in San Francisco. I produce music videos to help new coders learn HTML. I'm dedicated to helping you learn to code, with tons of songs, videos, tutorials and activities. All our tutorials are free and we're adding new lessons every day. Subscribe to get the latest post in your inbox.

HTML Lessons

©2013 Diane Presler. All rights reserved.