Marking Up Text

This section will cover some essential HTML elements you'll use for marking up the text.

Comments

Comments are used in an HTML document to give a description of our code and for our own references(notes). Comments are always ignored by the browser which means anything written as a comment is not displayed on our webpage.

Comments in HTML starts with <!-- and end with -->.

<!--This is a comment. Comments are not displayed in the browser-->

Working with Tags

Headings

An HTML heading tag is used to define the headings of our webpage. Headings are usually given to attract the viewer's attention to a particular tagline that describes the website or the product associated with it.

There are six levels of headings defined by HTML. These 6 heading elements are h1, h2, h3, h4, h5, and h6 with h1 being the highest level and h6 being the least.

• <h1> is used for the main heading. (Biggest in size)

• <h2> is used for subheadings, if there are further sections under the subheadings then the <h3> elements are used. . . .

• <h6> for the small heading (smallest one).

An h1 tag is critical! The heading acts as an information guide for the search engine bots. It should include a highly searched keyword. Header tags are important for SEO because they help Google understand your content, but also because they make your page more user-friendly – by making your content more readable and accessible.

Paragraphs

The <p> tag is used for containing the text or content in a paragraph format, making it easier to read and distinct from other content.

<p>This is a 1st paragraph</p> <p>This is a 2nd paragraph</p>

Browsers automatically add a single blank line before and after each <p> element.

Lists

Lists as the name suggests are used to group a set of related items or content in an order, which could be either random or specific one.

The most common list types are ordered and unordered lists:

• Unordered lists are lists where the order of the items doesn't matter, such as a shopping list with multiple items. These are wrapped in a <ul> Tag.

  
  

• Ordered lists are the lists where the order of the items does matter, such as a recipe. These are wrapped in an <ol> Tag.

Each item inside the lists is put inside an <li> (list item) element.

Below is an example of Lists in HTML with output in right.

List Attributes

reversed: It defines that the order will be descending.

start: It defines from which number or alphabet the order will start.

type: It defines which type(1, A, a, I, and i) of the order you want in your list of numeric, alphabetic, or roman numbers.