Scribd
Upload
35 views

HTML Introduction

HTML is a markup language used to define the structure and layout of web pages. It uses tags to give instructions to web browsers on how to display content. Some key HTML tags are <html>, <head>, <title>, and <body>. An HTML document has a basic structure with an <html> tag wrapping <head> and <body> sections. The <head> contains metadata like the page <title>. The <body> holds visible page content. CSS and JavaScript can be added to style and add interactivity to HTML pages.

Uploaded by

br tiwari
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
35 views

HTML Introduction

HTML is a markup language used to define the structure and layout of web pages. It uses tags to give instructions to web browsers on how to display content. Some key HTML tags are <html>, <head>, <title>, and <body>. An HTML document has a basic structure with an <html> tag wrapping <head> and <body> sections. The <head> contains metadata like the page <title>. The <body> holds visible page content. CSS and JavaScript can be added to style and add interactivity to HTML pages.

Uploaded by

br tiwari
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 27

HTML Introduction

What is HTML?
 HTML is an initialism for "HyperText Markup Language" .
 It is the language of the web.
 It is used to create websites.
 It is used to define a page layout, meaning it is a barebone page structure.
 HTML is used for making pages of the website also called webpages that we see on
the internet
 It consists of a set of tags.
 This set of tags is written in HTML Document.
 ".html" or ".htm" is the extension.
 There are so many versions of HTML but HTML5 is the latest version.

 
Features of HTML
 It is platform-independent.
 Images, videos, and audio can be added to a web page.
 Hypertext can be added to the text.
 It is a markup language.
 It is interpreted language
 It can be integrated with other languages like CSS, JavaScript etc.
 Semantic Structure.
 local Storage & Indexed DB – Client-side data storage.
 Offline Capabilities (PWA) with Cache API & Service Workers.

Why the word HyperText & Markup Language


The word hypertext markup language comprises the words “hypertext” and “markup
language” . The term "hypertext" refers to the linking of text with other documents
and “markup language”  refers to a language that uses a set of tags.
So, HTML is the linking of text with other documents using some set of tags.
 
Note:- Tags refers to some meaningful texts enclosed in angle braces <...>. For
eg. <head>. Each tag has a different meaning and importance in building an HTML
page which can affect the web page in its own ways 
A beautiful analogy to understand HTML:
 
 
Here in the explanation for the above analogy, the car skeleton refers to HTML with the
page body. When that skeleton is painted it the car gets CSS and after all that car is
provided with some functionalities like engine, etc (which refers to JavaScript), the car
gets life and can run. Similarly, when we develop our websites we need HTML for the
structure and if we want our website to look good and prettier we need CSS and if we
want to add functionalities to our webpage we need JavaScript.
 
History of HTML:

 In 1989, Tim Berners Lee established www and created HTML in 1991. 


 From 1995 to 1997, he started working on versions of HTML.
 In 1999, a committee was organized that made HTML4.0 a standard.
 HTML4.0 is used by many, even today. However, the stable version of HTML is 5.0
also known as HTML5.

HTML Working
When we want to access any information on the internet we search that on a web
browser. The web browser gets all the content from the web servers. This content is
stored in the webservers in the form of an HTML document.
An HTML document is first written with some tags in any code editor or your choice of
a text editor and then saved with the “ .html ” extension. After this, the browser
interprets the HTML document, reads it, and renders a web page.
 
 
In the above figure, we open a simple text editor, then the basic structure is to be
written. Now, this file is to be saved with the "index.html" filename. After saving this
file, open this file in your web browser. After opening our webpage will look like as the
output.
 
Below we'll discuss this line briefly.
 
How does HTML Works?
 
HTML Document:
It's a text document saved with the extension .html or .htm that contains texts and
some tags written between "< >" which give the instructions needed to configure the
web page.
These tags are fixed and definite. About the structure of html document is explained
further.
Browser:

 A browser is an application that reads HTML documents and renders the webpage.
 They cannot read the content directly where it is stored. To settle this conflict
