See this HTML tutorial that shows how to work with paragraphs using the p tag, page title using h1, and captions with h2 to h6 tags.
Titles, subtitles and paragraphs in HTML are extremely common elements on almost all websites. The good use of these elements of texts can bring positive results for the navigation in the site and the presentation of your HTML document. The tags p (paragraph), h1 (title) and h2 to h6 (subtitles) will be analyzed here.
HTML Paragraphs – Tag p
The p tag is used to structure text in paragraphs within an HTML document. At first all the texts should be within this tag, except:
- When the text is a title, in this new condition the tags <h1> a <h6> must be used.
- When the text is a quote, in this case use the <blockquote> tag.
- When the text is a list of bullets or list, in this case use <ul> and <li> or <ol> and <li>.
- When it is a caption, in this case use <legend>
Attributes
The p tag supports the following attributes:
- class – Allows association of a CSS formatting class
- id – Creates an identifier for the paragraph. Useful for making custom formatting.
- style – Creates an Inline CSS formatting.
Example of a document with three paragraphs, each using one of the above attributes:
<html xmlns = ” https://www.w3.org/1999/xhtml “>
<head>
<title> Structuring paragraphs with the p tag </ title >
<body>
<p class = “text “> Paragraph with an associated class </ p>
<p id =” highlight “> paragraph with a </ p>
<p style =” color: # ff0000 “> Paragraph with inline CSS formatting </ p>
</ body>
</ html>
Events
The p tag also supports the events: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, and onkeyup.
h1 Tag – HTML Page Title
The H1 tag is used to determine the title of the page. Conceptually there are 6 levels of titles, h1 being the highest of all, that is, it should be used to indicate the most important text of the page.
Example:
<h1> Title of the text of your page </ h1>
Considerations
- The default behavior of H1 is bold and font size xx
- Each page should have only one h1 tag, since it presupposes that each page has a single title
- Because it is a text tag, it supports CSS formatting of font, text block, background, box model, positioning, border, and layout properties.
- It should be placed at the beginning of the text. It does not make sense to use this tag in the middle of the text
- You can use the H1 tag Checker By Sitechecker to ensure correct markup.
h2 to h6 Tags – Page Subtitles
The tag h2 to h6 complements the list of tags used for titles. As these tags are sorted by levels it is correct to state that h2 should be used in a text more important than the h3 text and so on.
It is not necessary to make use of all 6 levels, except when the text is classified in many sections, thus requiring a very rigid documentation. Usually h1, h2 and h3 are used for most texts found on the web.
Example:
- <h2> Level 2 text title </ h2>
- <h3> Text title level 3 </ h3>
- <h2> Text title level 4 </ h2>
- <h5> Text title level 5 </ h5>
- <h6> Text title level 6 </ h6>
Considerations
- The standard behavior of tags h2 to h6 is bold and the size of the font varies by level, with h2 being larger and h6 being smaller
- These tags can be used more than once on the page, but without excess
- Because it is a text tag, it supports CSS formatting of font, text block, background, box model, positioning, border, and layout properties.
- It makes no sense to use h3 without using h2, conceptually we will only use h3 after using h1 and h2.
