Basic of HTML
Basic of HTML
This is the lesson 1 of 10 in the course HTML - Beginner to Advance

Hy Guys, It’s our first tutorial about HTML, here we will take it from Basic of HTML programming to Advance level. HTML stands for HyperText Markup Language. HTML is used to create websites / webpages etc.

Table of Contents

Also, Read- HTML Attributes | Attributes in HTML

HTML is the code that is used to structure a web page and its content. For example:

  • content could be structured within a set of paragraphs list of bulleted points
  • using images and data table headings can be used to highlight paragraph details.

Benefits of HTML

  • HTML is widely used
  • Easy to learn and use
  • HTML is lightweight and fast to load
  • Every browser supports HTML Language.
  • HTML is not Case Sensitive

The basic structure of HTML

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html> 

Here we will discuss the tags used in the structure of HTML. Let’s Start!

The <!DOCTYPE HTML> Tag

The HTML document type declaration is also known as DOCTYPE, It is required in every HTML or XHTML document. The DOCTYPE declaration is an instruction to the web browser about what version of HTML the page is written in. This ensures that the web page is parsed the same way by different web browsers.

The <HEAD> Tag

The <head> element does not display in the web browser. It is used to write page titles, linking other files like .css or .js files.

<head>
<title> Title of the web page</title>
<link rel="stylesheet" href="style.css" />
</head>

The <Body> Tag

The <body> element shows the content in a web browser. Everything written inside the body tag will be displayed in the browser.

<body>
<h1>Heading 1</h1>
<p> My first paragraph!</p>
<h3>Sub Heading 1</h3>
<p> Sub Heading Paragraph!</p>
</body>

The <h1> Tag

This tag specifies a heading on a web page. we will discuss it later in the next chapter.

<h1>My First Heading!</h1>

The <p> Tag

This tag specifies a paragraph on a webpage. we will discuss it later in the next chapter.

<p> My first Paragraph!</p>

What is an HTML Element?

An HTML element is a collection of starting tags, attributes, everything in between the tag, and an end tag.

<tagname> 
  content 1
  content 2
  ...
</tagname>

example:

<h1>Heading of the page</h1>
<p>Your first Paragraph</p>

here <h1> and <p> is a starting tag. “Heading of the page” and “Your first Paragraph” is the content of element. </h1> and </p> is the end tag.

Empty HTML Elements

HTML Elements that have no closing tag, called Empty HTML Elements. like <br>, <hr>, etc.

<body>
<h1>My First Heading</h1>
<hr>
<p>My first Paragraph. <br> Paragraph after line break</p>
</body>
Html heading tag

HTML Page Structure

html page structure

HTML History

YearVersion
1989Tim Berners-Lee invented www
1991Tim Berners-Lee invented HTML
1993Dave Raggett drafted HTML+
1995HTML Working Group defined HTML 2.0
1997W3C Recommendation: HTML 3.2
1999W3C Recommendation: HTML 4.01
2000W3C Recommendation: XHTML 1.0
2008WHATWG HTML5 First Public Draft
2012WHATWG HTML5 Living Standard
2014W3C Recommendation: HTML5
2016W3C Candidate Recommendation: HTML 5.1
2017W3C Recommendation: HTML5.1 2nd Edition
2017W3C Recommendation: HTML5.2

Find more on this on the Wikipedia

HTML Headings

HTML heading can be defined with the <h1> to <h6> Tags.

Here is an example of HTML headings:

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 1</h4>
<h5>This is heading 2</h5>
<h6>This is heading 3</h6>
html all six headings

HTML Paragraphs

HTML paragraphs are defined with the <p> tag.

Example of the Paragraph:

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

Hope you like this course, we will discuss all the elements in depth in the next tutorials.

Thank You!

Course NavigationHTML Attributes | Attributes in HTML >>
Click to rate this post!
[Total: 0 Average: 0]

Oh, hi there πŸ‘‹ It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply