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 (
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
p tag) are used for blocks of text (just like in writing). Paragraphs are block elements by default.
small represents text that is less important, a side comment, copyright, or legal information.
Strong and Emphasis
strong is an inline element used to add importance to text. By default and most commonly, it makes the text bold.
emis an inline element that adds emphasis to text. By default and most commonly, it makes the text italic.
There are two types of basic lists—Unordered Lists and Ordered Lists. By default both are block elements.
li element represents a list item. If its parent element is an
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)
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)
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.
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.
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.
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.
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.
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.