Text sections/paragraphs in HTML
Different types of text sections
For controlling text sections in HTML, there is a number of tags available, each with its advantages. The only way for this to make sense, is by showing them.
The P tag
The P tag (paragraph) is a paragraph as we know them from books, newspapers, etc. where the text is separated into sections or paragraphs. Written text, using this tag, has a built in line break at the start and at the end of the section, and a default spacing equivalent margin-bottom around 5 px. A paragraph using the P tag will therefore always start with a new line, and whatever comes after will always start on a new line as well. If you look at the code, e.g. for two paragraphs containing two lines each, it looks like this:
On the page it looks like this:
You can remove the line break using STYLE="display: inline-block", but keep in mind, that this solution also removes line breaks using <BR> and insert indents instead.
The DIV tag
DIV is by far the text section being used the most. It is almost identical to the P tag, i.e. a paragraph with a built-in line break, only without the extra distance to the next paragraph. A section using the DIV tag will therefore always start on a new line, and what comes after will always start on a new line.
On the page it looks like this:
Notice the lack of distance between paragraphs that the P tag had. If you need the extra distance, it can be done using margin-bottom on the DIV's STYLE.
You can remove the line break using STYLE="display: inline-block", but keep in mind, that this solution also removes line breaks using <BR> and insert indents instead.
The SPAN tag
SPAN is a text section like P and DIV, but is used for text strings in paragraphs, e.g. underline or italic.
On the page it looks like this:
Notice that the second line in paragraph 1 is followed immediately by the line 1 in paragraph 2, with no space or line break as seen with the P and DIV tags.
Be aware that there are some limitations with SPAN. Styles on the SPAN is ignored in some cases. In that case, you have to try to get around the problem, e.g. by using DIV, which apparently does not have the same limitations.
The BLOCKQUOTE tag
BLOCKQUOTE is a highly useful tag for paragraphs being indented. In principle, it can't do anything that the DIV can't do as well, which is why you often see the DIV instead, but for pages containing many DIVs, the use of BLOCKQUOTE makes it easier to find our way around in the code.
The tag, like the P tag, has line breaks before and after, and som distance to the text before and after, and is really only different from the P tag by having a larger left margin. As code, it looks like this:
On the page it looks like this:
The PRE tag
PRE is a tag that shows the text with the font Courier, where all characters have the same width. Line breaks in the code are kept when displayed, contrary to the other tags that only have a line break when there is a BR tag. If there is multiple spaces in the code, these are displayed as multiple spaces, contrary to being reduced to one space, which is the normal way for browsers to interpret the code. Usually it is a tag being used for showing code strings, e.g. in HTML.
The tag, like the P tag, has a line break and some extra margin before and after the content in the tag. As code, it looks like this:
On the page it looks like this:
The CODE tag
CODE does the same as SPAN, only showing the text with Courier, where all characters have the same width. The tag was made to display code, but in regards to displaying text on a page, it does exactly the same as the tags SAMP and KBD. As code, it looks like this:
On the page it looks like this:
The SAMP tag
SAMP does the same as SPAN, only showing the text with Courier, where all characters have the same width. The tag was made to display output from a program, but in regards to displaying text on a page, it does exactly the same as the tags CODE and KBD. As code, it looks like this:
On the page it looks like this:
The KBD tag
KBD does the same as SPAN, only showing the text with Courier, where all characters have the same width. The tag was made to display input on keyboard, but in regards to displaying text on a page, it does exactly the same as the tags SAMP and CODE. As code, it looks like this:
On the page it looks like this:
The P tag
The P tag (paragraph) is a paragraph as we know them from books, newspapers, etc. where the text is separated into sections or paragraphs. Written text, using this tag, has a built in line break at the start and at the end of the section, and a default spacing equivalent margin-bottom around 5 px. A paragraph using the P tag will therefore always start with a new line, and whatever comes after will always start on a new line as well. If you look at the code, e.g. for two paragraphs containing two lines each, it looks like this:
<P>This is paragraph 1, line 1<BR>and this is paragraph 1, line 2, in a P tag.</P>
<P>This is paragraph 2, line 1<BR>and this is paragraph 2, line 2, in a P tag.</P>
<P>This is paragraph 2, line 1<BR>and this is paragraph 2, line 2, in a P tag.</P>
On the page it looks like this:
This is paragraph 1, line 1
and this is paragraph 1, line 2, in a P tag.
This is paragraph 1, line 1
and this is paragraph 2, line 2, in a P tag.
You can remove the line break using STYLE="display: inline-block", but keep in mind, that this solution also removes line breaks using <BR> and insert indents instead.
The DIV tag
DIV is by far the text section being used the most. It is almost identical to the P tag, i.e. a paragraph with a built-in line break, only without the extra distance to the next paragraph. A section using the DIV tag will therefore always start on a new line, and what comes after will always start on a new line.
<DIV>This is paragraph 1, line 1<BR>and this is paragraph 1, line 2, in a DIV tag.</DIV>
<DIV>This is paragraph 2, line 1<BR>and this is paragraph 2, line 2, in a DIV tag.</DIV>
<DIV>This is paragraph 2, line 1<BR>and this is paragraph 2, line 2, in a DIV tag.</DIV>
On the page it looks like this:
This is paragraph 1, line 1
and this is paragraph 1, line 2, in a DIV tag.
and this is paragraph 1, line 2, in a DIV tag.
This is paragraph 2, line 1
and this is paragraph 2, line 2, in a DIV tag.
and this is paragraph 2, line 2, in a DIV tag.
Notice the lack of distance between paragraphs that the P tag had. If you need the extra distance, it can be done using margin-bottom on the DIV's STYLE.
You can remove the line break using STYLE="display: inline-block", but keep in mind, that this solution also removes line breaks using <BR> and insert indents instead.
The SPAN tag
SPAN is a text section like P and DIV, but is used for text strings in paragraphs, e.g. underline or italic.
<DIV>This is paragraph 1, line 1<BR>and this is paragraph 1, line 2, in a SPAN tag.</P>
<P>This is paragraph 2, line 1<BR>and this is paragraph 2, line 2, in a SPAN tag.</P>
<P>This is paragraph 2, line 1<BR>and this is paragraph 2, line 2, in a SPAN tag.</P>
On the page it looks like this:
This is paragraph 1, line 1
and this is paragraph 1, line 2, in a SPAN tag.
and this is paragraph 1, line 2, in a SPAN tag.
This is paragraph 2, line 1
and this is paragraph 2, line 2, in a SPAN tag.
and this is paragraph 2, line 2, in a SPAN tag.
Notice that the second line in paragraph 1 is followed immediately by the line 1 in paragraph 2, with no space or line break as seen with the P and DIV tags.
Be aware that there are some limitations with SPAN. Styles on the SPAN is ignored in some cases. In that case, you have to try to get around the problem, e.g. by using DIV, which apparently does not have the same limitations.
The BLOCKQUOTE tag
BLOCKQUOTE is a highly useful tag for paragraphs being indented. In principle, it can't do anything that the DIV can't do as well, which is why you often see the DIV instead, but for pages containing many DIVs, the use of BLOCKQUOTE makes it easier to find our way around in the code.
The tag, like the P tag, has line breaks before and after, and som distance to the text before and after, and is really only different from the P tag by having a larger left margin. As code, it looks like this:
Here the text is normal. <BLOCKQUOTE>Here the text is in a BLOCKQUOTE,</BLOCKQUOTE> and here the text returns to normal.
On the page it looks like this:
Here the text is normal.
Here the text is in a BLOCKQUOTE,and here the text returns to normal.
The PRE tag
PRE is a tag that shows the text with the font Courier, where all characters have the same width. Line breaks in the code are kept when displayed, contrary to the other tags that only have a line break when there is a BR tag. If there is multiple spaces in the code, these are displayed as multiple spaces, contrary to being reduced to one space, which is the normal way for browsers to interpret the code. Usually it is a tag being used for showing code strings, e.g. in HTML.
The tag, like the P tag, has a line break and some extra margin before and after the content in the tag. As code, it looks like this:
Here the text is normal.
<PRE>This is line 1 of the text in PRE.
This is line 2 of the text in PRE,</PRE>
and here the text returns to normal.
<PRE>This is line 1 of the text in PRE.
This is line 2 of the text in PRE,</PRE>
and here the text returns to normal.
On the page it looks like this:
Here the text is normal.
This is line 1 of the text in PRE. This is line 2 of the text in PRE,and here the text returns to normal.
The CODE tag
CODE does the same as SPAN, only showing the text with Courier, where all characters have the same width. The tag was made to display code, but in regards to displaying text on a page, it does exactly the same as the tags SAMP and KBD. As code, it looks like this:
Here the text is normal.
<CODE>This is line 1 of the text in CODE.
This is line 2 of the text in CODE,</CODE>
and here the text returns to normal.
<CODE>This is line 1 of the text in CODE.
This is line 2 of the text in CODE,</CODE>
and here the text returns to normal.
On the page it looks like this:
Here the text is normal.
This is line 1 of the text in CODE.
This is line 2 of the text in CODE, and here the text returns to normal.The SAMP tag
SAMP does the same as SPAN, only showing the text with Courier, where all characters have the same width. The tag was made to display output from a program, but in regards to displaying text on a page, it does exactly the same as the tags CODE and KBD. As code, it looks like this:
Here the text is normal.
<SAMP>This is line 1 of the text in SAMP.
This is line 2 of the text in SAMP,</SAMP>
and here the text returns to normal.
<SAMP>This is line 1 of the text in SAMP.
This is line 2 of the text in SAMP,</SAMP>
and here the text returns to normal.
On the page it looks like this:
Here the text is normal.
This is line 1 of the text in SAMP.
This is line 2 of the text in SAMP,
and here the text returns to normal.
The KBD tag
KBD does the same as SPAN, only showing the text with Courier, where all characters have the same width. The tag was made to display input on keyboard, but in regards to displaying text on a page, it does exactly the same as the tags SAMP and CODE. As code, it looks like this:
Here the text is normal.
<KBD>This is line 1 of the text in KBD.
Her kommer linje 2 af teksten i KBD,</KBD>
and here the text returns to normal.
<KBD>This is line 1 of the text in KBD.
Her kommer linje 2 af teksten i KBD,</KBD>
and here the text returns to normal.
On the page it looks like this:
Here the text is normal.
This is line 1 of the text in KBD.
This is line 2 of the text in KBD,
and here the text returns to normal.