HTML Archives - Learn Programming Language Step By Step

HTML ASCII Table Reference

ASCII stands for American Standard Code for Information Interchange.
In all there are 128 standard ASCII codes which can be represented by a 7 digit binary number
ASCII range starts from 0000000 to 1111111

7 Bit ASCII Codes

DEC	OCT	HEX	BIN	Symbol	HTML Code	Description
0	000	00	00000000	NUL	�	Null char
1	001	01	00000001	SOH		Start of Heading
2	002	02	00000010	STX		Start of Text
3	003	03	00000011	ETX		End of Text
4	004	04	00000100	EOT		End of Transmission
5	005	05	00000101	ENQ		Enquiry
6	006	06	00000110	ACK		Acknowledgment
7	007	07	00000111	BEL		Bell
8	010	08	00001000	BS		Back Space
9	011	09	00001001	HT		Horizontal Tab
10	012	0A	00001010	LF		Line Feed
11	013	0B	00001011	VT		Vertical Tab
12	014	0C	00001100	FF		Form Feed
13	015	0D	00001101	CR		Carriage Return
14	016	0E	00001110	SO		Shift Out / X-On
15	017	0F	00001111	SI		Shift In / X-Off
16	020	10	00010000	DLE		Data Line Escape
17	021	11	00010001	DC1		Device Control 1 (oft. XON)
18	022	12	00010010	DC2		Device Control 2
19	023	13	00010011	DC3		Device Control 3 (oft. XOFF)
20	024	14	00010100	DC4		Device Control 4
21	025	15	00010101	NAK		Negative Acknowledgement
22	026	16	00010110	SYN		Synchronous Idle
23	027	17	00010111	ETB		End of Transmit Block
24	030	18	00011000	CAN		Cancel
25	031	19	00011001	EM		End of Medium
26	032	1A	00011010	SUB		Substitute
27	033	1B	00011011	ESC		Escape
28	034	1C	00011100	FS		File Separator
29	035	1D	00011101	GS		Group Separator
30	036	1E	00011110	RS		Record Separator
31	037	1F	00011111	US		Unit Separator
32	040	20	00100000			Space
33	041	21	00100001	!	!	Exclamation mark
34	042	22	00100010	“	"	Double quotes
35	043	23	00100011	#	#	Number
36	044	24	00100100	$	$	Dollar
37	045	25	00100101	%	%	Procenttecken
38	046	26	00100110	&	&	Ampersand
39	047	27	00100111	‘	'	Single quote
40	050	28	00101000	(	(	Open parenthesis
41	051	29	00101001	)	)	Close parenthesis
42	052	2A	00101010	*	*	Asterisk
43	053	2B	00101011	+	+	Plus
44	054	2C	00101100	,	,	Comma
45	055	2D	00101101	-	-	Hyphen
46	056	2E	00101110	.	.	Period, dot or full stop
47	057	2F	00101111	/	/	Slash or divide
48	060	30	00110000	0	0	Zero
49	061	31	00110001	1	1	One
50	062	32	00110010	2	2	Two
51	063	33	00110011	3	3	Three
52	064	34	00110100	4	4	Four
53	065	35	00110101	5	5	Five
54	066	36	00110110	6	6	Six
55	067	37	00110111	7	7	Seven
56	070	38	00111000	8	8	Eight
57	071	39	00111001	9	9	Nine
58	072	3A	00111010	:	:	Colon
59	073	3B	00111011	;	;	Semicolon
60	074	3C	00111100	<	<	Less than
61	075	3D	00111101	=	=	Equals
62	076	3E	00111110	>	>	Greater than
63	077	3F	00111111	?	?	Question mark
64	100	40	01000000	@	@	At symbol
65	101	41	01000001	A	A	Uppercase A
66	102	42	01000010	B	B	Uppercase B
67	103	43	01000011	C	C	Uppercase C
68	104	44	01000100	D	D	Uppercase D
69	105	45	01000101	E	E	Uppercase E
70	106	46	01000110	F	F	Uppercase F
71	107	47	01000111	G	G	Uppercase G
72	110	48	01001000	H	H	Uppercase H
73	111	49	01001001	I	I	Uppercase I
74	112	4A	01001010	J	J	Uppercase J
75	113	4B	01001011	K	K	Uppercase K
76	114	4C	01001100	L	L	Uppercase L
77	115	4D	01001101	M	M	Uppercase M
78	116	4E	01001110	N	N	Uppercase N
79	117	4F	01001111	O	O	Uppercase O
80	120	50	01010000	P	P	Uppercase P
81	121	51	01010001	Q	Q	Uppercase Q
82	122	52	01010010	R	R	Uppercase R
83	123	53	01010011	S	S	Uppercase S
84	124	54	01010100	T	T	Uppercase T
85	125	55	01010101	U	U	Uppercase U
86	126	56	01010110	V	V	Uppercase V
87	127	57	01010111	W	W	Uppercase W
88	130	58	01011000	X	X	Uppercase X
89	131	59	01011001	Y	Y	Uppercase Y
90	132	5A	01011010	Z	Z	Uppercase Z
91	133	5B	01011011	[	[	Opening bracket
92	134	5C	01011100	\	\	Backslash
93	135	5D	01011101	]	]	Closing bracket
94	136	5E	01011110	^	^	Caret - circumflex
95	137	5F	01011111	_	_	Underscore
96	140	60	01100000	`	`	Grave accent
97	141	61	01100001	a	a	Lowercase a
98	142	62	01100010	b	b	Lowercase b
99	143	63	01100011	c	c	Lowercase c
100	144	64	01100100	d	d	Lowercase d
101	145	65	01100101	e	e	Lowercase e
102	146	66	01100110	f	f	Lowercase f
103	147	67	01100111	g	g	Lowercase g
104	150	68	01101000	h	h	Lowercase h
105	151	69	01101001	i	i	Lowercase i
106	152	6A	01101010	j	j	Lowercase j
107	153	6B	01101011	k	k	Lowercase k
108	154	6C	01101100	l	l	Lowercase l
109	155	6D	01101101	m	m	Lowercase m
110	156	6E	01101110	n	n	Lowercase n
111	157	6F	01101111	o	o	Lowercase o
112	160	70	01110000	p	p	Lowercase p
113	161	71	01110001	q	q	Lowercase q
114	162	72	01110010	r	r	Lowercase r
115	163	73	01110011	s	s	Lowercase s
116	164	74	01110100	t	t	Lowercase t
117	165	75	01110101	u	u	Lowercase u
118	166	76	01110110	v	v	Lowercase v
119	167	77	01110111	w	w	Lowercase w
120	170	78	01111000	x	x	Lowercase x
121	171	79	01111001	y	y	Lowercase y
122	172	7A	01111010	z	z	Lowercase z
123	173	7B	01111011	{	{	Opening brace
124	174	7C	01111100	\|	\|	Vertical bar
125	175	7D	01111101	}	}	Closing brace
126	176	7E	01111110	~	~	Equivalency sign (tilde)
127	177	7F	01111111			Delete

Extended ASCII Codes

Below is set of additional 128 Extended ASCII Codes according to ISO 8859-1 these are also called as ISO Latin-1.

DEC	OCT	HEX	BIN	Symbol	HTMLCode	Description
128	200	80	10000000	€	€	Euro sign
129	201	81	10000001
130	202	82	10000010	‚	‚	Single low-9 quotation mark
131	203	83	10000011	ƒ	ƒ	Latin small letter f with hook
132	204	84	10000100	„	„	Double low-9 quotation mark
133	205	85	10000101	…	…	Horizontal ellipsis
134	206	86	10000110	†	†	Dagger
135	207	87	10000111	‡	‡	Double dagger
136	210	88	10001000	ˆ	ˆ	Modifier letter circumflex accent
137	211	89	10001001	‰	‰	Per mille sign
138	212	8A	10001010	Š	Š	Latin capital letter S with caron
139	213	8B	10001011	‹	‹	Single left-pointing angle quotation
140	214	8C	10001100	Œ	Œ	Latin capital ligature OE
141	215	8D	10001101
142	216	8E	10001110	Ž	Ž	Latin capital letter Z with caron
143	217	8F	10001111
144	220	90	10010000
145	221	91	10010001	‘	‘	Left single quotation mark
146	222	92	10010010	’	’	Right single quotation mark
147	223	93	10010011	“	“	Left double quotation mark
148	224	94	10010100	”	”	Right double quotation mark
149	225	95	10010101	•	•	Bullet
150	226	96	10010110	–	–	En dash
151	227	97	10010111	—	—	Em dash
152	230	98	10011000	˜	˜	Small tilde
153	231	99	10011001	™	™	Trade mark sign
154	232	9A	10011010	š	š	Latin small letter S with caron
155	233	9B	10011011	›	›	Single right-pointing angle quotation mark
156	234	9C	10011100	œ	œ	Latin small ligature oe
157	235	9D	10011101
158	236	9E	10011110	ž	ž	Latin small letter z with caron
159	237	9F	10011111	Ÿ	Ÿ	Latin capital letter Y with diaeresis
160	240	A0	10100000			Non-breaking space
161	241	A1	10100001	¡	¡	Inverted exclamation mark
162	242	A2	10100010	¢	¢	Cent sign
163	243	A3	10100011	£	£	Pound sign
164	244	A4	10100100	¤	¤	Currency sign
165	245	A5	10100101	¥	¥	Yen sign
166	246	A6	10100110	¦	¦	Pipe, Broken vertical bar
167	247	A7	10100111	§	§	Section sign
168	250	A8	10101000	¨	¨	Spacing diaeresis - umlaut
169	251	A9	10101001	©	©	Copyright sign
170	252	AA	10101010	ª	ª	Feminine ordinal indicator
171	253	AB	10101011	«	«	Left double angle quotes
172	254	AC	10101100	¬	¬	Not sign
173	255	AD	10101101			Soft hyphen
174	256	AE	10101110	®	®	Registered trade mark sign
175	257	AF	10101111	¯	¯	Spacing macron - overline
176	260	B0	10110000	°	°	Degree sign
177	261	B1	10110001	±	±	Plus-or-minus sign
178	262	B2	10110010	²	²	Superscript two - squared
179	263	B3	10110011	³	³	Superscript three - cubed
180	264	B4	10110100	´	´	Acute accent - spacing acute
181	265	B5	10110101	µ	µ	Micro sign
182	266	B6	10110110	¶	¶	Pilcrow sign - paragraph sign
183	267	B7	10110111	·	·	Middle dot - Georgian comma
184	270	B8	10111000	¸	¸	Spacing cedilla
185	271	B9	10111001	¹	¹	Superscript one
186	272	BA	10111010	º	º	Masculine ordinal indicator
187	273	BB	10111011	»	»	Right double angle quotes
188	274	BC	10111100	¼	¼	Fraction one quarter
189	275	BD	10111101	½	½	Fraction one half
190	276	BE	10111110	¾	¾	Fraction three quarters
191	277	BF	10111111	¿	¿	Inverted question mark
192	300	C0	11000000	À	À	Latin capital letter A with grave
193	301	C1	11000001	ÿ	Á	Latin capital letter A with acute
194	302	C2	11000010	Â	Â	Latin capital letter A with circumflex
195	303	C3	11000011	Ã	Ã	Latin capital letter A with tilde
196	304	C4	11000100	Ä	Ä	Latin capital letter A with diaeresis
197	305	C5	11000101	Å	Å	Latin capital letter A with ring above
198	306	C6	11000110	Æ	Æ	Latin capital letter AE
199	307	C7	11000111	Ç	Ç	Latin capital letter C with cedilla
200	310	C8	11001000	È	È	Latin capital letter E with grave
201	311	C9	11001001	É	É	Latin capital letter E with acute
202	312	CA	11001010	Ê	Ê	Latin capital letter E with circumflex
203	313	CB	11001011	Ë	Ë	Latin capital letter E with diaeresis
204	314	CC	11001100	Ì	Ì	Latin capital letter I with grave
205	315	CD	11001101	ÿ	Í	Latin capital letter I with acute
206	316	CE	11001110	Î	Î	Latin capital letter I with circumflex
207	317	CF	11001111	ÿ	Ï	Latin capital letter I with diaeresis
208	320	D0	11010000	ÿ	Ð	Latin capital letter ETH
209	321	D1	11010001	Ñ	Ñ	Latin capital letter N with tilde
210	322	D2	11010010	Ò	Ò	Latin capital letter O with grave
211	323	D3	11010011	Ó	Ó	Latin capital letter O with acute
212	324	D4	11010100	Ô	Ô	Latin capital letter O with circumflex
213	325	D5	11010101	Õ	Õ	Latin capital letter O with tilde
214	326	D6	11010110	Ö	Ö	Latin capital letter O with diaeresis
215	327	D7	11010111	×	×	Multiplication sign
216	330	D8	11011000	Ø	Ø	Latin capital letter O with slash
217	331	D9	11011001	Ù	Ù	Latin capital letter U with grave
218	332	DA	11011010	Ú	Ú	Latin capital letter U with acute
219	333	DB	11011011	Û	Û	Latin capital letter U with circumflex
220	334	DC	11011100	Ü	Ü	Latin capital letter U with diaeresis
221	335	DD	11011101	ÿ	Ý	Latin capital letter Y with acute
222	336	DE	11011110	Þ	Þ	Latin capital letter THORN
223	337	DF	11011111	ß	ß	Latin small letter sharp s - ess-zed
224	340	E0	11100000	à	à	Latin small letter a with grave
225	341	E1	11100001	á	á	Latin small letter a with acute
226	342	E2	11100010	â	â	Latin small letter a with circumflex
227	343	E3	11100011	ã	ã	Latin small letter a with tilde
228	344	E4	11100100	ä	ä	Latin small letter a with diaeresis
229	345	E5	11100101	å	å	Latin small letter a with ring above
230	346	E6	11100110	æ	æ	Latin small letter ae
231	347	E7	11100111	ç	ç	Latin small letter c with cedilla
232	350	E8	11101000	è	è	Latin small letter e with grave
233	351	E9	11101001	é	é	Latin small letter e with acute
234	352	EA	11101010	ê	ê	Latin small letter e with circumflex
235	353	EB	11101011	ë	ë	Latin small letter e with diaeresis
236	354	EC	11101100	ì	ì	Latin small letter i with grave
237	355	ED	11101101	í	í	Latin small letter i with acute
238	356	EE	11101110	î	î	Latin small letter i with circumflex
239	357	EF	11101111	ï	ï	Latin small letter i with diaeresis
240	360	F0	11110000	ð	ð	Latin small letter eth
241	361	F1	11110001	ñ	ñ	Latin small letter n with tilde
242	362	F2	11110010	ò	ò	Latin small letter o with grave
243	363	F3	11110011	ó	ó	Latin small letter o with acute
244	364	F4	11110100	ô	ô	Latin small letter o with circumflex
245	365	F5	11110101	õ	õ	Latin small letter o with tilde
246	366	F6	11110110	ö	ö	Latin small letter o with diaeresis
247	367	F7	11110111	÷	÷	Division sign
248	370	F8	11111000	ø	ø	Latin small letter o with slash
249	371	F9	11111001	ù	ù	Latin small letter u with grave
250	372	FA	11111010	ú	ú	Latin small letter u with acute
251	373	FB	11111011	û	û	Latin small letter u with circumflex
252	374	FC	11111100	ü	ü	Latin small letter u with diaeresis
253	375	FD	11111101	ý	ý	Latin small letter y with acute
254	376	FE	11111110	þ	þ	Latin small letter thorn
255	377	FF	11111111	ÿ	ÿ	Latin small letter y with diaeresis

November 15, 2024 By Pritesh HTML HTML : Basics 0 Comments Read more...

HTML Paragraph

In HTML we use paragraph for dividing the document in the sections. It is usually good practice to use paragraph while dividing the big document in the small pieces.

HTML Paragraph :

<p>This is a paragraph 1</p>
<p>This is a paragraph 2</p>
<p>This is a paragraph 3</p>

Try it Yourself »

In the HTML, When we write anything in the paragraph then browser will automatically add empty line before and after the paragraph.

HTML Para without End Tag :

HTML do support the paragraph without end tag. One thing should be keep in mind that future versions and XHTML versions of HTML will not support this.

<p>This is a paragraph 1
<p>This is a paragraph 2
<p>This is a paragraph 3

Try it Yourself »

Paragraph and Browser :

Browser will automatically render the paragraph tag of HTML. The paragraph can be used to show the paragraph in styled manner.

<p>
This is a paragraph 1 and line 1
This is a paragraph 1 and line 2
This is a paragraph 1 and line 3
</p>

Try it Yourself »

Though we have added multiple spaces inside the paragraph, HTML will remove all the extra spaces and extra lines. Try out above program yourself to get more idea.

Examples of HTML :

No	Example
1.	Paragraph Example in HTML
2.	Paragraph without ending tag
3.	Paragraph with multiple lines using line break
4.	Paragraph with extra space and lines

December 17, 2024 By Pritesh HTML HTML : Basics 0 Comments Read more...

HTML Heading :

If we want to make the some part of the text appears to be under some heading then we can use the heading tags in HTML.
HTML supports 6 types of headings.
These are the headings defined in HTML - <h1>,<h2>,<h3>,<h4>,<h5>,<h6>
<h1> type of heading is having more importance than any other type of heading.
<h6> heading is having least importance.
Browser adds some empty space (margin) before each heading

HTML Heading Example

Example #1 : Simple heading

below example of HTML heading will illustrate the headings in HTML.

Example :

<h1>This is H1 Heading</h1>
<h2>This is H2 Heading</h2>
<h3>This is H3 Heading</h3>
<h4>This is H4 Heading</h4>
<h5>This is H5 Heading</h5>
<h6>This is H6 Heading</h6>

Edit Yourself »

Example #2 : Heading with HR

Example :

<h1>This is H1 Heading</h1>
<hr />
<h2>This is H2 Heading</h2>
<hr />
<h3>This is H3 Heading</h3>
<hr />
<h4>This is H4 Heading</h4>
<hr />
<h5>This is H5 Heading</h5>
<hr />
<h6>This is H6 Heading</h6>

Edit Yourself »

Example #3 : Heading vs Head

There are chances of confusion while interpreting head and heading tags. But important thing is that both tags are completely different

Example :

<head>
<title>This is Head tag</title>
</head>
<body>
<h1>This is Heading tag not head tag</h1>
<h2>This is Heading tag not head tag</h2>
<h3>This is Heading tag not head tag</h3>
</body>

Edit Yourself »

Head tag is a container for meta data. Meta data are not displayed in the browser window

HTML Heading Tips :

HTML heading should not be used in web document for just making text bold.
Headings are having the some importance in the Search Engine.
Most important part of the webpage should be titled with H1 heading and Sub Point should have H2 type heading

November 12, 2024 By Pritesh HTML HTML : Basics 0 Comments Read more...

HTML Attributes

Sometimes in HTML tags are not enough to perform the necessary action. We need some extra bits of information of particular tag.

HTML attributes are used to provied the extra information about the HTML tags.

HTML attributes

HTML attributes provides extra bits of information about HTML element.
HTML attributes are used to define characteristics of HTML element
HTML attributes are placed inside the element’s opening tag.
HTML element can have any number of HTML attributes
HTML attributes comprise of two parts name and a value
HTML attribute names and attribute values are case-insensitive. According to World Wide Web Consortium (W3C) recommendation lowercase attributes/attribute values are preferable

Attribute part	Explanation
name	It specifies the name of an attribute or property
value	It specifies the value of the attribute or property

<a href="https://www.c4learn.com">Link to Homepage</a>

In the above example,

Element is	<a>
Attribute Name is	href
Attribute Value is	https://www.c4learn.com

