Basic Tags!

Content and stuff.

Introduction

We have a basic framework, ready for content. In this section we'll introduce some basic tags which will be useful for creating content.

Headings

HTML headings are created with the h tag. After the h we place a number to specify which level of heading it is.

<h1>Heading here</h1>

We may go down to 6 levels of headings. A level 1 heading ( h1 ) is the main heading for the document. Then level 2 headings ( h2 ) are sub headings. Level 3 is a sub sub heading and so on.

Each document should contain only a single h1 tag but may contain as many headings of the other levels as you like. You also don't have to use them in order if you don't want to and it's perfectly fine to skip levels.

It is possible (using CSS) to create your own headings beyond 6 levels but it is generally accepted that if you need more than 6 levels of headings to organise your content you should probably think about splitting it over several pages.

headings.html

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Headings Page</title>
  5. <meta name="description" content="Demonstrate headings">
  6. <meta name="keywords" content="html tutorial headings">
  7. </head>
  8. <body>
  9. <h1>This is a level 1 heading</h1>
  10. <h2>This is a level 2 heading</h2>
  11. <h2>This is another level 2 heading</h2>
  12. <h4>This is a level 4 heading</h4>
  13. </body>
  14. </html>

Let's break it down:

  • Lines 1 - 9, 14 and 15 - The basic template as discussed in the previous section.
  • Line 10 - A level 1 heading.
  • Line 11 - A level 2 heading.
  • Line 12 - Another level 2 heading.
  • Line 13 - A level 4 heading.
Headings Page

This is a level 1 heading

This is a level 2 heading

This is another level 2 heading

This is a level 4 heading

Paragraphs

Paragraphs are created in HTML using a p tag. You're probably starting to see a pattern here. Most tags are an abbreviation of the word which they represent. This makes it easier to remember them.

<p>My paragraph here</p>

paragraphs.html

  1. <body>
  2. <h1>Some Paragraphs</h1>
  3. <p>This is our first ever paragraph. It's not much to look at
  4. but it is a good place to start. It will all build from here.</p>
  5. <p>This is another paragraph. You'll notice that it is separated
  6. from the first one by a small amount of space.</p>
  7. </body>

Let's break it down:

  • Line 2 - A heading to start the page off.
  • Line 4 - Our first paragraph.
  • Line 7 - Our second paragraph.

Note: From here on in I will only include the HTML body in examples. This is just for the sake of brevity and when you write your own documents you should include the full HTML layout.

Paragraphs Example

Some Paragraphs

This is our first ever paragraph. It's not much to look at but it is a good place to start. It will all build from here.

This is another paragraph. You'll notice that it is separated from the first one by a small amount of space.

Formatting

You'll notice that in the example above we had the paragraphs over 2 lines in our code but it displayed differently within the browser. There are many different sizes which the browser may be depending on the size of the users screen and their browser window within the screen. The browser will always reformat the content to flow across the size of the screen. It will ignore extra whitespace and newlines in our code.

whitespace.html

  1. <body>
  2. <p>This is a paragragh    with several spaces in it.
  3. See how it displays however.</p>
  4. </body>
Whitespace Example

This is a paragragh with several spaces in it. See how it displays however.

Indenting and Spacing

You'll notice that in the examples above we have indented everything inside the body tags. We do this because it makes the code easier to read. When we introduce lists in section 9 you'll see that indenting can really help to make the structure of our code more apparent. You should get in the habit of indenting your code now. The easier your code is to read the harder it is to make silly mistakes like missing a closing tag.

You'll notice that in the first example ( headings.html ) we didn't add any newlines between the headings. In the second example ( paragraphs.html ) we did. Doing so spaces things out a bit and makes it easier to identify the different components of the document.

There is no specific convention for indneting or spacing out your code. Feel free to do so however suits you but always aim to have your code as clean and easy to read as possible. As your HTML gets larger and more complex you will appreciate the impact of this.

Summary

<h1> </h1>
Create a heading at the specified level.
<p> </p>
Create a paragraph.
Whitespace and Newlines
In general are ignored.
Indenting and Spacing
Should be used to make our HTML as clean and easy to read as possible.

Activities

Now let's introduce some content.

  • Add a few headings and paragraphs to the document you created in the previous section.
  • Add newlines and spaces to various places within your document and observe how they don't affect the way your document is presented in the browser.
  • Now play about with indenting and spacing out your code in different ways. Observe which ways make the HTML easier to read and which make it harder.

As we work through this tutorial, each section will add new tags allowing you to do more interesting things. My suggestion would be that you pick a topic or subject of interest to you and create a page about that. As you work through each section, add to and improve the page with the new tags you have learnt.