All About HTML

blowdata4u

Make Money Online
Joined
Jul 12, 2009
Messages
26
Reaction score
1
Points
2
What is HTML?

HTML is a language for describing web pages.

* HTML stands for Hyper Text Markup Language
* HTML is not a programming language, it is a markup language
* A markup language is a set of markup tags
* HTML uses markup tags to describe web pages

HTML Tags

HTML markup tags are usually called HTML tags

* HTML tags are keywords surrounded by angle brackets like <html>
* HTML tags normally come in pairs like <b> and </b>
* The first tag in a pair is the start tag, the second tag is the end tag
*

Start and end tags are also called opening tags and closing tags.
HTML Documents = Web Pages

* HTML documents describe web pages
* HTML documents contain HTML tags and plain text
* HTML documents are also called web pages

The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page:
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph</p>

</body>
</html>


Example Explained

* The text between <html> and </html> describes the web page
* The text between <body> and </body> is the visible page content
* The text between <h1> and </h1> is displayed as a heading
* The text between <p> and </p> is displayed as a paragraph

Editing HTML

In this tutorial we use a plain text editor (like Notepad) to edit HTML. We believe this is the best way to learn HTML.

However, professional web developers often prefer HTML editors like FrontPage or Dreamweaver, instead of writing plain text.
HTM or HTML Extension?

When you save an HTML file, you can use either the .htm or the .html extension. We use .htm in our examples. It is a habit from the past, when the software only allowed three letters in file extensions.

With new software it is perfectly safe to use .html.
HTML Headings

HTML headings are defined with the <h1> to <h6> tags.
HTML Paragraphs

HTML paragraphs are defined with the <p> tag.
HTML Links

HTML links are defined with the <a> tag.
Example
<a href="http://www.w3schools.com">This is a link</a>
HTML Images

HTML images are defined with the <img> tag.
Example
<img src="w3schools.jpg" width="104" height="142" />
HTML Elements

An HTML element is everything from the start tag to the end tag:
Start tag * Element content End tag *
<p> This is a paragraph </p>
<a href="default.htm" > This is a link </a>
<br />

* The start tag is often called the opening tag. The end tag is often called the closing tag.
HTML Element Syntax

* An HTML element starts with a start tag / opening tag
* An HTML element ends with an end tag / closing tag
* The element content is everything between the start and the end tag
* Some HTML elements have empty content
* Empty elements are closed in the start tag
* Most HTML elements can have attributes

(You will learn about element attributes in the next chapter of this tutorial)
Nested HTML Elements

Most HTML elements can be nested (can contain other HTML elements).

HTML documents consist of nested HTML elements.
Empty HTML Elements

HTML elements without content are called empty elements. Empty elements can be closed in the start tag.

<br> is an empty element without a closing tag (it defines a line break).

In XHTML, XML, and future versions of HTML, all elements must be closed.

Adding a slash to the start tag, like <br />, is the proper way of closing empty elements, accepted by HTML, XHTML and XML.

Even if <br> works in all browsers, writing <br /> instead is more future proof.
HTML Attributes

* HTML elements can have attributes
* Attributes provide additional information about the element
* Attributes are always specified in the start tag
* Attributes come in name/value pairs like: name="value"

Attribute Example

HTML links are defined with the <a> tag. The link address is provided as an attribute:
Example
<a href="http://www.w3schools.com">This is a link</a>
Always Quote Attribute Values

Attribute values should always be enclosed in quotes.

Double style quotes are the most common, but single style quotes are also allowed.

In some rare situations, like when the attribute value itself contains quotes, it is necessary to use single quotes:

name='John "ShotGun" Nelson'
Ordered Alphabetically