We have defined the anchor tag for defining the link. Attribute name provides the information about an anchor element and its value is provided by the attribute value.

Some tips for Using HTML Attributes :

HTML attributes are generally used for providing some extra information. We have list out some important points regarding the attributes in HTML -

Tip 1 : Attribute value must be quoted

Any of the HTML attribute value must written inside the double quotes.
Double quote or single quote , both are allowed for wrapping the attribute value.
Commonly Double quote is preferable, when attribute value itself contain the double quote then single quote can be used for wrapping the attribute value

name = 'New Delhi "102" Colony'

Tip 2 : Use Attribute values in lower case

Previous versions of HTML does not force us to use the attribute values in the lowercase but W3C recommends lowercase attributes in HTML 4 recommendation
It is always good practice to use the attribute name in lower case.
HTML is case insensitive markup language so it does not create any harm if uppercase attribute name is used because browsers are smart enough to interpret the lowercase and uppercase tags
Newer versions of (X)HTML will demand lowercase attributes.

Some common examples are listed below -

<div class  = "content"></div>
<div Class  = "content"></div>
<div clAss  = "content"></div>
<div ClaSS  = "content"></div>

all of the above div’s represents the same.

HTML core attributes

Below attributes are used commonly in HTML elements -

Attribute	Explanation
alt	Specifies an alternative text for an image
disabled	Specifies that an input element should be disabled
href	Specifies the URL (web address) for a link
id	Specifies a unique id for an element
src	Specifies the URL (web address) for an image
style	Specifies an inline CSS style for an element
title	Specifies extra information about an element (displayed as a tool tip)
value	Specifies the value (text content) for an input element.

<!DOCTYPE html>
<html>
<head>
<title>Align Attribute  Example</title>
</head>
<body>
<p align="left">Left aligned</p>
<p align="center">Center aligned</p>
<p align="right">Right aligned</p>
</body>
</html>

Edit Yourself »

The id Attribute

If we need to identify an elment in HTML uniquely then we can use id attribute

<p id="id1">This is para with ID #1</p>
<p id="id2">This is para with ID #2</p>
<p id="id3">This is para with ID #3</p>

Edit Yourself »

The title Attribute

The title attribute is used to give title to an element. Generally title attribute value is displayed as a tooltip when cursor comes over the element

<p title="Tooltip 1">This is para with Tooltip #1</p>
<p title="Tooltip 2">This is para with Tooltip #2</p>
<p title="Tooltip 3">This is para with Tooltip #3</p>

Edit Yourself »

The class Attribute

When we need to attach styling information to multiple elements in HTML then we use class attribute.

The style Attribute

<p style="font-family:arial; color:#FF0000;">Style 1</p>
<p style="font-family:arial; color:#00FF00;">Style 2</p>
<p style="font-family:arial; color:#0000FF;">Style 3</p>

Edit Yourself »

November 10, 2024 By Pritesh HTML HTML : Basics 0 Comments Read more...

HTML Meta Tags

The term metadata refers to data about data. It is information about the document rather than the content of the document.

HTML Meta Tags :

The <meta> tag provides information about the HTML document
The <meta> tag is an empty tag which does not have closing tag associated with it
The <meta> tag contain the specific information within attribute.
The <meta> tag provides information to the search engine such as content of the page , author of the document etc
The <meta> tag information is not displayed in the webpage
The <meta> tag information is used by browsers,search engines and different web services.
The <meta> tag information is always written inside the <head> section of the web page.

Attributes of Meta Tags :

As stated above, meta information is always written within the attributes. Below are the different attributes used by Meta tags -

Attribute	Description
Name	Name attribute is used to specify the type of mete information to be displayed. It can be keywords	description	author	revised	generator etc.
content	Specifies the value or content of the meta tag
scheme	Specifies a Scheme to use to interpret the meta tag's value
http-equiv	Used for http response message headers.

Meta Tag Examples :

1. Define keywords for Search Engines :

We can define the keywords for the webpage using the meta tag attribute “keywords“. It is used to tell importatnt keywords of the page using keyword attribute.

