HTML Text Formatting Elements and Tags

Text Formatting Elements and Tags

 

HTML5 Elements 

An Element in HTML is the collection of start tag, its attributes, an end tag plus everything in between the tags.

HTML tags are most important keywords and set of characters which show how web browser will format and display the content. With the help of tags, a web browser can determine an HTML content and a simple content. HTML tags have three main parts: opening tag, content and closing tag. But some tags of HTML are unclosed tags.

When a web browser reads an HTML document, browser can reads it from top to bottom and left to right. HTML tags are used to create the HTML documents and display their properties. Each HTML tags have different properties.

An HTML file must have some necessary tags so that web browser can differentiate between a simple text and HTML text. You can use as many tags you want as per your code requirement.

  • All the HTML tags always enclosed within < > these brackets.
  • Every tag in HTML perform different tasks.
  • If you have used an open tag <tag>, then you must use a close tag </tag> (except some tags)

The first line on the top, <!DOCTYPE html>, is a document type declaration. And this line lets the browser know which flavor of HTML you’re using

Syntax

<tag> content </tag>

Unclosed HTML Tags

Some HTML tags are not closed, for example  br and hr tags are not closed.

<br> Tag: br use  for break the line, it breaks the line of the code that we write.

<hr> Tag: hr stands for Horizontal Rule. This tag is used to put a horizontal  line across the webpage .

HTML5  Text Formatting Elements

The HTML tags’ define how the text is to be displayed on a web page. Text in HTML can be formatted in various ways. Text can be made heading, can be written in paragraph or can be presented in many distinguishable types.

The most common tags used with text are

  • <p>
  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6>,
  • <strong>,
  • <em>,
  • <abbr>,
  • <acronym>,
  • <address>,
  • <bdo>,
  • <blockquote>,
  • <cite>,
  • <q>,
  • <code>,
  • <ins>,
  • <del>,
  • <dfn>,
  • <kbd>,
  • <pre>,
  • <samp>,
  • <var> and <br>
  • <!– Comment      –>
  1. Paragraph tag <p>

In HTML5, <p> tag is used to define a paragraph.

Syntax:

<p> content</p>

Example:

<!DOCTYPE html>
<html>
<head>
    <title>HTML p Tag</title>
</head>
<body>
    <p>This paragraph is defined using the HTML5 p tag</p>
</body>
</html>

Output:

HTMLText Formatting Elements and Tags
HTMLText Formatting Elements and Tags
  1. <h1>,<h2>,<h3>,<h4>,<h5>,<h6>

Headings help in defining the ranking and the structure of the web page content. There are six level of headings in HTML5.

Example:

<!DOCTYPE HTML>
<html>
<head>
    <title>
         Example of Headings
    </title>
</head>
<body>
    <h1>Heading level 1</h1>
    <h2>Heading level 2</h2>
    <h3>Heading level 3</h3>
    <h4>Heading level 4</h4>
    <h5>Heading level 5</h5>
    <h6>Heading level 6</h6>
</body>
</html>

Output:

  1. <strong>

The HTML5 <strong> tag gives text a strong attention which traditionally means that the text is displayed as bold by the browser. This tag is also commonly referred to as the <strong> element.

Syntax:

<body><p><strong>Attention text goes here</strong> but not here</p></body> 

Example:

<!Doctype html>
<html>
<head>
    <meta charset="UTF-8"> 
    <title>HTML5 Example by www.digitalsanjiv.com</title>
</head>
<body>
    <h1>Heading1</h1>
    <p>We want to emphasize <strong>this text</strong>.</p>
</body>
</html>

Output:

Emphasize Text
Emphasize Text
  1. <em>

The HTML5 <em> tag marks text that has stress emphasis which normally means that the text is displayed in italics by the browser.

Syntax:

<body><p><em>Stress emphasized text goes here</em> but not here</p></body>

Example:

!Doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>HTML5 Example by www.digitalsanjiv.com
    </title>
</head>

<body>
    <h1>Heading 1</h1>
    <p>We want to stress emphasize <em>India Is My Country</em>.</p>
</body>

</html>

Output:

HTML text formatting elements and tags
Em tag

 

  1. <abbr> The <abbr> tag defines an abbreviation.

Syntax:

<abbr title=””> Short form </abbr>

 Example:

<!DOCTYPE html>
<html>

    <body> 
        <h1>As Soon As Possible</h1> 
        <h2>This is <abbr> Tag</h2> 
        <abbr
            title="As Soon As Possible">ASAP
        </abbr> 
    </body>

