Paragraphs & Headers

HTML Elements

Element Description
Paragraph <p> These are used for paragraphs.
Main Header <h1> This is used for the main topic of the webpage. There should only be one of them. The text inside usually matches the <title> element.
Header Level 2 <h2> These are subheaders to the <h1>.
Header Level 3 <h3> These are subheaders to the <h2>.
Header Level 4 <h4> These are subheaders to the <h3>.
Header Level 5 <h5> These are subheaders to the <h4>.
Header Level 6 <h6> These are subheaders to the <h5>.

Paragraphs Back to top

Paragraphs are placed inside of <p> elements. They are block elements.

<p></p>

If you have more than one paragraph, you will need <p> elements for each paragraph.

<p>In 1971, George Lucas wanted to film an adaptation of the Flash Gordon serial, 
but could not obtain the rights, so he began developing his own space opera. After 
directing American Graffiti (1973), he wrote a two-page synopsis, which 20th Century 
Fox decided to invest in. By 1974, he had expanded the story into the first draft of 
a screenplay.</p>

<p>The 1977 movie's success led Lucas to make it the basis of an elaborate 
film serial. With the backstory he created for the sequel, Lucas decided that the 
series would be a trilogy of trilogies. Most of the main cast would return for the 
two additional installments of the original trilogy, which were self-financed by 
Lucasfilm.</p>

This is Highschool

Do I have to tell you...

Headers Back to top

There are six levels of headers. They are all block elements.

Each header is a different size.

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

The Main Header

<h1> is the main topic of your webpage. There should only be one <h1>.

<h1>Star Wars</h1>

Subheaders

You use subheaders to divide up the content on a webpage.

Some Examples

Here we are dividing up the main topic, Star Wars, into subsections, Characters, Ships and Planets.

<h1>Star Wars</h1>

<h2>Characters</h2>

<h2>Ships</h2>

<h2>Planets</h2>

Here we are dividing up Characters into subsections Rebels and Empire, the good and bad guys in Star Wars.

<h1>Star Wars</h1>

<h2>Characters</h2>

<h3>Rebels</h3>

<h3>Empire</h3>

<h2>Ships</h2>

<h2>Planets</h2>

You Use Some Headers More Than Others

Since you usually only need to divide up your content so much, most of the time, you only use <h1>, <h2> and <h3> headers.

<h4>, <h5> and <h6> are not used very much.

Capitalize Your Headers

Follow these rules when capitalizing your headers.

  1. Always capitalize the FIRST and LAST words in your header
  2. Capitalize all other words except for the following:
    • conjunctions (and, or, but, nor, yet, so, for)
    • articles (a, an, the)
    • prepositions (in, to, of, at, by, up, for, off, on)

Correct

<h2>Moves in Chess</h2>
<h2>The Thought Experiment</h2>
<h2>Wonders of Science</h2>

Incorrect

<h2>Moves in chess</h2>
<h2>the thought experiment</h2>
<h2>Wonders of science</h2>

Paragraph & Headers Example

It's a good idea to leave a blank line between your sections to make your HTML code more readable.

<h1>Star Wars</h1>
<p>Star Wars is an American epic space-opera multimedia franchise created by
George Lucas, which began with the eponymous 1977 film and quickly became a
worldwide pop-culture phenomenon.</p>

<h2>Characters</h2>
<p>Star Wars has had many iconic characters of all time.</p>

<h3>Rebels</h3>
<p>The Rebel Alliance is an organization of multiple planets and systems that
oppose the rule of the Galactic Empire, with which it engages in the five
year-long Galactic Civil War. These were the good guys!</p>

<h3>Empire</h3>
<p>The First Galactic Empire is an autocracy formed by Emperor Palpatine at the
end of the Clone Wars, replacing the old Galactic Republic. These were the bad
guys!</p>

<h2>Ships</h2>
<p>From the Millenium Falcon to the Tie Fighter, Star Wars has some of the most
recognizable space ships from any movie.</p>

<h2>Planets</h2>
<p>Battles in Star Wars take place on many worlds. The capital of the galaxy is
Coruscant. Some planets, like Alderaan, are even completely destroyed by the
Death Star.</p>