Basic HTML Text Elements
Just as you might assign different roles to different types of text in a book or a magazine, so too HTML includes a number of different elements for identifying the roles of text content such as headings, paragraphs, lists, and more.
Headings
Headings are used as section titles in an HTML document. In general, they should describe the content that follows. There are six levels of headings (h1 - h6) and they can be used hierarchically to create multiple levels sub-sections within the content. Headings are block elements by default
It's important to choose heading based on their meaning in the document hierarchy, rather than on the font-size. Font-size can be changed with CSS.
In general, there should only be one h1 per page, and it serves as the page title.
It is important to remember that though headings have default styles, they should not be chosen based on appearance. (That's the job of CSS.) Instead, they denote the level of importance of the text as a title or sub-title.
Paragraph and Small
Paragraphs
Paragraphs (the p tag) are used for blocks of text (just like in writing). Paragraphs are block elements by default.
Small
The small represents text that is less important, a side comment, copyright, or legal information.
Strong and Emphasis
Strong
strong is an inline element used to add importance to text. By default and most commonly, it makes the text bold.
Emphasis
emis an inline element that adds emphasis to text. By default and most commonly, it makes the text italic.
Lists
There are two types of basic lists—Unordered Lists and Ordered Lists. By default both are block elements.
The li element represents a list item. If its parent element is an ol or ul element, then the element is an item of the parent element's list, as defined for those elements.
Lists may be nested within lists to create a hierarchy of sub-lists.
Unordered Lists (ul)
The ul element represents a list of items, where the order of the items is not important — that is, where changing the order would not materially change the meaning of the list. By default, list items within an unordered lists are denoted with the bullet symbol.
Ordered Lists (ol)
The ol element represents a list of items, where the items have been intentionally ordered, such that changing the order would change the meaning of the list.
Breaking Elements
While not themselves text, these self-closing elements indicate breaks in the flow of text or information. As such, they each carry a very specific meaning for the content into which they are placed.
It is important to only use these elements when their use applies real meaning to the document. They are not meant to be used for decorative or stylistic reasons.
Horizontal Rule
The hr element is a divider that represents a paragraph-level thematic break. The hr tag is self-closing and does not require a separate closing tag.
The hr tag should not be used any place you want a line between content (for that you should apply a border with CSS). Rather it is important to use it only where there is a shift in topics between body-copy elements.
Break
The br represents a return or break to a new line that is integral to the text content. The br tag is self-closing and does not require a separate closing tag.
The br tag should not be used as a generic line-break, but only in content like poetry or mailing addresses where the line breaks could be considered a part of the text's message.