servers are used.
 A server acts like an intermediate, it patiently listens to the browser's request and
executes it.
 Now the document is delivered to the browser.
 Browsers support two parts now: parsing and rendering.
 When the browser is in the parsing stage, it receives raw bytes which are converted
into characters and these characters are then converted into tokens after that tokens
are converted into nodes. Then these nodes are linked in a tree data structure
known as DOM(Document Object Model).
 when the DOM tree structure has been constructed, the browser starts its rendering.
Now each node in the DOM tree will be rendered and displayed.

 
Rendered Page:
The rendered page is the output screen of our HTML Document which is the page
displayed on the browser  
 
How does the basic website work?

 Web Browser(client) requests www.codewithharry.com like websites from the


webserver.
 Webserver in return sends HTML, CSS, and JS files to it.
 HTML, JS, and CSS files are parsed by a web browser and show you a beautiful
website.

HTML Prerequisite
Tools needed to make an HTML page:
1) HTML Editors:  It is a simple tool in which every piece of HTML content has to be
written. We can use any text editor as per our choice. Here we are using Visual studio
code because it is lightweight and open-source.
Commonly used editors:

NOTE: You can write HTML even in a Notepad. Text editors like VS code make
these things easier.
 
Installation of Visual Studio Code:

 Go to Google
 Type Visual studio code download
 Click on download and install it as per your OS

 
2) Browser: HTML tags are not displayed by browsers, but are read and interpreted
by them. In a web browser, HTML structures are rendered into a styled and pretty
form. Here we are using google chrome.
Commonly used browsers:

Using any editor and any browser, we will be able to render pages.
 
NOTE: In addition, we are installing a live server extension in our Vscode editor to
view live reload pages.
live server extension is used to launch a local development server with a live reload
feature for HTML pages.
 
HTML Document Structure
How does an HTML document structure look?
HTML document structure contains some set of tags. Tags are some text enclosed within <…
> angle braces. A tag is like a container for either content or other HTML tags. The below text
shows how the HTML document structure looks:

<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<!-- content -->
</body>
</html>

Copy

Do not be afraid. I will explain what is being represented above to you.


 
NOTE: These are the five must-use tags for HTML
<!DOCTYPE html>, <html>, <head>, <title>, <body>
 

1. <!DOCTYPE html>

Copy

The <!DOCTYPE>  declaration tag is used by the web browser to understand the version of the
HTML used in the document. The current version is 5 i.e. HTML 5.
 

2. <html>

Copy

The <html>  tag is the root of an HTML page.


 

3. <head>

Copy

The <head>  tag contains page metadata.


 

4. <title>Document</title>

Copy

The <title>  tag contains the title of a page and is shown in the browser title bar.
 

5. </head>

Copy
The </head>  tag is closing of <head> tag.
 

6. <body>

Copy

<body> tag is the main tag of HTML. It contains the main body of the page and is shown in the
white part of the browser.
 

7. </body>

Copy

The </body>  tag is closing of <body> tag.


 

8. </html>

Copy

The </html>  tag is closing of <html> tag.


 
Every HTML page needs at least these 8 lines to define a layout of a page. We will learn more
about HTML tags in the upcoming tutorial.
Previous

HTML Page Structure


A basic HTML document:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1>This is our first heading</h1>
<p>This is our latest paragraph</p>
</body>
</html>

Copy

 
Visualization of this HTML document:
 

 
Display of this content on a web browser:
 

 
In the browser's title bar, all content of the <head> section will be displayed, while on the white
background of the browser, all content of the <body> section will be displayed.
HTML Editors
HTML using Notepad:
Step1: Go to notepad 
Step2: Write HTML code in it
Step3: Save with ".html" extension
Step4: Open this file in the browser

HTML using Visual studio code:


Step1: Go to vs code
Step2: Write HTML code in it
Step3: Save with ".html" extension
Step4: Open this file in the browser

