How to Structure Text in HTML

 HTML has two sections. Head and Body section. We can structure text in body section where we design our website.

There are many elements to structure website. The most commonly used elements are:

  • <p>
  • <em>
  • <b>
  • <strong>

<p> tag:

<p> stands for paragraph. It also has closing tag <p></p>. It is used to write paragraph in our website.

For Example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
  </head>
  <body>
	<h3>Hello World</h3>
	<p>My name is junaid and I'm 15 year old.</p>
  </body>
</html>

Output:

Hello World

My name is junaid and I'm 15 year old.


<em> tag:

<em> stands for emphasis. It also have a closing tag <em></em>. It is used to emphasis the word or statment.

For Example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
  </head>
  <body>
	<h3>Hello Friends</h3>
	<p>My name is <em>junaid and I read in</em> class 10.</p>
  </body>
</html>

Output:

Hello Friends

My name is junaid and I read in class 10.


<b> tag:

<b> stands for bold. It also have a closing tag <b></b>. It is used to bold the text in website.

For Example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
  </head>
  <body>
	<h3>Hello World</h3>
	<p>My name is <b>junaid</b>.</p>
  </body>
</html>

Output:

Hello World

My name is junaid.


<strong> tag:

<strong> tag also have a closing tag <strong></strong>. It has strong importance on word or statment.

For Example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
  </head>
  <body>
	<h3>Hello Friends</h3>
	<p>My name is junaid and <strong>I'm a programmer</strong>.</p>
  </body>
</html>

Output:

Hello Friend

My name is junaid and I’m a programmer.


What is the difference between bold and strong tag?

The difference between the two tags is that the bold tag is intended to draw attention to the text while the strong tag also highlights the text semantically and indicates that this is an important word.


There are more elements to structure the website. The link is given below:

https://www.w3schools.com/tags/ref_byfunc.asp

Comments

Post a Comment

Popular Posts