Basic Text Markup in HTML(lesson 1)

In this topic we discuss the various text markup tags used in the HTML language. Some of them are listed below. Before begining you can read the difference between XHTML vs HTML.

Paragraphs
Line breaks
Headings
White space
Quotation
Font style
Font size
Character entities
Horizontal line
Meta element

The above mentioned are some of them, now we will discuss each one of them.

Paragraphs:

Text is normally organised into the paragraphs in the HTML. We can't insert text directly in to the body. So we choose the tag called paragraph. All the text document are inserted within its tag. It is denoted by <p>...........</p>.

Ex:

<html>

<title> Hello World </title>

<body>

<p>This is a story about a company that makes balloons go up. We were working on them when we ran out of air. The manager was checking on the company's supply list when he found out who could make them for us. He was about to order them when a balloon in the corner went up. We had found the extra air? We were glad our balloons all got blown up for the day </p>

</body>

</html>

output:

Line breaks:

Normally we write the paragraphs in several lines and if we want break point and start at next line, then we should use the break tag.

Break tag doesn't have any content so starting the tag and then closing that one is not necessary in this case. Just insert the tag <br/>.

Ex1: Without break tag.

<html>

<title> Hello World </title>

<body>

<p>Hi this is ttolearn

here you will learn about all basics about html

ohhh wait not only html, we will cover all programming languages</p>

</body>

</html>

output:

Ex2:With break command:

<html>

<title> Hello World </title>

<body>

<p>Hi this is ttolearn <br/>

here you will learn about all basics about html<br/>

ohhh wait not only html, we will cover all programming languages</p>

</body>

</html>

output:

Headings:

Heading tags are one of the most used tag in html. Begining of every section need to be highlighted and it should be represented in large text so we use the heading tag.

There are 6 levels of heading tags <h1>,<h2>,<h3>,<h4>,<h5>,<h6>

Ex:

<h1> Hello World</h1>

<h2> Hello World</h2>

<h3> Hello World</h3>

<h4> Hello World</h4>

<h5> Hello World</h5>

<h6> Hello World</h6>

output:

White space:

Browser will not consider spaces in between words. For preserving spaces we can use pre tag.

Ex:

<html>

<title> Hello World </title>

<body>

<p>How are you</p>

</body>

</html>

output:

Ex:with pre tag.

<html>

<title> Hello World </title>

<body>

<p><pre>How are you</pre></p>

</body>

</html>

output: