In this article, we will see, Basic of HTML with examples.

Introduction:

HTML is HyperText Markup Language and is the language of the World Wide Web.

It is the standard text formatting language used for creating and displaying pages on the Web.

The definition of HTML is HyperText Markup Language.  HyperText is the method by which you move around on the web — by clicking on special the text called hyperlinks which bring you to the next page.

The fact that it is hyper just means it is not linear — i.e. you can go to any place on the Internet whenever you want by clicking on links — there is no set order to do things in.

 Markup means HTML tags mark it as a certain type of text. HTML completely relies on Tags.

Tags are labels you use to mark up the beginning and end of an element. There are two kinds of tags - opening tags: and closing tags:.

The only difference between an opening tag and a closing tag is the forward-slash "/". We label content by putting it between an opening tag and a closing tag.

HTML Versions:

Version	Year
HTML	1991
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML	2000
HTML5	2014

HTML document structure:

<html>

<head>

Document header related tags

</head>

<body>

Document body related tags

</body>

</html

HTML Basic Tags:

1. The declaration helps the browser to display a web page correctly. It is not case-sensitive.

2. This shows document type is HTML.

3. This tag is used to write a comment

4. Every HTML document starts with tag and ends with

5. It contains such tags that provide information about the document.

6. : Contents which will display on the web page are included in the < body> tag.

HTML Basics:

1. Heading Tags :

In HTML Heading tags will allow giving Heading to Text. And it includes 6 types of Heading Tags.

They are as follows below with example:

1. <H1>

2. <H2>

3. <H3>

4. <H4>

5.<H5>

6. <H6>

Example

<!DOCTYPE html>

<html>

<head>

<title>Heading Tags</title>

</head>

<body>

<h1>JavaTechSeries heading 1</h1>

<h2>JavaTechSeries heading 2</h2>

<h3>JavaTechSeries heading 3</h3>

<h4>JavaTechSeries heading 4</h4>

<h5>JavaTechSeries heading 5</h5>

<h6>JavaTechSeries heading 6</h6>

</body>

</html>

Output:

JavaTechSeries heading 1

JavaTechSeries heading 2

JavaTechSeries heading 3

JavaTechSeries heading 4

JavaTechSeries heading 5

JavaTechSeries heading 6

2. Paragraph:

It offers you to write text in paragraph style. Each paragraph of the text should go in between an opening and a closing tag.

<!DOCTYPE html>

<html>

<head>

<title>Paragraph</title>

</head>

<body>

<p>Here is a first paragraph of text.</p>

<p>Here is a second paragraph of text.</p>

<p>Here is a third paragraph of text.</p>

</body>

</html>

Output:

Here is a first paragraph of text.

Here is a second paragraph of text.

Here is a third paragraph of text.

3. Line Break Tag:

Whenever we use the <br> element, anything following it starts from the next line. <br> is an empty tag which can be used without closing or we can use it as <br/>.

Example :

<!DOCTYPE html>

<html>

<head>

<title>Line Break Example</title>

</head>

<body>

<p>

Hello<br> You are reading this HTML basic Tag.<br> Thanks in

Advanced.

</p>

</body>

</html>

Output:

Hello
You are reading this HTML basic Tag.
Thanks in Advanced.

4. HTML Elements:

HTML document consist of elements. Elements contains content with <start tag> and </end tag>.

e.g <p><h1><div><br>

• <p> <h1> need to be closed. Sometimes this tag will produce result, but not all the times.

• Tags like <br>, <img> no need to close there are empty tags.

5. Attributes :

HTML elements can have attributes. Attributes provide additional information about an element. Attributes are always specified in the start tag. Attributes come in name/value pairs like: name="value".

5.1. lang attribute:

The document language can be declared in the tag. • The language is declared in the lang attribute. • Declaring a language is important for accessibility applications (screen readers) and search engines:

Example:

<!DOCTYPE html>

<head>

<title>Lang Attribute Example</title>

</head>

<body>

<h1>JavaTechSeries First Heading</h1>

<p>JavaTechSeries first paragraph.</p>

</body>

</html>

The first two letters define language and hyphen is used to use more letters.

Output:

JavaTechSeries First Heading

JavaTechSeries first paragraph.

5.2 title attribute:

This allows giving a title for the element. When you move the mouse over the element, the title will be displayed as a tooltip.

Example:

<!DOCTYPE html>

<html>

<head>

<title>The title Attribute Example</title>

</head>

<body>

<h3 title="Hello HTML!">Titled Heading Tag Example</h3>

</body>

</html>

Output:

Titled Heading Tag Example

5.3 href: This attribute is used with <a> tag to give link address.

Example :

<a href=”https://javatechseries.blogspot.com”> This is JavaTechSeries Link </a>

5.4 align Tag: It is used to set the alignment of the tag content.

Example:

<!DOCTYPE html>

<html>

<head>

<title>Align Example</title>

</head>

<body>

<p align="left">JavaTechSeries is left aligned</p>

<p align="center">JavaTechSeries is center aligned</p>

<p align="right">JavaTechSeries is right aligned</p>

</body>

</html>

Output:

JavaTechSeries is left aligned

JavaTechSeries is center aligned

JavaTechSeries is right aligned

5.5 style Attribute: The style attribute allows you to specify the adding Style Sheet (CSS) rules within the element.

Example:

<!DOCTYPE html>

<html>

<head>

<title>Style Attribute Example</title>

</head>

<body>

<p style="font-family:arial; color:red;">Welcome to Coder.....</p>

</body>

</html>

Output:

This is JavaTechSeries HTML Blog ...

HTML Tutorial for Beginner with Example

JavaTechSeries First Heading

About Admin MC3

Related Post