HTML View Source


How to view the page source of the loaded HTML page?
Sometimes we want HTML content or view-source of someone’s website and to view
that there is a simple technique which is provided by the windows.

 Go to that website.
 Click the right mouse button.
 Select the option View Page Source.
 A new tab with view-source will appear on your screen.

 
How to inspect the HTML element?
Sometimes we want to inspect the HTML element of someone’s website and to do that
there is a simple technique which is provided by windows.

 Go to that website.
 Click the right mouse button.
 Select the option Inspect.
 Now developer tool is opened on your screen.

 
NOTE: You are permitted to temporarily edit/change CSS or HTML elements on
any website utilizing this developer tool.
 
HTML Tags
What is an HTML tag?
If you want to build a beautiful website. Tags will help you to do so.
A tag is like a container for either content or other HTML tags. Tags are words
enclosed within < and > braces.
They are like keywords which defines that how web browser will format and display the
content
Some of the tags are mentioned below,

 <html>

Copy

 <head>

Copy

 <title>

Copy

 <body>

Copy

These are also known as “Starting tags” or “Opening tags”.


 
The following tags end with a closing tag i.e.

 <html>  tag has its closing </html> tag


 <head>  tag has its closing </head> tag
 <title>  tag has its closing </title>  tag
 <body>  tag has its closing </body> tag

 
Closing tags are used to close the content in between them. These are the tags
enclosed within angle braces <,> and a forward slash /. For example: </html>. These
closing tags are also known as “Ending tags”.
 
Some tags don’t have their corresponding closing tags and these are known
as “Stand-Alone tags” / “Empty tags” / “Self-closing tags”. For example:

 <br />  tag


 <hr />  tag
 <img> tag

 
NOTE:  In these Empty tags, they have a space between the characters and the
forward-slash (/). This is because if you omit this space, older browsers will
have trouble rendering that line break.
pictorial representation of tags:-
 

HTML Elements
What is an HTML Element?
HTML Element is a combination of the start tag, content, and end tag.
HTML Element = Start tag + Content + End tag
For example:

<h1> This is our first heading </h1>

Copy

 This is a heading element.


 
What is a Nested HTML Element?
Nested HTML Element is the elements in which one HTML element are followed by
another HTML element.
Nested HTML Element = One HTML element inside another HTML element
For example:

<h1><b> This is our first heading </b></h1>

Copy

 This is a bold tag inside the heading element.


 
What is an Empty HTML Element?
Empty HTML Element is the element in which tags do not have any content.
Empty HTML Element = Tags with no content
For example:

<br/>

Copy

This is a break tag having no content. <hr/> is also an example of this.


These tags are known as “empty elements”.

Skeletal Tags
Some basic tags and their meanings are discussed below:
 

  

These three tags are known as “skeletal tags”.


 

<html> tag :  “root of an HTML page”


Syntax:

<html>
//content
</html>

Copy

As discussed above, all the contents are wrapped in between the opening
tag  <html> and the closing tag </html>. In between <html> and </html> tag, our
content contains two parts i.e. a header section i.e. <head>...</head> and a body
section i.e. <body>...</body> .
 

<head> tag :   “header part of an HTML page”


Syntax:

<head>
//head content
</head>

Copy

Our header section starts from <head> and closes at </head> tag. It defines the head
of a document. This tag contains meta tags i.e. <meta>....</meta> and a title tag
i.e. <title >...</title> . The title is shown in the top tab of your browser but
metadata is not displayed anywhere, it is generally used for SEOs and contains
information about the document.
 

<title > tag :  “title part of an HTML page”


Syntax:

<title>
//any title name
</title>

Copy

 Our title section starts from <title> and closes at </title> tag. It defines the title of a document.

 
 

<body> tag :  “body part of an HTML page”


Syntax:

<body>
//body content
</body>

Copy

 Our body section starts from <body>  and closes at </body> tag. It defines the body of a document. This tag