DTD: indicates in which XHTML 1.0 DTD the tag is allowed. S=Strict, T=Transitional, and F=Frameset
Tag Description DTD
<!--...--> Defines a comment STF
<!DOCTYPE> Defines the document type STF
<a> Defines an anchor STF
<abbr> Defines an abbreviation STF
<acronym> Defines an acronym STF
<address> Defines contact information for the author/owner of a document STF
<applet> Deprecated. Defines an embedded applet TF
<area /> Defines an area inside an image-map STF
<b> Defines bold text STF
<base /> Defines a default address or a default target for all links on a page STF
<basefont /> Deprecated. Defines a default font, color, or size for the text in a page TF
<bdo> Defines the text direction STF
<big> Defines big text STF
<blockquote> Defines a long quotation STF
<body> Defines the document's body STF
<br /> Defines a single line break STF
<button> Defines a push button STF
<caption> Defines a table caption STF
Deprecated. Defines centered text TF
<cite> Defines a citation STF
<code> Defines computer code text STF
<col> Defines attribute values for one or more columns in a table STF
<colgroup> Defines a group of columns in a table for formatting STF
<dd> Defines a description of a term in a definition list STF
<del> Defines deleted text STF
<dir> Deprecated. Defines a directory list TF
<div> Defines a section in a document STF
<dfn> Defines a definition term STF
<dl> Defines a definition list STF
<dt> Defines a term (an item) in a definition list STF
<em> Defines emphasized text STF
<fieldset> Defines a border around elements in a form STF
<font> Deprecated. Defines font, color, and size for text TF
<form> Defines an HTML form for user input STF
<frame /> Defines a window (a frame) in a frameset F
<frameset> Defines a set of frames F
<h1> to <h6> Defines HTML headings STF
<head> Defines information about the document STF
<hr /> Defines a horizontal line STF
<html> Defines an HTML document STF
<i> Defines italic text STF
<iframe> Defines an inline frame TF
<img /> Defines an image STF
<input /> Defines an input control STF
<ins> Defines inserted text STF
<isindex> Deprecated. Defines a searchable index related to a document TF
<kbd> Defines keyboard text STF
<label> Defines a label for an input element STF
<legend> Defines a caption for a fieldset element STF
<li> Defines a list item STF
<link /> Defines the relationship between a document and an external resource STF
<map> Defines an image-map STF
<menu> Deprecated. Defines a menu list TF
<meta /> Defines metadata about an HTML document STF
<noframes> Defines an alternate content for users that do not support frames TF
<noscript> Defines an alternate content for users that do not support client-side scripts STF
<object> Defines an embedded object STF
<ol> Defines an ordered list STF
<optgroup> Defines a group of related options in a select list STF
<option> Defines an option in a select list STF
<p> Defines a paragraph STF
<param> Defines a parameter for an object STF
<pre> Defines preformatted text STF
<q> Defines a short quotation STF
<s> Deprecated. Defines strikethrough text TF
<samp> Defines sample computer code STF
<script> Defines a client-side script STF
<select> Defines a select list (drop-down list) STF
<small> Defines small text STF
<span> Defines a section in a document STF
<strike> Deprecated. Defines strikethrough text TF
<strong> Defines strong text STF
<style> Defines style information for a document STF
<sub> Defines subscripted text STF
<sup> Defines superscripted text STF
<table> Defines a table STF
<tbody> Groups the body content in a table STF
<td> Defines a cell in a table STF
<textarea> Defines a multi-line text input control STF
<tfoot> Groups the footer content in a table STF
<th> Defines a header cell in a table STF
<thead> Groups the header content in a table STF
<title> Defines the title of a document STF
<tr> Defines a row in a table STF
<tt> Defines teletype text STF
<u> Deprecated. Defines underlined text TF
<ul> Defines an unordered list STF
Basic Tags
<!DOCTYPE> Defines the document type STF
<html> Defines an html document STF
<body> Defines the body element STF
<h1> to <h6> Defines header 1 to header 6 STF
<p> Defines a paragraph STF
<br> Inserts a single line break STF
<hr> Defines a horizontal rule STF
<!--...--> Defines a comment STF

Char Format
<b> Defines bold text STF
<font> Deprecated. Defines text font, size, and color TF
<i> Defines italic text STF
<em> Defines emphasized text STF
<big> Defines big text STF
<strong> Defines strong text STF
<small> Defines small text STF
<sup> Defines superscripted text STF
<sub> Defines subscripted text STF
<bdo> Defines the direction of text display STF
<u> Deprecated. Defines underlined text TF

Output
<pre> Defines preformatted text STF
<code> Defines computer code text STF
<tt> Defines teletype text STF
<kbd> Defines keyboard text STF
<var> Defines a variable STF
<dfn> Defines a definition term STF
<samp> Defines sample computer code STF
<xmp> Deprecated. Defines preformatted text

Blocks
<acronym> Defines an acronym STF
<abbr> Defines an abbreviation STF
<address> Defines an address element STF
<blockquote> Defines a long quotation STF
Deprecated. Defines centered text TF
<q> Defines a short quotation STF
<cite> Defines a citation STF
<ins> Defines inserted text STF
<del> Defines deleted text STF
<s> Deprecated. Defines strikethrough text TF
<strike> Deprecated. Defines strikethrough text TF

Links
<a> Defines an anchor STF
<link> Defines a resource reference STF

Frames
<frame> Defines a sub window (a frame) F
<frameset> Defines a set of frames F
<noframes> Defines a noframe section TF
<iframe> Defines an inline sub window (frame) TF

Input
<form> Defines a form STF
<input> Defines an input field STF
<textarea> Defines a text area STF
<button> Defines a push button STF
<select> Defines a selectable list STF
<optgroup> Defines an option group STF
<option> Defines an item in a list box STF
<label> Defines a label for a form control STF
<fieldset> Defines a fieldset STF
<legend> Defines a title in a fieldset STF
<isindex> Deprecated. Defines a single-line input field TF

Lists
<ul> Defines an unordered list STF
<ol> Defines an ordered list STF
<li> Defines a list item STF
<dir> Deprecated. Defines a directory list TF
<dl> Defines a definition list STF
<dt> Defines a definition term STF
<dd> Defines a definition description STF
<menu> Deprecated. Defines a menu list TF

Images
<img> Defines an image STF
<map> Defines an image map STF
<area> Defines an area inside an image map STF

Tables
<table> Defines a table STF
<caption> Defines a table caption STF
<th> Defines a table header STF
<tr> Defines a table row STF
<td> Defines a table cell STF
<thead> Defines a table header STF
<tbody> Defines a table body STF
<tfoot> Defines a table footer STF
<col> Defines attributes for table columns STF
<colgroup> Defines groups of table columns STF

Styles
<style> Defines a style definition STF
<div> Defines a section in a document STF
<span> Defines a section in a document STF

Meta Info
<head> Defines information about the document STF
<title> Defines the document title STF
<meta> Defines meta information STF
<base> Defines a base URL for all the links in a page STF
<basefont> Deprecated. Defines a base font TF

Programming
<script> Defines a script STF
<noscript> Defines a noscript section STF
<applet> Deprecated. Defines an applet TF
<object> Defines an embedded object STF
<param> Defines a parameter for an object STF

HTML / XHTML Standard Attributes
Previous Next

The attributes listed below are standard, and are supported by all HTML and XHTML tags, with a few exceptions.
Core Attributes

Not valid in base, head, html, meta, param, script, style, and title elements.
Attribute Value Description
class classname Specifies a classname for an element
id id Specifies a unique id for an element
style style_definition Specifies an inline style for an element
title text Specifies extra information about an element

Language Attributes

Not valid in base, br, frame, frameset, hr, iframe, param, and script elements.
Attribute Value Description
dir ltr
rtl Specifies the text direction for the content in an element
lang language_code Specifies a language code for the content in an element. Language code reference
xml:lang language_code Specifies a language code for the content in an element, in XHTML documents. Language code reference

Keyboard Attributes
Attribute Value Description
accesskey character Specifies a keyboard shortcut to access an element
tabindex number Specifies the tab order of an element

Standard Event Attributes

HTML 4 added the ability to let events trigger actions in a browser, like starting a JavaScript when a user clicks on an element.

To learn more about programming events, please visit our JavaScript tutorial and our DHTML tutorial.

Below is the standard event attributes that can be inserted into HTML / XHTML elements to define event actions.
<body> and <frameset> Events

The two attributes below can only be used in <body> or <frameset>:
Attribute Value Description
onload script Script to be run when a document load
onunload script Script to be run when a document unload

Form Events

The attributes below can be used in form elements:
Attribute Value Description
onblur script Script to be run when an element loses focus
onchange script Script to be run when an element change
onfocus script Script to be run when an element gets focus
onreset script Script to be run when a form is reset
onselect script Script to be run when an element is selected
onsubmit script Script to be run when a form is submitted

Image Events

The attribute below can be used with the img element:
Attribute Value Description
onabort script Script to be run when loading of an image is interrupted

Keyboard Events

Valid in all elements except base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title.
Attribute Value Description
onkeydown script Script to be run when a key is pressed
onkeypress script Script to be run when a key is pressed and released
onkeyup script Script to be run when a key is released

Mouse Events

Valid in all elements except base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, and title.
Attribute Value Description
onclick script Script to be run on a mouse click
ondblclick script Script to be run on a mouse double-click
onmousedown script Script to be run when mouse button is pressed
onmousemove script Script to be run when mouse pointer moves
onmouseout script Script to be run when mouse pointer moves out of an element
onmouseover script Script to be run when mouse pointer moves over an element
onmouseup script Script to be run when mouse button is released
HTML Colors

The table below provides a list of the color names that are supported by all major browsers.

Click on a color name (or a hex value) to view the color as the background-color along with different text colors:
Color Name Color HEX Color
AliceBlue #F0F8FF
AntiqueWhite #FAEBD7
Aqua #00FFFF
Aquamarine #7FFFD4
Azure #F0FFFF
Beige #F5F5DC
Bisque #FFE4C4
Black #000000
BlanchedAlmond #FFEBCD
Blue #0000FF
BlueViolet #8A2BE2
Brown #A52A2A
BurlyWood #DEB887
CadetBlue #5F9EA0
Chartreuse #7FFF00
Chocolate #D2691E
Coral #FF7F50
CornflowerBlue #6495ED
Cornsilk #FFF8DC
Crimson #DC143C
Cyan #00FFFF
DarkBlue #00008B
DarkCyan #008B8B
DarkGoldenRod #B8860B
DarkGray #A9A9A9
DarkGreen #006400
DarkKhaki #BDB76B
DarkMagenta #8B008B
DarkOliveGreen #556B2F
Darkorange #FF8C00
DarkOrchid #9932CC
DarkRed #8B0000
DarkSalmon #E9967A
DarkSeaGreen #8FBC8F
DarkSlateBlue #483D8B
DarkSlateGray #2F4F4F
DarkTurquoise #00CED1
DarkViolet #9400D3
DeepPink #FF1493
DeepSkyBlue #00BFFF
DimGray #696969
DodgerBlue #1E90FF
FireBrick #B22222
FloralWhite #FFFAF0
ForestGreen #228B22
Fuchsia #FF00FF
Gainsboro #DCDCDC
GhostWhite #F8F8FF
Gold #FFD700
GoldenRod #DAA520
Gray #808080
Green #008000
GreenYellow #ADFF2F
HoneyDew #F0FFF0
HotPink #FF69B4
IndianRed #CD5C5C
Indigo #4B0082
Ivory #FFFFF0
Khaki #F0E68C
Lavender #E6E6FA
LavenderBlush #FFF0F5
LawnGreen #7CFC00
LemonChiffon #FFFACD
LightBlue #ADD8E6
LightCoral #F08080
LightCyan #E0FFFF
LightGoldenRodYellow #FAFAD2
LightGrey #D3D3D3
LightGreen #90EE90
LightPink #FFB6C1
LightSalmon #FFA07A
LightSeaGreen #20B2AA
LightSkyBlue #87CEFA
LightSlateGray #778899
LightSteelBlue #B0C4DE
LightYellow #FFFFE0
Lime #00FF00
LimeGreen #32CD32
Linen #FAF0E6
Magenta #FF00FF
Maroon #800000
MediumAquaMarine #66CDAA
MediumBlue #0000CD
MediumOrchid #BA55D3
MediumPurple #9370D8
MediumSeaGreen #3CB371
MediumSlateBlue #7B68EE
MediumSpringGreen #00FA9A
MediumTurquoise #48D1CC
MediumVioletRed #C71585
MidnightBlue #191970
MintCream #F5FFFA
MistyRose #FFE4E1
Moccasin #FFE4B5
NavajoWhite #FFDEAD
Navy #000080
OldLace #FDF5E6
Olive #808000
OliveDrab #6B8E23
Orange #FFA500
OrangeRed #FF4500
Orchid #DA70D6
PaleGoldenRod #EEE8AA
PaleGreen #98FB98
PaleTurquoise #AFEEEE
PaleVioletRed #D87093
PapayaWhip #FFEFD5
PeachPuff #FFDAB9
Peru #CD853F
Pink #FFC0CB
Plum #DDA0DD
PowderBlue #B0E0E6
Purple #800080
Red #FF0000
RosyBrown #BC8F8F
RoyalBlue #4169E1
SaddleBrown #8B4513
Salmon #FA8072
SandyBrown #F4A460
SeaGreen #2E8B57
SeaShell #FFF5EE
Sienna #A0522D
Silver #C0C0C0
SkyBlue #87CEEB
SlateBlue #6A5ACD
SlateGray #708090
Snow #FFFAFA
SpringGreen #00FF7F
SteelBlue #4682B4
Tan #D2B48C
Teal #008080
Thistle #D8BFD8
Tomato #FF6347
Turquoise #40E0D0
Violet #EE82EE
Wheat #F5DEB3
White #FFFFFF
WhiteSmoke #F5F5F5
Yellow #FFFF00
YellowGreen #9ACD32

Note: The names above are not a part of the W3C web standard.

The W3C HTML and CSS standards have listed only 16 valid color names:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

If you want valid HTML or CSS use the HEX values instead.
HTML Character Sets

To display an HTML page correctly, the browser must know what character-set to use.

The character-set for the early world wide web was ASCII. ASCII supports the numbers from 0-9, the uppercase and lowercase English alphabet, and some special characters.

Complete ASCII reference.

Since many countries use characters which are not a part of ASCII, the default character-set for modern browsers is ISO-8859-1.

Complete ISO-8859-1 reference.

If a web page uses a different character-set than ISO-8859-1, it should be specified in the <meta> tag.

Try it yourself
ISO Character Sets

It is the International Standards Organization (ISO) that defines the standard character-sets for different alphabets/languages.

The different character-sets being used around the world are listed below:
Character set Description Covers
ISO-8859-1 Latin alphabet part 1 North America, Western Europe, Latin America, the Caribbean, Canada, Africa
ISO-8859-2 Latin alphabet part 2 Eastern Europe
ISO-8859-3 Latin alphabet part 3 SE Europe, Esperanto, miscellaneous others
ISO-8859-4 Latin alphabet part 4 Scandinavia/Baltics (and others not in ISO-8859-1)
ISO-8859-5 Latin/Cyrillic part 5 The languages that are using a Cyrillic alphabet such as Bulgarian, Belarusian, Russian and Macedonian
ISO-8859-6 Latin/Arabic part 6 The languages that are using the Arabic alphabet
ISO-8859-7 Latin/Greek part 7 The modern Greek language as well as mathematical symbols derived from the Greek
ISO-8859-8 Latin/Hebrew part 8 The languages that are using the Hebrew alphabet
ISO-8859-9 Latin 5 part 9 The Turkish language. Same as ISO-8859-1 except Turkish characters replace Icelandic ones
ISO-8859-10 Latin 6 Lappish, Nordic, Eskimo The Nordic languages
ISO-8859-15 Latin 9 (aka Latin 0) Similar to ISO 8859-1 but replaces some less common symbols with the euro sign and some other missing characters
ISO-2022-JP Latin/Japanese part 1 The Japanese language
ISO-2022-JP-2 Latin/Japanese part 2 The Japanese language
ISO-2022-KR Latin/Korean part 1 The Korean language

The Unicode Standard

Because the character-sets listed above are limited in size, and are not compatible in multilingual environments, the Unicode Consortium developed the Unicode Standard.

The Unicode Standard covers all the characters, punctuations, and symbols in the world.

Unicode enables processing, storage and interchange of text data no matter what the platform, no matter what the program, no matter what the language.
The Unicode Consortium

The Unicode Consortium develops the Unicode Standard. Their goal is to replace the existing character-sets with its standard Unicode Transformation Format (UTF).

The Unicode Standard has become a success and is implemented in XML, Java, ECMAScript (JavaScript), LDAP, CORBA 3.0, WML, etc. The Unicode standard is also supported in many operating systems and all modern browsers.

The Unicode Consortium cooperates with the leading standards development organizations, like ISO, W3C, and ECMA.

Unicode can be implemented by different character-sets. The most commonly used encodings are UTF-8 and UTF-16:
Character-set Description
UTF-8 A character in UTF8 can be from 1 to 4 bytes long. UTF-8 can represent any character in the Unicode standard. UTF-8 is backwards compatible with ASCII. UTF-8 is the preferred encoding for e-mail and web pages
UTF-16 16-bit Unicode Transformation Format is a variable-length character encoding for Unicode, capable of encoding the entire Unicode repertoire. UTF-16 is used in major operating systems and environments, like Microsoft Windows 2000/XP/2003/Vista/CE and the Java and .NET byte code environments

Tip: The first 256 characters of Unicode character-sets correspond to the 256 characters of ISO-8859-1.

Tip: All HTML 4 processors already support UTF-8, and all XHTML and XML processors support UTF-8 and UTF-16!
he ASCII Character Set

ASCII stands for the "American Standard Code for Information Interchange". It was designed in the early 60's, as a standard character-set for computers and hardware devices like teleprinters and tapedrives.

ASCII is a 7-bit character set containing 128 characters.

It contains the numbers from 0-9, the uppercase and lowercase English letters from A to Z, and some special characters.

The character-sets used in modern computers, HTML, and Internet are all based on ASCII.

The following table lists the 128 ASCII characters and their equivalent HTML entity codes.
ASCII Printable Characters
ASCII Character HTML Entity Code Description
space
! ! exclamation mark
" " quotation mark
# # number sign
$ $ dollar sign
% % percent sign
& & ampersand
' ' apostrophe
( ( left parenthesis
) ) right parenthesis
* * asterisk
+ + plus sign
, , comma
- - hyphen
. . period
/ / slash
0 0 digit 0
1 1 digit 1
2 2 digit 2
3 3 digit 3
4 4 digit 4
5 5 digit 5
6 6 digit 6
7 7 digit 7
8 8 digit 8
9 9 digit 9
: : colon
; ; semicolon
< < less-than
= = equals-to
> > greater-than
? ? question mark
@ @ at sign
A A uppercase A
B B uppercase B
C C uppercase C
D D uppercase D
E E uppercase E
F F uppercase F
G G uppercase G
H H uppercase H
I I uppercase I
J J uppercase J
K K uppercase K
L L uppercase L
M M uppercase M
N N uppercase N
O O uppercase O
P P uppercase P
Q Q uppercase Q
R R uppercase R
S S uppercase S
T T uppercase T
U U uppercase U
V V uppercase V
W W uppercase W
X X uppercase X
Y Y uppercase Y
Z Z uppercase Z
[ [ left square bracket
\ \ backslash
] ] right square bracket
^ ^ caret
_ _ underscore
` ` grave accent
a a lowercase a
b b lowercase b
c c lowercase c
d d lowercase d
e e lowercase e
f f lowercase f
g g lowercase g
h h lowercase h
i i lowercase i
j j lowercase j
k k lowercase k
l l lowercase l
m m lowercase m
n n lowercase n
o o lowercase o
p p lowercase p
q q lowercase q
r r lowercase r
s s lowercase s
t t lowercase t
u u lowercase u
v v lowercase v
w w lowercase w
x x lowercase x
y y lowercase y
z z lowercase z
{ { left curly brace
| | vertical bar
} } right curly brace
~ ~ tilde

ASCII Device Control Characters

The ASCII device control characters were originally designed to control hardware devices.

Control characters have nothing to do inside an HTML document.
ASCII Character HTML Entity Code Description
NUL null character
SOH  start of header
STX  start of text
ETX  end of text
EOT  end of transmission
ENQ  enquiry
ACK  acknowledge
BEL  bell (ring)
BS  backspace
HT horizontal tab
LF
line feed
VT vertical tab
FF form feed
CR
carriage return
SO  shift out
SI  shift in
DLE  data link escape
DC1  device control 1
DC2  device control 2
DC3  device control 3
DC4  device control 4
NAK  negative acknowledge
SYN  synchronize
ETB  end transmission block
CAN  cancel
EM  end of medium
SUB  substitute
ESC  escape
FS  file separator
GS  group separator
RS  record separator
US  unit separator

DEL  delete (rubout)


HTML Headings
Previous Next

Headings are important in HTML documents.
HTML Headings

Headings are defined with the <h1> to <h6> tags.

<h1> defines the largest heading. <h6> defines the smallest heading.
Example
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