<meta name="keywords" content="HTML,CSS">

Nowdays Search engines are intelligent enough to identify the keywords of the page by parsing complete page so most of the search engines are not using this meta information.

2. Define description of Web Page :

<meta name="description" content="HTML Tutorials">

3. Define author :

Meta tag provides us the way to define the author of the webpage. Author attribute used to specify the author of the webpage.

<meta name="author" content="Pritesh Taral">

4. Refresh document after every 10 seconds :

Some times it is required to refresh the webpage after some time interval. In that case following meta information will do work for you.

<meta http-equiv="refresh" content="10">

Time interval is defined in seconds. So the above meta information will refresh the page after 10 seconds.

5. Document Revision date :

When document is updated after the longer period then following meta information will provide information to search engine that this document has be revised on the date specified.

<meta name="revised" content="Last Revisied, 11/10/2024" />

6. Page redirection after every 10 seconds :

Following meta information will redirect the current webpage to the address specified after certain interval of time.

Example :

<html>
<head>
<title>Meta Refresh Example</title>
<meta http-equiv="refresh" 
         content="5; url=https://www.c4learn.com" />
</head>
<body>
<p>This is first paragraph</p>
<p>This is second paragraph</p>
<p>This is third paragraph</p>
</body>
</html>

Edit Yourself »

Above tag will redirect the webpage to the address specified after 10 seconds

November 10, 2024 By Pritesh HTML HTML : Basics 0 Comments Read more...

HTML Basic Elements :

Any of the HTML document should contain the at least following basic tags.

<html>	The main container for HTML pages
<head>	The container for page header information
<title>	The title of the page
<body>	The main body of the page

We have already seen these tags in previous chapters, but in this chapter we will be learning each tag in more details -

A. <html> Tag :

It is the most important tag in HTML. Each and everything we write in the HTML document goes inside the HTML Tag.
HTML tag contain basic nested tags called - <head> and <body>
It represents the root of the HTML document.
<html> tells browser that the document you are looking is HTML document.

The <html> tag is the container for all other HTML elements (except for the tag).

B. <head> Tag :

All the head elements can go inside the head tag. Following are the elements that can be written inside the head tag. The following elements can go inside the <head> element:

<title>	It it required tag in the head section. It defines the Title of the HTML document.
<style>	It is used to define style information for an HTML document.
<base>	It Specifies a default URL and a default target for all links on a page
<link>	It is used to link external style sheet to an HTML document.
<meta>	It is used to describe the meta data information of the HTML document.
<script>	It is used to include interactive code to an HTML document. It is used to include JS or jQuery code
<noscript>	It is used to show alternate content to the user where JavaScript is disabled.

C. <title> Tag :

<title> tag is used for the defining title of the web page. It is most important tag for Search Engine Optimization perspective.

<head>
<title>Title of Document</title>
</head>

November 10, 2024 By Pritesh HTML HTML : Basics 0 Comments Read more...

HTML Elements : Defining Web Document

Every control visible on website such as paragraph, buttons, images are called as HTML Element
HTML provides some pre-defined elements those are -
- Anchor Element
- List Elements
- Table Element
- Image Element
HTML documents are defined by HTML elements.

Writing HTML Element

It is very simple task to write HTML element. We have pre-defined set of HTML elements and each element is represented using the starting and ending tag.

<starttag> Element Data </endtag>

In this case you can we have wrapped message text in the pair of opening and closing tags. Consider the following example -

<h2>This is H2 Type heading</h2>

HTML Tags are used to tell browser, how to show elements and how to represent the webpage.

Few HTML Elements

Start tag	Element content	End tag
<h1>	Sample Heading 1	</h1>
<p>	Sample paragraph 1	</p>
<br>

June 9, 2024 By Pritesh HTML HTML : Basics 0 Comments Read more...

First HTML Example :

<!DOCTYPE html>
<html>
<body>
<h1>This is Heading</h1>
<p>This is Paragraph</p>
</body>
</html>

Explanation of Example

Tag	Explanation
<!DOCTYPE html>	This will define HTML document
<html> and </html>	Text between html tag will describe the webpage
<body> and </body>	Text between the body tag is only visible content on the webpage
<h1> and </h1>	Text between the h1 tag displays Heading
<p> and </p>	Text between the p tag displays paragraph

HTML Tags

Web Page consists of HTML tags which is basic building block of Web Page.
HTML Tags are Keywords surrounded with starting angular bracket and closing angular bracket
Generally each HTML tag comes in a pair except some tags which do not have closing tags.
Starting tag is also known as opening Tag while ending tag is also known as closing tag

HTML document structure

HTML document rules

HTML elements can be nested

HTML tags can be nested. One HTML Element can have other HTML elements inside it. e.g -

<body>
    <h1><b>This is a Heading</b></h1>
    <b>Text is bold</b>
</body>

in the above HTML markup, We have nested the HTML elements.

HTML documents are case-insensitive

We can write HTML code in either cases i.e in Uppercase or in lowercase.

<h1><b>This is a Heading</b></h1>

and

<H1><b>This is a Heading</B></h1>

both of the above lines will print same result.

June 9, 2024 By Pritesh HTML HTML : Basics 0 Comments Read more...

What are the Different Types of DOM ?

The W3C DOM standard is separated into 3 different parts:

Core DOM
XML DOM
HTML DOM

No	DOM Type	Purpose/Use of DOM
1.	Core DOM	Standard Model for Accessing any Structured Document.
2.	HTML DOM	Standard Model for Accessing HTML Document.
3.	XML DOM	Standard Model for Accessing XML Document.

What is HTML DOM ?

The HTML DOM is :

A standard object model for HTML
A standard programming interface for HTML
A W3C standard

The HTML DOM defines the objects and properties of all HTML elements, and the methods to access them.

What is XML DOM ?

The DOM is used by a higher-level application.
[one_third last=”no”][/one_third] In order to write an application that will be accessing an XML document through the DOM, you need to have an XML parser and a DOM implementation installed on your machine.

XML DOM is used to access the XML document. The XML DOM defines the objects and properties of all XML elements, and the methods to access them.

October 19, 2024 By Pritesh HTML HTML : DOM 0 Comments Read more...

HTML Tools & Editors

Tools Required to Learn HTML :

1. Computer | Laptop

You have everything with you to learn HTML.
Our First Requirement is that - “You must have Computer“.
Even minimum configuration of PC can support HTML.

2. Text Editor Or HTML Editor

When you install any Operating System then OS provides us basic text editor. (e.g Window Provides us Notepad and WordPad)
WordPad and Notepad are free editor comes along window.
These Editors are simple editor that makes our writing task more difficult. So we are going to switch over “Notepad++“.
You can download Notepad++. It is free text editor used to highlight syntax. i.e Tags are highlighted in color so that our task becomes more and more easier. (Download Notepad++ Here)

If you want the best HTML editor, and you don’t mind paying money for it, you can’t go past Adobe Dreamweaver. Dreamweaver is probably the best HTML editor available, and you can download a trial version for starters.

Some Examples of Text Editors :

OS	Editors
Window	Coffee Cup/Notepad/WordPad
Linux	Pico
MAc	Simpletext/Text Edit/Text Wrangler

3. Web Browser

Name of Browser	Company	Default Browser in OS
Internet Explorer	Microsoft	Windows
Mozilla Firefox	Open Source Group	Linux
Opera	-	-
Safari	Apple Inc.	MAC
Google Chrome	Google	Android/Chrome OS

Create Simple HTML File :

Write below code in the notepad file -

<html>
<head>
    <title>This is Document Title</title>
</head>
<body>
    <h1>This is a Heading</h1>
    <b>Text is bold</b>
</body>
</html>

Now Save the notepad file using the .html/.html extension.

Don’t forgot to select “All files” from the “Save as Type” drop down. Otherwise your HTML file will be saved as intro.html.txt.

March 19, 2025 By Pritesh HTML HTML : Basics 0 Comments Read more...