contains various other tags. All the contents in between this tag are displayed on a web browser

 
 
The below image shows the skeletal tags and must needed tags to define the layout of the
webpage
 

Heading Tags
For any headlines use these heading tags on your HTML page.
 
 

<h1> tag:  “define heading of an HTML page but with first level”

Syntax:

<h1>
//heading content
</h1>

Copy

The <h1> tag is the first level heading tag. It also has its corresponding
close </h1> tag. <h1> tag shows the biggest and the boldest heading from all the six-
level heading tags. Font-size are predefined in this tag.
 

<h2> tag:  “define heading of an HTML page but with second level”

Syntax:

<h2>
//heading content
</h2>

Copy
The <h2> tag is the second-level heading tag. It also has its corresponding
close </h2> tag. <h2> tag comes after the <h1> tag i.e. Font-size is a little bit smaller
than <h1> tag.
 

<h3> tag:  “define heading of an HTML page but with third level”

Syntax:

<h3>
//heading content
</h3>

Copy

The <h3> tag is the third-level heading tag. It also has its corresponding


close </h3> tag. <h3> tag comes after the <h2> tag i.e. Font-size is a little bit smaller
than <h2> tag.
 

<h4> tag:  “define heading of an HTML page but with fourth level”

Syntax:

<h4>
//heading content
</h4>

Copy

The <h4> tag is the fourth-level heading tag. It also has its corresponding


close </h4> tag. <h4> tag comes after the <h3> tag i.e. Font-size is a little bit smaller
than <h3> tag.
 

<h5> tag:  “define heading of an HTML page but with fifth level”

Syntax:

<h5>
//heading content
</h5>
Copy

The <h5> tag is the fifth-level heading tag. It also has its corresponding


close </h5> tag. <h5> tag comes after the <h4> tag i.e. Font-size is a little bit smaller
than <h4> tag.
 

<h6> tag:  “define heading of an HTML page but with sixth level”

Syntax:

<h6>
//heading content
</h6>

Copy

The <h6> tag is the sixth-level heading tag. It also has its corresponding


close </h6> tag. <h6> tag comes after the <h5> tag i.e. Font-size is a little bit smaller
than <h5> tag. This is the last and smallest font size from all heading tags.
 

  Paragraph Tag
For paragraphs use <p> tag on your HTML page.
 

 
<p> tag:  “defines a paragraph on an HTML page”

Syntax:
<p>
//paragraph content

</p>

Copy
 

The <p> tag is to show text or content in a paragraph on your HTML page. <p> tag also


has its corresponding </p> tag. <p> tag automatically adds empty line space above
and below your paragraph.
 

Horizontal Line Tag


For horizontal line use <hr /> tag on your HTML page.
 

<hr /> tag:  “defines a horizontal line on an HTML page”

Syntax:

<hr />

Copy
 

The <hr / > tag is also known as the empty tag where a closing tag is not needed.
This tag is a self-closing tag. A horizontal line tag is used to break your documents
visually by adding a horizontal line in your document.
Line Break Tag
For line break use <br /> tag on your HTML page.
 

 
<br /> tag:   “used to break two lines or paragraph on an HTML page”

Syntax:

<br />

Copy

The <br / > tag is also known as the empty tag where a closing tag is not needed.
This tag is a self-closing tag. A line break tag is used to break down your line or a
paragraph. When the <br /> tag is used it automatically breaks the paragraph into a
new line.

Center Tag
To put content in the center use <center> tag on your HTML page.
 

 
<center> tag:   “used to put content in the center on an HTML page”
Syntax: 

<center>
//content

</center>

Copy

The <center> tag is used to put your content in the center of your HTML page. You
can use this tag in your table also. Sometimes we need our text to be in the center for
that this <center> tag is used. This tag has both an opening and a closing tag. It is not
an empty tag.
 
Refer to the video to understand clearly:

 
 NOTE:  According to HTML5, this tag has been deprecated and is now obsolete.
