To create a paragraph in HTML we use the <p> tag, this tag can be placed only inside the body of the html document since it's a visible field to the users.
A paragraph is a distinct and separated area of text, browser are automatically separating with space two or more paragraphs (exactly how it's actually happening between this text and the one above).
To avoid separation of lines between paragraphs we use the <br> tag, this add a break line to the text and start a new text line with the space in between, you can use several <br> tags to simulate the same effect of the <p> tag. While the <p> tag contains the text you want to show in the page and needs to be closed with the ending tag </p> the <br> tag is empty therefore doesn't have an ending tag.
<!DOCTYPE html>
<html>
<head>
<title>Title of the page</title>
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3 with a <br> break in it</p>
</body>
</html>
There are several formatting tags that can be used to format text in webpage, in the same way the text tags can have different attribute that allow to do the exact same things. Take as example the <p> tag, i can align centrally the text using <p align="center>My centered text</p> or i can use an extra tag <center> in between like this <p><center>My centered text. I personally prefer the first way, less tags to close, less text to write, but sometimes those tags are very useful.
So let's see what other separate tags can help formatting text:
The bold tag <b> and <strong> are very similar, return the text like this.
The <big> tag helps when you want the text bigger as here.
In the same way you can use the tag <small> to have smaller text.
The <i> and <em> tags makes the text italic.
The <sub> and <sup> tags are used respectively if you want to have subscripted or superscripted text.
To underline a text we use the <u> and <ins> tag that gives an underlined text as this.
And let's finish with the <del> tags that return deleted text, a text marked with a line in between to identify a correction or something not correct.
Obviously we can use more than one tag at the time for the same text to create unique combinations in our documents.
The 2 below return the same centered text:
<p align="center>My centered text</p>
<p><center>My centered text</center></p>
And let's see an example of all in HTML:
<p><b>A bold text</b> in paragraph 1</p>
<p><big>Bigger text</big> in paragraph 2</p>
<p>Paragraph 3 with <i>Italic text</i> in it</p>
<p>In paragraph 4 we can have <sub>subscripted</sub> text and <sup>superscripted</sup> text.</p>
<p>And in paragraph 5 we have <u>underlined</u> and <del>deleted text</del></p>
And the result of it in a webpage:
Very important for the SEO on page the HTML Headings are used to identify the title of a paragraph in a page, search engines are using them to understand what the page is about and give great importance to it. It is infact suggested to use heading together with the specific keywords we want to be listed in the search engines.
Headings are represented in HTML by the tags <h1> <h2> <h3> <h4> <h5> <h6> with <h1> being the bigger and more important heading till <h6>, the smaller and less important. In term of SEO it's recommended to use them the most naturally possible, for titles and headings only rather than for the whole text or just to make the text bigger. The reason is because search engines use the headings to understand the structure and the content of the website.
Headings have a default size of about 32 pixels for the H1, 24 pixels for H2, 19 pixels for H3, until to the circa 11 pixels of H6. This numbers can be changed via CSS, changing the tags in what we like best as in the example below:
h1 { font-size: 40px; font-weight: bold; color: blue; text-align: center; }
This will return an H1 with a size of 40 pixels, bold, aligned centrally and in blue color.
