Post Details
Learn basics of HTML5
What is HTML
HTML stands for Hypertext Markup Language.
it is made up of three words Hypertext, Markup, Language
What is mean by Hypertext ?
The Word Hyper means something which is not normal right. for example
-
- Hypertension:
it refers to tension which is not normal
-
- Hyperspeed
it refers to speed beyond normal speed
-
- Hyperthyrodism
it refers to thyroid which is beyond normal range
Similarly Hypertext means that text in HTML document is not just normal text but it could be use for linking other pages, documents or media so HTML is called as Hypertext
Why it is Markup ?
HTML is used to markup means annotate plaintext writtern in HTML documents.
Language ?
Language is the medium for communication.
HTML Documents structure
html is made up of two main section head section and body section
following is the document structure of HTML document:
<html>
<head>
<title>
mytitle
</title>
</head>
<body>
<p>welcome to HTML5</p>
</body>
</html>
Formatting Text by Using Tags
Bold : is used to make text bold. <b> and <strong> tags both could be used for making text bold. both comes with pair of tags. but there is also difference between <b> and <strong> that is <b> tag is mainly for presentational purpose it does not provide any semantic meaning to the text it has wrapped. where as <strong> tag provide semantic meaning to text it enclosed. it tell to browser the importance of that text which it has enclosed.
<b>
Look at me I am Bold
</b>
<strong>
Look at me I have semantic meaning
</strong>
italic : is used to make text italic. <i> and <em> tags both could be used for making text italic. both comes with pair of tags. but there is also difference between <i> and <em> that is <i> tag is mainly for presentational purpose it does not provide any semantic meaning to the text it has wrapped or enclosed . where as <em> tag provide semantic meaning to text it enclosed. it tell to browser the importance of that text which it has enclosed.
<i>
Look at me I am italic
</i>
<em>
Look at me I have semantic meaning too.
</em>
Creating Headings in HTML5 :
Html5 provides us levels of heading tags from h1 to h6 in order to displays headings on web page.
you can make an use of particular level of heading tag as per your requirements.
h1 displays top level heading
h2 displays second level heading
h3 displays third leval heading
h4 displays 4th leval heading
h5 displays 5th leval heading
h6 is use to display 6th leval heading
Example demonstrates all leval of headings tag
<html>
<head>
<title> heading tags in HTML5 </title>
</head>
<body>
<h1>hi i am top level heading</h1>
<h2>hi i am top level heading</h2>
<h3>hi i am top level heading</h3>
<h4>hi i am top level heading</h4>
<h5>hi i am top level heading</h5>
<h6>hi i am top level heading</h6>
</body>
</html>
Output :
hi i am First level heading
hi i am second level heading
hi i am third level heading
hi i am fourth level heading
hi i am fifth level heading
hi i am 6th level heading
Superscript and Subscript in HTML5: –
Subscript:
it refers to the text which displays just or slightly below to normal line of text.
commonly for chemical formulas or mathematical indices.
eg . H2O
Look at it , here 2 is below to normal line of text called as subscript
Superscript:
it refers to the text which displays just or slightly above to normal line of text.
commonly for exponents.
eg. O2 , X 3 , X 2 are few examples of superscript.
Complete HTML5 demonstrating use of subscript and Superscript
<html>
<head>
<title> Subscript and superscript</title>
</head>
</html>
Output :
Example of Subscripts are :
H2O
Example of Superscripts are :
O2
X 3
X 2
Monospace and Preformatted Text in HTML5 :
Monospace means “of equal width“
In HTML, monospace text refers to text where each character occupies the same amount of horizontal space,
Eg . Width of Letter m is more compare to i
This is often used for displaying code, preformatted text, or other content where consistent spacing is important
<tt></tt> teletype text used in older versions
HTML5 :
<kbd></kbd>
<pre></pre> element is displayed in a fixed-width font, and the text preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code.
<code></code>
<smap></samp>Define some text as sample output from a computer program in your text content
Eg of samp
The samp element
Message from my computer:
File not found.
Press F1 to continue
Complete HTML5 demonstrating Monospace and preformatted Text :
Output :
This text is monospaced in this paragraph
element is displayed in a fixed-width font,
and the text preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code.
The Variable declaration in javascript is like this : var c=76
when printing is done , it will output text print job completed you can turn off the printer
LIST in HTML5 :
List in Html refers to the structured way of presenting or Listing group of related items on Web page.
it enhance the redability.
it also help to organize content.
There are mainly three Types of List in Html5.
-
- unordered List
it is used to group set of related items in no perticular order
-
- Ordered List
it is used to group set of related items in specific order
-
- definition List
it is used to display name/value pairs such as terms and definition
Examples Of Unordered List:
<html>
<head>
<title> unordered List </title>
</head>
<body>
<ul>
<li>milk</li>
<li>bread</li>
<li>butter</li>
<li>Coffee</li>
</ul>
</body>
</html>
Examples Of ordered List:
Cooking instructions
- gather ingredients
- mix ingredients together
- place all ingredients in backing dish
- bake in oven for an hour.
- remove from oven
- allow to stand for 10 minutes
- Serve
if order will be change information will not make sense.
- gather ingredients
- bake in oven for an hour.
- Serve
- remove from oven
- place all ingredients in backing dish
- allow to stand for 10 minutes
- mix ingredients together
HTML5 document structure for ordered List:
<html>
<head>
<title> ordered List </title>
</head>
<body>
</body>
</html>
Examples Of definition List/description List:
Output :
definition list Example1
- sname
- nidhi
definition list Example2
- name1
- seema
- name2
- john
- name3
- sahil
- name4
- mona
Special Characters in HTML5
| Symbol | Code | Output |
|---|---|---|
| < |
<
|
< |
| > | > | > |
| © |
©
|
© |
|
₹
|
₹
|
₹ |
| & | & | & |
|
♥
|
♥
|
♥
|
Output :
special character
2 < 5 and 5 > 2
Copyright © 2025 MyWebsite
Price: ₹ 500
I ♥ HTML
Horizontal Lines in HTML :
<hr> tag is used to display horizontal line.
it is single tag
Examples Of horizontal line:
Output :
Horizontal Line
Attributes :
In general Attributes refers to properties that represent entities or object.
For example pen is that entity or object then color , shape , brand, size, sharpness are the few examples of attributes.
In HTML5 , we can say attributes means properties that represents HTML element.
<tag_name attribute=“Value“>…</tag_name>
Example :
Hyperlink in HTML5 :
IN HTML Links, also called as hyperlinks.
<a> tag is used in HTML for creating Hyperlink, which stands for “anchor.”
These links are essential for navigating between web pages and directing users to different sites, documents, or sections within the same page.
The commonly used attributes of the <a> tag include href, target, among others.
<a href=”https://www.amazon.in”>go to amazon</a>
<a href=”https://www.amazon.in” target=”_blank”>go to amazon</a>
alink , vlink and link are attributes of body tag that control the color of hyperlinks at different states.
link :
default color of unvisited link.
This is the color a link appears before user has clicked on it.
alink :
it is Active link.
This attribute specifies the color of a link when it is actively being clicked by user.
when user clicked on a link , it temporarily changes the color before navigating to new page.
vlink:
it is visited link.
This attributes specifies the color of a link after it has been visited by user. once a user clicks on a link and navigates to the destination, the links color changes to the one specified by vlink to indicate page has already been accessed.