Table of Contents

Basics of HTML | Web Development

HTML Basics

HTML is a language which is used for creating web pages. A web page may contain a set of images, videos, paragraphs, data tables and more. Lets understand the basics of HTML with this simple HTML document.

<!DOCTYPE html>
<html lang = "en">
 <head>
   <meta charset = "UTF-8">
   <meta name = "viewport"
content = "width=device-width,
initial-scale=1.0">
   <meta http-equiv="X-UA-
Compatible" content = "ie=edge">
   <title> your title here </title>
   <link rel ="stylesheet"
href="style.css">
 </head>
 <body>
        <script src = "index.js">
</script>
   <h1> This is heading1 </h1>
   <h2> This is heading2 </h2>
   <p> This is a paragraph </p>
 </body>
</html>

So, this the simple HTML document also known as boilerplate, we have already discussed about it in our previous post you can check it from here, And the very important point that I wanna share with you is that the visible part of the HTML document that everyone can see is placed between <body> tags. So, now lets understand some basics like HTML Headings, Paragraphs, Links and more.

HTML Headings

HTML includes six levels of headings, which are defined with <h1> and <h6> tags. Here <h1> defines the most important heading and <h6> defines the least important heading.

Example

<h1> This is heading1 </h1>
<h2> This is heading2 </h2>
<h6> This is heading6 </h6>

Output

This is heading1

This is heading2

This is heading6

As you can see here, heading1 is greater in size then other headings, and we usually use it to highlight an important text. heading2 is smaller in size then heading1 and heading6 is very small. You can try it yourself by using ant text editor or simply using notepad.

Comments in HTML

Comments help to add extra information about the code. Browser does not display comments, Here is how you can add comments in HTML

<h1> This is heading1 </h1>
<h2> This is heading2 </h2>
<!-- This is a comment --> 
<h6> This is heading6 </h6>

Output

This is heading1

This is heading2

This is heading6

As you can see here, browser does not display the comment.

HTML Paragraphs

Paragraphs in HTML are defined with <p> tag.

Example

<p> This is Paragraph </p> 
<p> This is also a Paragraph </p>

Output

This is Paragraph
This is also a Paragraph

HTML Links

We use <a> tag to define the HTML links.

Example

<a href = "https://crus4.com"> This is a link </a>

Output

This is a link

href attribute are used to declare the link’s destination. We will learn more about attributes in the upcoming posts.

How to view source code of any web page

You can view source code of every web page you like, Simply Right-click in a HTML page and select “view page source”. This will open a window which contain the HTML source code of the page.

You can also Right-click on any web page and choose “inspect”. This will open a window which contain source code of both the HTML and CSS.

Next

History of HTML | Boilerplate Explained

How to download and install VS code on you laptop

Text Formatting and Attributes in HTML

Basics of HTML | Web Development – crus4