</html>

 6.   <acronym> The <acronym> tag is used to spell out another word. 

Syntax:<acronym title=””> Short Form </acronym> 

Example:

<!DOCTYPE html>
<html> 

<body> 
    <h1>Digital Sanjiv</h1> 
    <h2>This is HTML <acronym> Tag</h2>
        <acronym title="Hard Disk Drive">HDD</acronym> <br> 
        <acronym title="Operating System">OS</acronym> 
</body> 

</html>
  1. <address>

The <address> element identifies contact information suitable to the current site, page, document, section, or article. It should not be used to identify addresses in any other conditions.

Syntax:

<p>

123 Main St. <br>

Anytown, XYZ 1234

</p>

Example:

<!DOCTYPE HTML>  
<html> 

<head>
    <title>   Example of Address  </title>
</head>   

<body>
    <address> You can contact us at:<br> 
        digitalsanjiv.com<br> Joginder Nagar Distt Mandi HP<br> City, State 
    </address>
</body>   

</html>  
  1. <bdo>

The <bdo> tag is used to specify the direction that the text is displayed.

 Syntax:

<bdo dir=”….. “> Content……</bdo> 

Example:

<!DOCTYPE html>
<html>

<head>
     <title>Bdo tag</title>
</head>

<body>
     <h2>Example of HTML bdo tag</h2>
     <p style="color:#800000">This is Normal Content with default directionality</p>
     <p>This is with left to right directionality:
         <bdo dir="ltr" style="color: #00FF00">A Beautiful Place</bdo>
     </p>
     <p>This is with right to left directionality:
         <bdo dir="rtl" style="color:#0000FF">A Beautiful Place</bdo>
     </p>
</body>

</html>

9  <blockquote>

The <blockquote> tag in HTML5 is used to display the long quotations.

Syntax:

<blockquote> Contents… </blockquote> 

Example:

<!DOCTYPE html>
    <html>

    <head>
        <title>Blockquotetag</title>
    </head>

    <body>
        <h2>Exampleofblockquotetag</h2>
        <p>AGreatMotivationalQuote:</p>
        <blockquote cite="https://www.brainyquote.com/quotes/steve_jobs_416921">
            <p>
                "Technology is nothing. What's important is that you have a faith in people,
                that they're basically good and smart, and if you give them tools, they'll do
                wonderful things with them."
            </p>
        </blockquote>
        <cite> Steve Jobs </cite>
    </body>

    </html>

  10           <cite> HTML5 <cite> tag defines a citation, it gives reference or title to a creative work, quoted content, books, websites, a research paper, a blog-spot, painting. Syntax:<cite>Cited Content…….</cite>

 Example:

<!DOCTYPEhtml> <html>

<head> <title>CiteTag</title> </head>

<body> 
    <h2>Example of cite tag</h2> 
    <img src="https://m.media-amazon.com/images/I/51WR-j1ndYL._SX402_BO1,204,203,200_.jpg" 
    height="250" width="200"> 
    <p>A famous book: 
        <cite> WebProgramming With HTMl5, CSS and Java Script</cite> 
        written by John Dean 
</body>

</html>

 11  <q> The <q> tag defines a short inline quotation.

 Syntax:

<q cite=”URL“> … </q>

 Example:

<!Doctype html> 
<html>

<head> <title>HTML q tag</title> </head> 

<body> 
    <p><q>Digital Sanjiv</q> A Digital Learning Portal For Enthusiasts </p>
</body>

</html>
 

11    <code>

The <code> tag in HTML5 is used to define the bit of computer code. During the creation of web pages.

Syntax:

<code>Computer code goes here</code>

Example:

<!DOCTYPE html>
<html>

<body> 
    <code> 
        #include<stdio.h> 
            int main() 
            { 
                printf("Digital Sanjiv"); 
            } 
    </code> 
</body>

</html> 

12     <ins>

The <ins> tag in HTML5 is used to specify a block of inserted text. The inserted text is rendered as underlined text by the web browsers.

Syntax:<ins> Contents… </ins> 

Example:

<!DOCTYPE html>
<html>

<body>
    <h1>Digital Sanjiv</h1>
    <h2>HTML ins Tag</h2>
    <p>
        Digital Sanjiv is a <ins>Digital</ins> Learning portal
    </p>
</body>

</html>

13     <del>

The <del> tag in HTML5 stands for delete and is used to mark a section of text which has been deleted from the document.

Syntax:

<del> Contents… </del> 

