HTML Tutorial
HTML Tutorial
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>Webpage's Heading</h1>
<p>Content (Your first paragraph) </p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Hello World Example by hi hello</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
</pre>
The above example will display "Hello, World!" on the
browser inside top-level heading (h1).
Comments in HTML
Just like other programming languages, you can keep
any text as a comment inside an HTML document. To
create a comment in HTML, use <!-- and -->.
Any text written inside <!-- and --> considers as
comment and it does not display on the website.
Example
Below is the example of HTML comment −
<!DOCTYPE html>
<html>
<head>
<title>Online HTML Editor</title>
</head>
<body>
<h1>Online HTML Editor</h1>
<p>Hello World</p>
</body>
</html>
Year Progress
Paragraph element in
HTML is used to
Paragraph Yes Yes Yes
represent a paragraph
of text on a webpage.
Address element in
HTML is used to
Address Yes Yes Yes
contain contact
information of user.
Table is used to
Table No Yes Yes organize data into rows
and columns
Style is used to add
Style No Yes Yes
CSS styling to webpage
Enables introduction
Audio No No Yes
of audio to webpage
Enables introduction
Video No No Yes
of video to webpage.
Enables introduction
Canvas No No Yes of graphics elements to
webpage.
There are several HTML editors available to the user (paid and
unpaid, both). The following is the list of some popular editors:
1. Notepad
2. TextEdit
3. Notepad++
4. Sublime
5. Visual Studio Code
6. Atom
7. Brackets
8. Adobe Dreamweaver CC
9. CoffeeCup
Heading Tags
Heading tags are used to define headings of documents. You can
use different sizes for your headings. HTML also has six levels of
headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>,
and <h6>. While displaying any heading, the browser adds one
line before and one line after that heading.
Example
Following HTML code demonstrates various levels of headings:
<!DOCTYPE html>
<html>
<head>
<title>Heading 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>
Paragraph Tag
The <p> tag offers a way to structure your text into different
paragraphs. Each paragraph of text should go in between an
opening <p> and a closing </p> tag.
Example
The following example demonstrates the use of paragraph (<p>)
tag, here we are defining 3 paragraphs −
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>
Center Tag
The <center> tag aligns text, images, or other HTML elements in
the middle of a web page.
Note: The <center> tag is deprecated in HTML5. You can use
the CSS text-align property to center elements.
Example
The following example demonstrates the use of the <center> tag.
Here, we are displaying the second paragraph in center
alignment:
<!DOCTYPE html>
<html>
<head>
<title>Centering Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>
On executing the above example, you can see a straight line
dividing the two paragraphs.
The <hr /> tag is an example of the empty element, where you do
not need opening and closing tags, as there is nothing to go in
between them.
The <hr /> element has a space between the characters hr and the
forward slash. If you omit this space, older browsers will have
trouble rendering the horizontal line, while if you miss the
forward slash character and just use <hr>, it is not valid in
XHTML.
Non-breaking Spaces
Non-breaking spaces prevent an automatic line break and are
displayed using the entity.
Suppose if you want to use the phrase "12 Angry Men." Here, you
would not want a browser to split the "12, Angry" and "Men"
across two lines −
An example of this technique appears in the movie "12 Angry
Men."
In cases, where you do not want the client browser to break text,
you should use a nonbreaking space entity instead of a
normal space. For example, when coding the "12 Angry Men" in
a paragraph, you should use something similar to the following
code −
Example
The following example demonstrates the use of entity −
<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>An example of this technique appears in the movie "12
Angry Men."</p>
<p>An example of this technique appears in the movie
"12 Angry Men."</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Listing Tags Example</title>
</head>
<body>
<h2>Unordered list</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h2>Ordered list</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
HTML - Elements
<!DOCTYPE html>
<html>
<head>
<title>Nested Elements Example</title>
</head>
<body>
<h1>This is <i>italic</i> heading</h1>
<p>This is <u>underlined</u> paragraph</p>
</body>
</html>
On executing the above example, we can observe the two
sentences where we have nested one HTML within another.
Note: In the above example, the <html>, <head>, and <body> tags
are also nested elements as they have one or more elements inside
them.
<img />
1
Used for inserting images within HTML documents.
<hr />
2
It displays a horizontal rule.
<br />
3
It is used to provide a line break.
<source />
4 It is used for embedding media resources like audio and
video.
Example
The following example demonstrates the example of HTML void
elements −
<!DOCTYPE html>
<html>
<body>
<p>This line contains a line break tag, <br> hence content is
visible in two separate lines.</p>
<p>This line is <hr>separated by a horizontal rule.</p>
</body>
</html>
On executing, the above code will produce two paragraphs, one
with a line break and the other with a horizontal rule.
<!DOCTYPE html>
<html>
<body>
<p>This line contains a line break tag, <br /> hence content is
visible in two separate lines.
<p>This line is <hr /> separated by a horizontal rule.
</body>
</html>
The above HTML code will produce two paragraphs, one with a
line break and the other with a horizontal rule.
Are HTML Elements Case-sensitive?
No, HTML elements are not case-sensitive, which means we can
write HTML elements either in uppercase or lowercase. However,
it is not a good practice, as W3C recommends and demands
lowercase. Hence, always try to use lowercase for the tag names.
Example
In the following example, we are writing HTML elements (tag
names) in uppercase and mixed case (uppercase and lowercase);
see the output; there is no error and HTML code runs fine −
<!DOCTYPE html>
<HTml>
<BODY>
<P>HTML is not case sensitive i.e we can use both upper or,
lower case letters in the tags.</p>
</BOdy>
</html>
HTML - Attributes
We have seen a few HTML tags and their usage, like heading
tags <h1>, <h2>, paragraph tags <p>, and other tags. We used
them so far in their simplest form, but most of the HTML tags can
also have attributes, which are extra bits of information.
What are HTML Attributes?
HTML attributes are special words that provide additional
information to an HTML element. Attributes are placed inside the
element's opening tag, and they are used to configure or adjust
the element's behavior. All attributes are made up of two parts:
a name and a value −
Name: The attribute name is the keyword, also known as the
attribute identifier, which defines a specific characteristic for
the element in which it is using. For example, the
paragraph <p> element (in the below-given example) has an
attribute "align", which defines the alignment of the
paragraph on the page.
Value: The attribute value is the data or information that
defines the value to be set for that attribute. The value is
assigned within the double quotes. For example, "left",
"center", or "right" can be assigned to the "align" attribute
with the paragraph tag (as shown in the below example).
Below is the syntax of an element HTML having attribute −
<tag_name attribute="Value">...</tag_name>
<!DOCTYPE html>
<html>
<head>
<title>Example of HTML Attributes</title>
</head>
<body>
<p align="left">Left Aligned</p>
<p align="center">Center Aligned</p>
<p align="right">Right Aligned</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>ID Attribute Example</title>
</head>
<body>
<p id="html">This para explains what is HTML</p>
<p id="css">This para explains what is Cascading Style
Sheet</p>
</body>
</html>
The title Attribute
The title attribute gives a suggested title for the element. The
syntax for the title attribute is similar as explained for id attribute
−
The behavior of this attribute will depend upon the element that
carries it, although it is often displayed as a tooltip when the
cursor comes over the element or while the element is loading.
Example
<!DOCTYPE html>
<html>
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h3 title="Hello HTML!">Titled Heading Tag Example</h3>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head>
<body>
<p style="font-family:arial; color:#FF0000;">Welcome to
bansal...</p>
</body>
</html>
ltr
1
Left to right (the default value)
2 rtl
Right to left (for languages such as Hebrew or Arabic that
are read right to left)
<!DOCTYPE html>
<html dir="rtl">
<head>
<title>Display Directions</title>
</head>
<body>
This is how IE 5 renders right-to-left directed text.
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>English Language Page</title>
</head>
<body>
This page is using English Language
</body>
</html>
<!DOCTYPE html>
<html>
<body>
</body>
</html>