Kushal Das

Tags in HTML (Paragraphs ,Text Formatting , Quotation and Citation In HTML)

An article on the most used tags in HTML .

Kushal Das's photo
Kushal Das
·

6 min read

Tags in HTML (Paragraphs ,Text Formatting , Quotation and Citation In HTML)

Table of contents

What are HTML Tags?

HTML tags are simple instructions that tell a web browser how to format text. Like heading tag, paragraph tag, bold tag, Style tag etc.

How Do Web Pages Read HTML Tags?

First, the HTML code reads by Servers to understand and render content. It will read the HTML from top to bottom, much like how you’re reading this article.

Basically, there are three parts in html tag -

Opening tag that denotes using <> this symbol.
Content the short instructions about your webpage.
Closing tag that denotes using </> this symbol.

Example :

<tagname> Write your content here </tagname>

Paragraphs Tag :

<p>

  • It defines Paragraphs.

  • Syntax :

      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>

<br>

  • It will help us to break the lines in the webpage.

  • Syntax :

<p>Lorem ipsum dolor sit, amet consectetur <br>
adipisicing elit.</p>

<hr>

  • This <hr> tag will help us to create a break in an HTML page.

  • It will often be displayed as a horizontal rule.

  • There is no end tag in <hr>.

  • Syntax :

<p> Lorem ipsum dolor sit, <hr> amet consectetur adipisicing elit.  </P>

<pre>

  • The <pre> HTML element represents preformatted text which is to be presented exactly as written in the HTML file means, whatever you have written in html file it will be exactly displayed on the webpage.
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks
</pre>

Final Output (Paragraphs Tag):


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> P tag  In HTML</title>
</head>
<body>

 <!-- <P> tag example -->
 <p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos asperiores, dolorem porro consequuntur molestias accusantium. Voluptate, doloribus alias quasi sequi quidem repudiandae vitae cum, fugit itaque pariatur, nemo laborum vel.
</p>

 <!-- <br> tag example -->
 <p> Lorem ipsum dolor sit, <br> amet consectetur adipisicing elit.<p>

 <!-- <hr> tag example -->
 <p> Lorem ipsum dolor sit, <hr> amet consectetur adipisicing elit.  </P>

 <!-- <Pre> tag example -->
<pre>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
  when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<pre>
</body>
</html>

Live demo (Paragraphs Tag) :

Formatting In HTML :

  • It helps us to design special types of text.

<b>

  • It helps us to make the letter in bold.
<b> To make Bold text </b>

<strong>

  • It is also doing the same thing that is text in bold format but it denotes that text is very important.
<strong>Important text so that browser will understand this is Important</strong>

<i>

  • To make the text in Italic format.
<i> To make Italic text </i>

<em>

  • It will Emphasize text so that the browser will understand this is Emphasized text.
<em> Emphasized text so that browser will understand this is Emphasized text</em>

<mark>

  • To make the Marked text in a document.
<mark> To Make Marked text </mark>

<small>

  • To make a smaller text.
<small> To make Smaller text</small>

<del>

  • It defines text that has been deleted from a document.
<del> To make text in Deleted format </del>

<ins>

  • It defines a text that has been inserted into a document.
<ins> To make Inserted text </ins>

<sub>

  • It defines subscript text.

  • It is used in chemical formulas, like H2O.

<p> To make Subscript text H <sub> 2 </sub> O </p>

<sup>

  • It defines superscript text.

  • Superscript text can be used in different things like x pow 2( X 2).

<p>To make Superscript text X <sup>2</sup> </p>

<q>

  • It will make short quotations in a word or line.
 <q>make short quotation in a word or line</q>

<blockquote>

  • It defines a section that is quoted from another source.

  • It takes one attribute called cite which helps a URL for the source of the quotation.

  • <blockquote> use CSS to make the quotation before and after the line.

  • This tag in HTML4.1 defines the long quotation i.e. quotations that span multiple lines. But in HTML5, the <blockquote> tag specifies the section that is quoted from another source.

<blockquote> 
The main reason behind creating this repository is so that people can find their projects all at one place with the source code.
</blockquote>


`<abbr>`  tag is used for indicating an abbreviation.


<p>The Full from of World Wide Web is <abbr title="World Wide Web">WWW</abbr></p>

<address>

  • It defines the contact information of a person or document or article.

  • The text in the <address> element usually renders in italic in browsers.

<address>
Kushal Das.<br>
I love to write code:<br>
daskushal.com<br>
</address>

<cite>

  • It specifies a citation. It can be defined as the title of a work.

  • The text in the <cite> element usually renders in italics.

I was <cite>born</cite> in <cite>2000</cite>

Final Output :

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formatting in HTML</title>
</head>
<body>

<!--  <b> tag  -->
<b> To make Bold text </b> <br>

<!--  <strong> tag  -->
<strong> Important text so that browser will understand this is Important</strong><br>

<!--  <i> tag  -->
<i> - To make Italic text </i><br>

<!--  <em> tag  -->
<em> Emphasized text so that browser will understand this is Emphasized text</em><br>

<!--  <mark> tag  --> 
<mark> To Make Marked text </mark><br>

<!--  <small> tag  -->
<small> To make Smaller text</small><br>

<!--  <del> tag  -->
<del> To make text in Deleted format </del><br>

 <!--  <ins> tag  -->
<ins> To make Inserted text </ins><br>

<!--  <sub> tag  -->
<P> To make Subscript text H <sub> 2 </sub> O</sub></P>

<!--  <sup> tag  -->
<p> To make Superscript text X <sup> 2 </sup></p>

<!--  <q> tag  -->
<P>make short <q>quotation</q> in a word or line</p>

<!--  <blockquote>  tag  -->

<blockquote> 
        The main reason behind creating this repository is so that people can find their projects all at one place with the source code.
    </blockquote>

<!--- <abbr>  -->

<p>The Full from of World Wide Web is <abbr title="World Wide Web">WWW</abbr></p>

<!--- <address>  --->
<address>
Kushal Das.<br>
I love to write code:<br>
daskushal.com<br>
</address>

<!--- cite   --->

<p>I was <cite>born</cite> in  <cite>2000</cite></p>

</body>
</html>

Live Demo (Formatting ) :

Thanks for reading to the end! 💖

I hope these things help you as much as I do. Please drop a comment 💬 about your feedback or ideas, it will help me a lot to draw experience on next article.

Let's connect! Find me on the web 🔗

If you have any Queries or Suggestions, feel free to reach out to me.

Happy Coding :)❤️

Did you find this article valuable?

Support Kushal Das by becoming a sponsor. Any amount is appreciated!

HTML5Web Developmentiwritecode#kushalairtcleHTML tags