BASICS OF HTML


HTML is made up of TAGS to form webpages. These webpages are also called HTML documents. Every HTML program follows a rigid structure.

Declaring The Document Type

Every html document should always start by declaring the document type as it and helps browsers to display web pages correctly.

<!DOCTYPE html>


HTML Building Blocks


What follows the declaration is the <html> tag in which the entire webpage is enclosed. The tags that follow after, are called HTML building blocks, which are discussed further.


Document Head

Information placed in this section is essential for the inner workings of the document and has nothing to do with the content of the document. The tag used here is <head> </head>.

<title> tag is added in this section for SEO optimization.


Document Body

The stuff that is to be displayed on the webpage is contained within <body> </body> tags.


For example:


<!DOCTYPE html>
<html>
<head>
<title> Explaining HTML Basics </title>
</head>
<body>

<h1> Hello World </h1>
<p> Writing paragraphs in HTML</p>

</body>
</html>


Output:

Hello World

Writing paragraphs in HTML



Document Formatting


Text formatting is commonly done by using headings, paragraphs, images, adding links and line breaks.


Headings In HTML

HTML supports six different levels of headings. The highest level headed format is <h1> and the lowest level is <h6>. The level chosen decides the size of the heading.

For example:


<h1> I love winters </h1>
<h5> Playing in snow is so much fun.</h5>
Live Demo!


Output:

I love winters

Playing in snow is so much fun.


Paragraphs

The tag that provides this functionality is <p> </p>. When the web browser encounters this tag, it moves on to the new line and skips one line between the previous line and the new line.



<p> I love winters </p>
<p> Playing in snow is so much fun.</p>
Live Demo!


Output:

I love winters

Playing in snow is so much fun.



Line Breaks

<br> tag simply jumps to the start of a new line without skipping a blank line. This is not a paired tag.


Linking Documents

Adding a hyperlink into a webpage is done by using <a></a> tag.


For example:


<a href="file_name.html">
click here to open link
</a>
Live Demo!


Output:
click here to open link


Adding Images

<img> tag is used to add images into a webpage and height and width attributes are specified as well.


For example:


<img src="javac.gif" alt="java cup"
  width="104" height="142">
Live Demo!


Output:
java cup