Text, the most common element in an HTML document, can be styled to make it visually appealing, improve legibility and be easier to read.
Paragraph styles
The <p> tag is used to indicate the beginning of a text paragraph and is the </p> tag is used at the end of the paragraph. Text for the paragraph is placed between these tags.
<p>This is a paragraph of text.</p>This is a paragraph of text.
Line breaks
Text lines can be manually split using the <br> line break tag. The line break requires no closing tag.
<p>This is a paragraph with a manual line break <br>the rest of the text appears on the next line.</p>This is a paragraph with a manual line break
the rest of the text appears on the next line.
Bold, Italic and Bold Italic
Paragraph text can be styled using bold <b> or <strong>, italic <i> or <em> and bold italic <strong><em> or <b><i> styles.
<p>This is a paragraph of text with <em>italic</em>,<strong> bold</strong> and<strong><em> bold italic</em></strong> texts.</p>This is a paragraph of text with italic, bold and bold italic texts.
Paragraph formatting styles
This list show formatting that can be applied to paragraph texts:
| <b> | Styles text as bold | ||
| <strong> | Important text (bold) | ||
| <i> | Styles text as italic | ||
| <em> | Emphasized text (italic) | ||
| <small> | Small text | ||
| <mark> | Marked texts | ||
| <del> | Deleted text | ||
| <ins> | Inserted text | ||
| <sub> | Subscript | ||
| <sup> | Superscript | ||
Headers
Headlines are defined using the <h1-6> header tags. These tags define the hierarchy of each headline within a document, <h1> headlines being the most important and <h6> being the least important.
<h1>H1 Header</h1> <h2>H2 Header</h2> <h3>H3 Header</h3> <h4>H4 Header</h4> <h5>H5 Header</h5> <h6>H6 Header</h6>Header markup allows assistive technologies, such as search engines, to define the importance of each headline based on its tag. The <h1> headline will always be classified as more important than a headline with an <h2> tag and <h2> tagged headline will always be more important than <h3> headline, etc.
Headlines can be defined using any font, size, weight or color but as a general rule, they should follow the visual hierarchy of h1-h6.
Text areas
These tags are used to define an area of written content with a specific attribute, often these have styling applied to them.
| <abbr> | Defines an abbreviation or acronym | ||
| <address> | Defines the contact information of an author | ||
| <blockquote> | Defines a section that is quoted from another source | ||
| <cite> | Defines the title of the work | ||
| <pre> | Defines an area of preformatted text | ||
| <q> | Defines a short inline quotation | ||
Lists
The two most common types of lists are unordered lists and ordered lists.
Unordered lists display each list item using a marker (by default a bullet list).
Ordered lists display each item listed either numerical (1, 2, 3, 4…), alphabetical (A, B, C, D…) or by using Roman numerals (i, ii, iii, iv…).
Both these list types are is defined firstly by the list type either unordered list <ul> or ordered list <ol> and then followed by the list items <li>.
Unordered list
<ul><li> List item 1 </li><li> List item 2 </li><li> List item 3 </li> </ul>- List item 1
- List item 2
- List item 3
Ordered list
<ol><li> List item 1 </li><li> List item 2 </li><li> List item 3 </li> </ol>- List item 1
- List item 2
- List item 3
Order list types
Ordered lists can be displayed using numbers, letters or roman numerals. The starting value for a list can be defined as well as the order in which the list items are ordered.
| <ol start=”value”> | Starts list from a specified value | |||
| <ol reversed> | Reverses the list order | |||
| <ol type=”1″> | List with numbers (default) | |||
| <ol type=”A”> | List with capital letters | |||
| <ol type=”a”> | List with lowercase letters | |||
| <ol type=”I”> | List with capital roman numerals | |||
| <ol type=”i”> | List with lowercase roman numerals | |||
Description list (definition list)
Description lists is another list type which is used specifically to define a list of items where each item has a description. For example in a glossary where a term is followed by a description of the term.
To define this list type we use Description List <dl> </dl> , nested in which we use the Description Term <dt> to define the title of the term, followed by Description Data <dd> to define the description data for the term.
<dl> <dt>Item 1</dt> <dd>Description for item 1</dd> <dt>Item 2</dt> <dd>Description for item 1</dd> </dl>- Item 1
- Description for item 1
- Item 2
- Description for item 1
Next step
HTML – 3 – Tables