HTML CSS JS

HTML Heading, Paragraph, Comments, Lists

In this lesson we are going to learn about the most important HTML tags to compose an article. Test the codes below in your existing Hello World! program written in the previous chapter or use the online HTML editor to edit them in real time.

HTML Headings

html headingUse the headings to set titles and subheadings. Mark with h1 the primary title on the page. It's recommended to have only one h1 on the page that is similar to the <title> head tag to show Google and other search engines what the page is about.

<h1>An example heading</h1>

There are 6 different heading sizes, the one marked with 1 being the most important in hierarchy.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

To change the different heading sizes all you need to do is change h2 to whatever like h5. Headings go from largest (h1) to smallest (h6). Also headings are good to use when you want to make something big like a title of your web page.


Another thing that you can do with headings is something that we haven't done before. You can make the text centered or to the right side of the screen.

<h3 style="text-align: center;">Check this out!</h3>

Line Breaks

When you are making a web page you just might want to make the browser go to a new line. If you have tried that you might see that just pressing enter doesn't work. You have to insert a tag to do that for you.

Check <br /> 
this <br /> out!

As you can see the br tag is one of the few tags that you don't need to close. Also if you need to you can use more than one br tag at once to have a bigger space.

Paragraphs 

There is also another tag that you can use to make line breaks. It is called the paragraph tag.

<p>Check</p>
<p>this</p>
<p>out!</p>

The p tag makes a bigger line break than the br tag. The paragraph tag is normally used when you are writing paragraphs. At the beginning of the paragraph you would begin the p tag and at the end you would end it. That way it would make a line break at the beginning and end of your paragraph.

There is one more use for the p tags. You can use them to align things just like the heading tags.

<p style="text-align: left;">Check</p>
<p style="text-align: center;">this</p>
<p style="text-align: right;">out!</p>

Horizontal Lines

I don't know if you have noticed, but to separate different things in my tutorial I use this gray line called a horizontal line. Use horizontal line to section the document.

All you have to do is put in the hr tag and then you will have a horizontal line on your web page. You don't even have to close it.

Check 
<hr />
this <hr />out!

You can do a few more things with the hr tag.

<hr width="20%">
<hr width="50%">
<hr width="75%">

You can put any percent between 0 - 100 in there if you want to.

HTML Comments

Have you ever wanted to put something in your HTML code but you didn't want other people to see it, like a note to yourself? Well you can with comments. If the person views your source code they can see it, but normal people just looking at your web page won't.

<!--This is a comment!-->Check<!--Here is another one!--> this <!--And another!-->
Out!<!--If you just look at this page you can't see this!-->

Lists

Lists are used for website navigation. This is how to make lists that might look something like this:


Here is your first unordered list!

<ul>
  <li>Volkswagen</li>
  <li>Skoda</li>
  <li>Chevrolet</li>
</ul>

I will now explain it. The <ul> tag means that it is the start of an unordered list. The <li> tag says that this is a list item. You can add as many <li> tags as you want in your list.


Instead of using the discs for the bullets you can use squares.

<ul type="square">
  <li>Volkswagen</li>
  <li>Skoda</li>
  <li>Chevrolet</li>
</ul>

You can also use non filled-in circles.

<ul type="circle">
  <li>Volkswagen</li>
  <li>Skoda</li>
  <li>Chevrolet</li>
</ul>

Finally, if you want, you can use numbers instead of bullets for your list, which is called an ordered list.

<ol>
  <li>Volkswagen</li>
  <li>Skoda</li>
  <li>Chevrolet</li>
</ol>

Start the HTML List Generator