Example:

<!DOCTYPE html>
<html>

<body>
    <h1>Digital Sanjiv</h1>
    <h2>HTML del Tag</h2>
    <p>Digital Sanjiv is a <del>mathematical</del>
        Digital Learning Portal
    </p>
</body>

</html>

14    <dfn> The <dfn> tag in HTML5 represents definition element and is used to representing a defining sample in HTML5.

Syntax:<dfn> content </dfn> 

Example:

<!DOCTYPE html>
<html>

<head>
    <title>HTML dfn tag</title>
</head>

<body>
    <p><dfn>Digital Sanjiv</dfn> is a portal for Digital Learning.</p>
</body>

</html>

15 <kbd> It is a phrase tag and used to define the keyboard input. 

Syntax:<kbd> text content … </kbd> 

Example:

<!DOCTYPE html>
<html>

<body>
    <h1>Digital Sanjiv</h1>
    <h3>HTML kbd Tag</h3> 
    <p> Open a new window using the keyboard shortcut 
        <kbd>Ctrl</kbd> + <kbd>N</kbd> 
    </p>
</body>

</html>

15      <pre> The <pre> tag in HTML5 is used to define the preformatted text which maintain the text spaces, line breaks, tabs, and other formatting characters which are ignored by web browsers. 

Syntax:<pre> Contents… </pre> 

Example:

!Doctype html>
<html>
<head>
    <title>pre tag</title>
</head>

<body> 
    <pre> Digital Sanjiv A Digital LearningPortal For Learner </pre>
</body>

</html>

16    <samp> It is a phrase tag and used to define the sample output text from a computer program. 

Syntax:<samp> Contents… </samp> 

Example:

<<!DOCTYPE html>
    <html> 

    <head> <title>samp tag</title> </head> 
    <style>
        body {
            text-align: center;
        }

        .dgs {
            font-size: 40px;
            font-weight: bold;
            color: green;
        }

        .digital {
            font-size: 25px;
            font-weight: bold;
        }
    </style> 

    <body> 
        <div class="dgs">Digital Sanjiv</div> 
        <div class="digital"><samp> Tag</div> 
            <samp>A Digital Learning Portal For Learner
            </samp> 
        </body>

    </html>

17     <var> It is a phrase tag that is used to specify the variable in a mathematical equation or in the computer program. 

Syntax:<var> Contents… </var> 

Example:

<!DOCTYPE html>
<html>

<head>
    <title>var tag
    </title>
</head>

<body>
    <p>A simple equation:
        <var>z</var> = <var>x</var> +<var>y</var>
    </p>
</body>

</html>

HTML5 <br> tag

The <br> tag in HTML document is used to create a line break in a text in our webpage.

This tag is generally used in poem or address where the division of line is necessary. It is an empty tag, which means it does not need a company of end tag. If we place the <br> tag in the HTML code, then it works the same as pressing the enter key in a word processor.

Syntax:

Text<br> Text

Difference between the <br> and <br/> tag in HTML

We can use HTML <br> tags in two manners. It is prescribe to use closed br tag <br/> because it is supported in HTML and XHTML.

Example:

<!DOCTYPE HTML>
<html>

    <head>
        <title> ExampleofBRtag </title>
    </head>

    <body>
        <p>Ifwewanttobreakaline<br>inourparagraph, <br> 
            use the BR element in <br>
            our HTML document. 
        </p>
    </body>

</html>

HTML5 <hr> Tag (Horizontal Rule)

HTML <hr> tag is used to specify a paragraph-level section break break in HTML document. It is used when we suddenly change our topic in our HTML document. It is also used to draw a horizontal line within the HTML document to separate the text from content.  It is also called a Horizontal Rule in HTML.

In HTML <hr> tag need not be closed but in XHTML <hr> tag must be closed properly.

Example:

<!DOCTYPE html>
<html>

<head> 
    <title>HTML hr tag</title>
</head>

<body> 
    <p>There is a horizontal rule below our paragraph.</p> 
    
    <hr>
    <p>This is a horizontal rule above our paragraph.</p>
</body>

</html>
Conclusion: This article briefly describes the HTML text formatting elements and tags.
Hope you will find it informative. You may also visit site for more details.



You may also like this:
What's New in HTML5

Where to write JavaScript Code

Please like and share it.

 

 

0 0 votes
Article Rating
Subscribe
Notify of
guest

1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
champa devi
champa devi
2 years ago

excellent sir

Share via
Copy link
Powered by Social Snap