Once the content is ready, you need to add the markup to the text to structure the document with HTML, head, subheads, and body. In this guide, we will explain and introduce the elements that you want to mark up in the text.

But, first, you should understand how important it is to select the elements semantically to describe the content meaning in the best possible way. This also ensures that the content is easy to access in various browsing environments, from traditional computers to mobile devices.

Let’s start with the marking of the text!

Paragraphs

The first and most important element of marking text is the Paragraphs. To indicate the paragraph, you need to use the p element.

To mark up the paragraph, you need to use the

tag at the beginning of the paragraph and a closing

Here is an example:

Choose the best fonts for your headings and paragraph to create the best web page . You also need to set the font size in a proper manner.

Browsers display every paragraph on new lines with a bit of space.

Note: In HTML, you can omit the closing

Headings

Other important elements are h1 and h2 , which indicates the headings for the content page. There are around six levels of headings, from h1 to h6 . When you add headings to your content, the browser uses them to create a document outline for the web page.

And assistive reading devices like screen readers use those document outlines to navigate through the page in seconds.  You should always start with the level 1 heading (h1) and then move to others as needed in the content.

Here is an example:

Type Design

Font Types

Choose the best fonts for your headings and paragraph to create the best web page. You also need to set the font size in a proper manner.

Arial

Description of the Arial font type.

Lists

If there are lists in your content, then HTML has elements for marking up the following three types of lists:

Unordered lists

Any list of names, examples, options, or thoughts comes under the unordered lists. In simple words, most lists in the content fall under this type of list. And when you mark up these types of lists, they will become visible as bullet points in the browser.

To mark up the unordered lists, you need to use the ul element. For example, to open the list, the opening tag is

, and to close the list, the closing tag

Also, each item in the list gets marked up as a list element l i . To open the list item, you need to use the

< li> open tag and at the end of the list item, you need to use the

Here is an example:

• Serif
• Sans-serif
• Script
• Display
<

li> Dingbats

Ordered lists

Ordered lists are used for the items that occur in a particular order. For example, it is used for step-by-step instructions. The element used for these types of lists is ol . For these lists, the browser automatically inserts the ordering before the list item.

Therefore, it becomes easy to rearrange the lists without changing their order. Make sure that the order list elements contain more than one list item.

Here is an example:

1. list 1
2. list 2

If you want a list to start at a number other than “1,” use the start attribute in the ol element, as shown here:

1. list 1
2. list 2
3. list 3

The resulting list items would be numbered 7, 8, and 9, consecutively.

Description lists

To list any type of name, values, definitions of terms, etc. description lists are used. The structure of these lists is a bit different from the above-mentioned lists. Also, the whole description list is marked up using dl element.

The content of a dl is some number of dt elements indicating the names and dd elements for their respective values.

Here is an example:

Linotype

Line-casting allowed types to be selected, used, and then recirculated into the machine automatically. This advance increased the speed of typesetting and printing dramatically.

Photocomposition

Typefaces are stored on film and then projected onto photo-sensitive paper. Lenses adjust the size of the type.

Digital type

Postscript emerged as a standard due to its support of graphics and its early support on the Macintosh computer and Apple laser printer.

The dl element is only allowed to contain dt and dd elements. It is OK to have multiple definitions with one term and vice versa. You cannot put headings or content-grouping elements (like paragraphs) in names ( dt ), but the value ( dd ) can contain any type of flow content.

Long quotations

If you there is any long quotation, you can mark it up using a blockquote element. Also, you can add the content within the blockquote elements in other elements, like paragraphs, headings, or lists.

Preformatted text

Most times, browsers ignore the whitespaces, including character spaces, and return to the source document. But, there is some content in which the white spaces are important for conveying the meaning.

Therefore, to add white spaces in the document preformatted text ( pre ) element is available. It is one of the unique elements that is displayed exactly as it is typed.

Figures

The figure element is useful for displaying a figure that may contain an image, a video, a code snippet, text, or even a table.

Here is an example of adding a figure element in the content.

You can attach the caption to the figure using the optional figcaption element above or below the figure content, as shown:

										
										body {
									

									

										background-color: #001;
									
									

										color: yellow; }