We'll learn more about deprecated tags in the upcoming tutorial. 

Preserve Formatting Tag


To put the exact code of any language use <pre> tag on your HTML page.
 

  
                         
<pre> tag:   “used to put the exact code on an HTML page”

Syntax: 

<pre>
//code of any programming language

</pre>

Copy
 
Preserve formatting itself defines preserving the format of the source document.
The <pre> tag is used to put your content the same as it is on your HTML page. This
tag has both an opening and a closing tag. Sometimes we need our text to be written
on our HTML page the same as it is for that we use the <pre> tag.

Monospaced Font
For monospaced font use <tt> tag on your HTML page.
 

                         
 
<tt> tag:   “used to display each letter with same width on an HTML page”
Syntax: 

<tt>
//content

</tt>

Copy

 
Using this <tt> tag we can display each letter with the same width. <tt> tag has also
its corresponding </tt> tag. Each letter of an alphabet has different widths like ‘w’ is
wider than ‘i’ so to overcome this we can use a monospaced font. The monospaced
font displays each letter with the same width.

Text Abbreviation Tag


For text abbreviation use <abbr> tag on your HTML page.
 
 
 
<abbr> tag:   “used to define abbreviation form of an element”
Syntax: 

<abbr>
//content

</abbr>

Copy

Acronym Tag
For acronym text use <acronym> tag on your HTML page.
 

 
 
<acronym> tag:   “used to define acronym”
Syntax: 
<acronym>
//content

</acronym>

Copy

 
Using this <acronym> tag we can define an acronym text. <acronym>  tag has also its
corresponding </acronym> tag.

Blockquote Tag
To insert long quote use <blockquote>  tag on your HTML page.
 

 
               
<blockquote> tag:   “used to insert long quote on an HTML page”
Syntax: 

<blockquote>
//content

</blockquote>

Copy

 
Using this <blockquote> tag we can insert a long quotation on an HTML
page. <blockquote> tag has also its corresponding </blockquote>  tag.

Quote Tag
To insert short quote use <q> tag on your HTML page.
 
 
                 
 
<q> tag:   “used to insert a short quote or to add a double quote on an HTML
page”
Syntax: 

<q>
//content

</q>

Copy

Using this <q> tag we can insert a double quote on an HTML page. <q> tag also has its
corresponding </q> tag.

Text Citation Tag


To provide a reference or creative workbook, use the <cite> tag on your HTML page.
 
 

 
         
 
<cite> tag:   “used to provide a reference or defines the title of a creative work
on an HTML page”
Syntax: 

<cite>
//content

</cite>

Copy

 Using this <cite> tag we can provide a reference or title for creative work on the
HTML page. <cite> tag also has its corresponding </cite> tag. By default content
between this tag is shown in italic.

Text Direction Tag


To override the current text direction, use the <bdo> tag on your HTML page.
 

   
                 
 
<bdo> tag:   “used to override the current direction of text on an HTML page”
Syntax: 

<bdo>
//content

</bdo>

Copy

Bdo refers to “Bidirectional Override” Using this <bdo> tag we can override the


current direction of text on an HTML page. <bdo> tag also has its
corresponding </bdo> tag. It uses the dir attribute in which any one value is passed
either rtl(right to left) or ltr(left to right)

Address Text Tag


To indicate contact information, use the <address>  tag on your HTML page.
 

 
 
                 
 <address> tag:   “used to show contact information on an HTML page”
Syntax: 

<address>
//content

</address>

Copy

Using this <address> tag we can show contact information on an HTML


page. <address> tag also has its corresponding </address> tag.

Code Tag
To show programming code, use the <code> tag on your HTML page.
   
                 
 
<code> tag:   “used to show programming code on an HTML page”
Syntax: 

<code>
//content

</code>

Copy

 Using this <code> tag we can show programming code as it is on an HTML


page. <code> tag also has its corresponding </code> tag.

You might also like