Previous
Next

Headings and paragraphs

HTML headings

HTML has six headings : <h1>, <h2>,<h3>,<h4>,<h5> and <h6>.

Different headings have different importance and different size.

<h1> is the bigger and most important heading whereas <h6> is the smaller and less important heading.

Thus the order is: <h1> > <h2> > <h3> > <h4> > <h5> > <h6>.

It is important to use headings to represent the document structure. For example the main title should be within an <h1> tag, a title within <h2> tag and a subtitle will be within an <h3> tag.

Here we should note, that as described in the word, headings should be used only for headings. You should not use headings to make words bigger. Later in the course, we will learn how to make words appear bigger.

HTML Paragraphs

Paragraphs in an HTML are defined by the <p> element. Paragraphs are used within the <body> element and have a start  <p>and an end tag. </p>.

It is important to note that by default, browsers leave some white space before and after a paragraph so that it is distinct from neighboring paragraphs. Every paragraph starts at a new line. Inside the <p> element you cannot format the appearance of your content by applying extra whitespaces or line breaks within a paragraph. Browser will remove these from the displaying page.

Example

Exercise

  1. Open your editor and the file  exersice01.3.01.html 
  2. Save the file as  exersice01.3.02.html, in the folder "Exercises"
  3. Copy the above code, paste it into the new file and save it
  4. Preview this page in your browser
  5. Add in your editor a new <h5> element and a new <p> element. You can use Lorem ipsum, the pseudo-Latin text
  6. Save and preview it in your browser 

Add empty space in your new paragraph and save the file. What do you see in your browser?

The empty space in the editor doesn't appear in the browser.
Previous
Next