Web Development — HTML

HTML Tag’s|Series: 02

SUDHAKARAN S

Published in

Talking Web

4 min readJan 31, 2021

Category : Web Development | HTML

In this web development series, you will understand the concept of meta tag, heading tag, paragraph tag, Comments tag, Horizontal Line tag and Line Break tag, Web Development series : 01 you can understand the basics of HTML, HTML History and it types, structure of the Webpage.

The HTML Page Declaration

Document metadata

Metadata contains information about the page.The <meta> tag defines metadata about an HTML document. Metadata is data (information) about data.
The <meta> tag also supports the Global Attributes in HTML.
<meta> tags always go inside the <head> element, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings.
Metadata will not be displayed on the page, but is machine parsable.
Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other web services.

Example

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Free Web tutorials">
  <meta name="keywords" content="HTML,CSS,XML,JavaScript">
  <meta name="author" content="John Doe">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>All meta information inside the head section</p>
</body>
</html>

Heading Tags

HTML heading tags have a different size in nature [ Bigger — Smaller ] and HTML have 6 type of heading tag.

They are <h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6>element defines a head tags.

code

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML-Heading_tag's</title>
</head>
<body>
    <h1>Heading</h1>
    <h2>Heading</h2>
    <h3>Heading</h3>
    <h4>Heading</h4>
    <h5>Heading</h5>
    <h6>Heading</h6>
</body>
</html>

OUTPUT

Paragraph Tag

A paragraph always starts on a new line, and it is block of text and <p></p> element defines a paragraph tag, and i just add some empty content for the sample code.

code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML-Paragraph Tag</title>
</head>
<body>
    <h1>Paragraph</h1>
    <p>Google and Facebook ferry more than 80% of external traffic to various news sites, according to Parse.ly, a web analytics and content optimisation software for online publishers, but most of the income goes to the internet platforms, not to content generators. This means media outlets are not the principal beneficiaries of revenue from news consumption digitally.</p>
</body>
</html>

OUTPUT

Comment Tag

1) Single line comment

<!-- This is a Single Line Comment -->

2) multi line comment

<!--
            This is a Multi Line Comment
            You can write about this page information
            in this multi line format.
 -->

Horizontal Line

<hr> are self closing tag and it is used draw the horizontal lines in the webpage.

Line Break

<br> it is also self closing tag and it is used to break the line in the webpage.

<!-- <br> or <br /> both are fine -->
<br> or <br />

code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Horizontal Lines and Line Breaks">
        <title>Comments and Horizontal Lines and Line Breaks</title>
    </head>
    <body>
        <!-- This is a Single Line Comment -->
        <!--
            This is a Multi Line Comment
            You can write about this page information
            in this multi line format.
        -->
        <!-- hr and br are self closing tags. -->
        <!-- <br> or <br /> both are fine -->
        <h1>Today's News</h1>
        <hr>
        <h2>Main News 1</h2>
        <p>1. "Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br />Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <br />when an unknown printer took a galley of type and scrambled it to make a type specimen book."</p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br />Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <br />when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
        <hr>
        <h2>Main News 2</h2>
        <p>2. "Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br />Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <br />when an unknown printer took a galley of type and scrambled it to make a type specimen book."</p>
        <hr>
        <p>Copyrights (C) 2021</p>
    </body>
</html>

OUTPUT

What next?

In our next blog we going to see Type of List, Text Formatting Options, PRE and Code Tags in HTML.

Next in the series : HTML — Type of List, Text Formatting Options, PRE and CODE Tags in HTML.