Formatting Text & Creating Lists in html

Share:
Formatting Text or Text Decoration: HTML 5 documents include a lot of text, images, videos, multimedia, and other types of content, making it important for you to format blocks of content to lay a strong foundation for your web page. In chapter 2, you learned how to organize text in HTML 5 using block level elements, such as paragraphs and headings. In this chapter, you will explore other important elements which will help you format text properly.

Bold and Italics:


HTML 5 introduces some new formatting elements which were missing from previous versions. For instance, it is strongly recommended that you use < strong > </ strong > opening and closing tags for making a chunk of text bold instead of using < b > </ b >. Similarly, HTML 5 experts prefer using emphasize element tags < em > </ em > for italics rather than < i > </ i >. This effectively informs the browser that it is an HTML 5 document and that the content between the < em > and </ em > tags is in italics.

Line Breaks and Horizontal Rule:


HTML 5 normally ignores line breaks unless you use certain formatting elements or tags which break the line as needed. The most common of these elements is the line break element, commonly referred to as < br >. Look at example 2 to see what happens when we try to put some space between two words or lines within a paragraph without < br >.

Organizing Text in Lists:


You will create lists if you are looking to group similar information on your page. Lists allow your visitors to easily go through groups of information. You can include anything in the list from sets of information to links. There are four main types of lists: the unordered list, the ordered or numbered list, the definition list, and

The Unordered Lists:


An unordered or bulleted list contains one or more items prefaced by bullets. An unordered list requires at least three elements in the following order. < ul > the unordered list element < li > which marks each element in the list </ ul > the closing tag which indicates the unordered has ended The following example contains the markup for unordered lists.

Ordered or Numbered List:


A number prefaces all the items in an ordered or numbered list. An ordered list always has at least two items. Just like unordered lists, an ordered list contains the following three elements. < ol > the ordered list element < li > which marks each elements in the list </ ol > the closing tag indicating the ordered has ended

The Definition List:


Definition lists are used to group definitions and terms into a single list on a page. Again, the definition list requires the following three elements. < dl > the element which defines the definition list < dt > the element which marks the term in the definition list < dd > defines the term in the definition list The HTML for the definition list is as follows.

Nesting Lists:


Finally, there are nesting lists which are actually subcategories within lists. They are mostly used for creating navigation tools, site maps, table-of-contents table-of-contents for online papers and books, and outlines. You can combine any of the first three types of lists with each other to create a nested list. The following example starts with a numbered list, which defines things you need to do to lose weight, and further divides them into specific tasks.

 

 

No comments