Home
HTML

HTML Basics - You Should Know Before Learning HTML!

Here, we have discussed about some basics of HTML. HTML consists of a series of tags and these tags are the building blocks of HTML pages that help...

In this article you will learn about some basics of HTML which will help you to create a valid structures of Web pages. 

HTML Basic

You should know that, HTML consists of a series of tags and these tags are the building blocks of HTML pages that help in the basic formatting of elements and instruct the browser to display the content.

Basics HTML Document

The basic HTML document consists of 5 tags that is; <!DOCTYPE> Declaration, <HTML>, <head>, <title>, and <body>. 

<!DOCTYPE> Declaration

Every HTML documents begin with this document type declaration. It is not HTML tag so it is not mandatory to write. It only instructs the web browser which HTML version the document is written in. The <!DOCTYPE> Declaration for latest HTML version (HTML5) is 

<!DOCTYPE html>

<html>

This is the HTML root element which contains all the elements of HTML. It begins with <html> and ends with </html>.

<head>

This is the second element after <html> element and it includes metadata. In simple words we can say that <head> element contains all behind the scene elements i.e., those elements which can't be visible in front end. <head> defines information about the document and it begins with <head> and ends with </head>.

<title>

The title tag of html is used in order to add title to the HTML page and after adding <title> tag, page title can be seen on the top of the browser window. It begins with <title> and ends with </title>.

<body>

The <body> tag of html includes the content(text writings, images, audios, videos, links etc.) of the page that will be visible in the front-end. It begins with <body> and ends with </body>.

Now, let's illustrate the basic HTML document with the help of following example;

<!DOCTYPE html>
<html>
     <!-- Information about the page -->
<head>
    <title> Basic HTML Structure</title>
</head>
<body>
     <!--Contents of the webpage like heading, paragraph, images, links etc.-->
</body>
</html>

HTML Headings

In HTML, headings are defined with the <h1> to <h6> tags where <h1> use as the most important heading and <h6> use as the least important heading. These heading tags are written inside the <body> tag.

Let's understand HTML heading tags with the help of following example;

<!DOCTYPE html>
<html>
<head>
    <title>Html Headings Example</title>
</head>
<body>
     <h1>This is heading 1</h1>
     <h2>This is heading 2</h2>
     <h3>This is heading 3</h3>
     <h4>This is heading 4</h4>
     <h5>This is heading 5</h5>
     <h6>This is heading 6</h6>
</body>
</html>

Output

HTML Paragraph

In HTML, Paragraph are defined with the <p> tag. This tag is used to display paragraph statement on web page. This tag begins with <p> and ends with </p>.

Let's illustrate HTML Paragraph tag with help of following example;

<!DOCTYPE html>
<html>
<head>
    <title>Html Paragraph Example</title>
</head>
<body>
     <p>This is a first paragraph example.</p>
     <p>This is second paragraph example.</p>
</body>
</html>

Output

Html paragraph Example

HTML Line Break tag

HTML line break are defined with the <br> tag. In other words, <br> is used for line break in text (carriage-return). <br> is empty tag that means it has no ending.

Let's understand HTML Line Break tag with the help of following example;

<!DOCTYPE html>
<html>
<head>
    <title> HTML Line Break Example</title>
</head>
<body>
     <p> Welcome to Answersjet.<br>
     All in one website for learning basics of Programming Languages, HTML, tutorial and much more..
     </p>
</body>
</html>

Output

Html line break Example

HTML Horizontal line

HTML Horizontal line are defined with the <hr> tag. <hr> tag are basically used to add break between paragraph as horizontal margin or horizontal rule. This is also an empty tag like HTML Line Break tag that means it also has no ending.

Let's illustrate HTML Horizontal line tag with the help of following example;

<!DOCTYPE html>
<html>
<head>
    <title>Html horizontal line Example</title>
</head>
<body>
     <p>This is a first paragraph example.</p>
<hr>
     <p>This is second paragraph example.</p>
</body>
</html>

Output

Html Horizontal line Example

HTML links

In HTML, links are defined by the <a> tag. It is also known as Anchor tag. It is mostly used to create a hyperlink and link one page to another. HREF attribute is used alongside the <a> tag to specify the link's destination.

Let's understand HTML links with the help of following example;

<!DOCTYPE html>
<html>
<head>
    <title>Html Links Example</title>
</head>
<body>
     <p>All in one website for learning basics of Programming Languages, Html, tutorials and much more....</p>
     <a href="https://www.answersjet.com">Answersjet</a>
</body>
</html>

Output

Html link example

HTML Image

The <img> tag is used to embed (display) images on web pages. SRC attribute is used alongside the <img> tag to add source file.

Let's illustrate HTML Image with the help of following example;

<!DOCTYPE html>
<html>
<head>
    <title>Html Image Example</title>
</head>
<body>
   <p>All in one website for learning basics of Programming Languages, HTML, tutorial and much more..</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/3/38/HTML5_Badge.svg" alt="Html" width="500" height="333">
</body>
</html>

Output

Html image Example

Conclusion

Above we have discussed about some basics of HTML. HTML consists of a series of tags and these tags are the building blocks of HTML pages that help in the basic formatting of elements and instruct the browser to display the content. The basic HTML document consists of 5 tags that is; <!DOCTYPE> Declaration, <HTML>, <head>, <title>, and <body>.