Submodule 1.3: Simple HTML file : Headings and paragraphs

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

Open your editor and the file exersice01.3.01.html
Save the file as exersice01.3.02.html, in the folder "Exercises"
Copy the above code, paste it into the new file and save it
Preview this page in your browser
Add in your editor a new <h5> element and a new <p> element. You can use Lorem ipsum, the pseudo-Latin text
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.

Web Design [HTML]

Headings and paragraphs

HTML headings

HTML Paragraphs

Example

Giới thiệu

Dịch vụ

Download App MightyID