Try it yourself

Note: Browsers automatically adds an empty line before and after headings.
Headings Are Important

Use HTML headings for headings only. Don't use headings to make text BIG or bold.

Search engines use your headings to index the structure and content of your web pages.

Since users may skim your pages by its headings, it is important to use headings to show the document structure.

H1 headings should be used as main headings, followed by H2 headings, then less important H3 headings, and so on.
HTML Rules (Lines)

The <hr /> tag is used to create an horizontal rule (line).
Example
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>
<hr />
<p>This is a paragraph</p>

Try it yourself

HTML Comments

Comments can be inserted in the HTML code to make it more readable and understandable. Comments are ignored by the browser and are not displayed.

Comments are written like this:
Example
<!-- This is a comment -->

Try it yourself

Note: There is an exclamation point after the opening bracket, but not before the closing bracket.
HTML Tip - How to View HTML Source

Have you ever seen a Web page and wondered "Hey! How did they do that?"

To find out, click the VIEW option in your browser's toolbar and select SOURCE or PAGE SOURCE. This will open a window that shows you the HTML code of the page.
Examples
Examples From This Page

Headings
This example demonstrates the tags that display headings in an HTML document.

Hidden comments
This example demonstrates how to insert a hidden comment in the HTML source code.

Horizontal rule
This example demonstrates how to insert a horizontal rule.
HTML Tag Reference

W3Schools' tag reference contains additional information about these tags and their attributes.

You will learn more about HTML tags and attributes in the next chapters of this tutorial.
Tag Description
<html> Defines an HTML document
<body> Defines the document's body
<h1> to <h6> Defines header 1 to header 6
<hr /> Defines a horizontal rule
<!--> Defines a comment

<var> Defines a variable part of a text STF
<xmp> Deprecated. Defines preformatted text​
 
Last edited by a moderator:

itsnikolay

Make Money Online
Joined
Jul 27, 2010
Messages
12
Reaction score
0
Points
0
Age
75
I think it's better seemed in crib form.
But gj man
 

GetMassControl2.0

Make Money Online
Very Active Members
Joined
Oct 16, 2010
Messages
79
Reaction score
1
Points
0
Age
41
Location
Henderson, Nevada
Wow. Good Info. Maybe You could Break it out into Modules Next Time. That would make it More Digestible. (i think that's a word) Otherwise very informative, and I learned alot.

Thanks For the Share
 

xiuxiu

Make Money Online
Very Active Members
Joined
Aug 20, 2010
Messages
87
Reaction score
0
Points
0
Great post. I need to learn more about html. It'll help me a lot for my business
 

aakayb

Make Money Online
Joined
Apr 4, 2010
Messages
53
Reaction score
0
Points
0
Age
39
Wow, its a ebook in a thread. Very conclusive, thanks
 

gorico

Make Money Online
Joined
Nov 12, 2010
Messages
41
Reaction score
0
Points
0
It is a useful information.Thank you for your sharing.
 

suresh

Make Money Online
Joined
Apr 5, 2010
Messages
27
Reaction score
0
Points
1
Age
37
Thanks for html informative post.
 

edugovmonsters

New Member
Joined
Dec 13, 2011
Messages
46
Reaction score
0
Points
0
Are you pasting a whole book here? :D

You have put everything we need to know about HTML. Thanks for that.

By the way, the title was curiosity invoking. So I dropped by. Great work though.
 

mailsocial

New Member
Joined
Jan 4, 2012
Messages
5
Reaction score
0
Points
0
Thanks for the tutorial.
This post will help us as a reference to HTML
 

TheWicker

Make Money Online
Joined
Nov 4, 2009
Messages
53
Reaction score
0
Points
6
ayone knows how it is if you wanna make html to put into mail?
when i used css style within html it worked good except for mails shown in gmail (web edition).

ty
 

pete-r

New Member
Joined
Oct 1, 2013
Messages
12
Reaction score
0
Points
1
Great share! I've learn basic HTML way back at college. However, I haven't had the chance to improve it because sometimes I'm being too lazy and don't have the patience to practice and learn. I believe that's one thing that's holding be back from improving my HTML skills. When I don't know the function of a specific code I check W3schools.com for tutorials on how to use it. Sometimes I also look for video tutorials on Youtube.