- Basic of HTML programming | HTML Beginner to Advance
- HTML Attributes | Attributes in HTML
- HTML Style | CSS Style in HTML
- HTML Quotation
- HTML Formatting
- HTML Images
- HTML Links
- HTML Table
- HTML Class Attribute
- HTML List
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
- Benefits of HTML
- The basic structure of HTML
- What is an HTML Element?
- Empty HTML Elements
- HTML Page Structure
- HTML History
- HTML Headings
- HTML Paragraphs
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 Page Structure
HTML History
| Year | Version |
|---|---|
| 1989 | Tim Berners-Lee invented www |
| 1991 | Tim Berners-Lee invented HTML |
| 1993 | Dave Raggett drafted HTML+ |
| 1995 | HTML Working Group defined HTML 2.0 |
| 1997 | W3C Recommendation: HTML 3.2 |
| 1999 | W3C Recommendation: HTML 4.01 |
| 2000 | W3C Recommendation: XHTML 1.0 |
| 2008 | WHATWG HTML5 First Public Draft |
| 2012 | WHATWG HTML5 Living Standard |
| 2014 | W3C Recommendation: HTML5 |
| 2016 | W3C Candidate Recommendation: HTML 5.1 |
| 2017 | W3C Recommendation: HTML5.1 2nd Edition |
| 2017 | W3C 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 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!
