2018

Sr. Manzar Rizvi

E.V.S Training Institute Lahore
2/24/2018
 ‫ط‬
‫ِحم نِِالرِحِیم‬
ٰ ‫بِسمِِللاِِالر‬
HTML Structure, Meta info
name meaning
html wrapper tag for entire file. (only DOCTYPE goes before it.)
head wrapper tag for meta info
meta tag used inside head tag. For example, <meta
meta
charset="utf-8" />
style sheet etc. For example, <link rel="stylesheet"
link
type="text/css" href="[Link]">
title document title
base URL. <base href="[Link]
base
target="_blank" />
body wrapper tag for page content
style CSS stylesheet. <style type="text/css">…</style>

Page Structure
nav navigation bar
header page's header
footer page's footer
main main section
aside Sidebar
article article body
section section body (For example, chapter).

Title/Section Heading
h1 headline 1
h2 headline 2
h3 headline 3
h4 headline 4
 h5 headline 5
h6 headline 6
Used to group one of h1 to h6, for subtitle purpose. This tag
hgroup
is removed from W3C spec, but remains in WHATWG spec.

Text Block
div generic block markup. Use with CSS hrhorizontal rule
p paragraph
pre monospace block
blockquote quote passages, excerpt
hr horizontal rule

Lists
ul unordered list
ol ordered list
li list item. (use inside ul or ol)

Inline Text Markup

span generic text markup. Use with CSS
a link (anchor)
emphasize. Placing emphasis may affect the meaning of
em
sentence.
important. Placement of this tag does not change the meaning
strong
of sentence.
b Bold
i Italic
u underline for book title, misspelled word, ….
s strike-thru
mark Highlight
small Smaller
del deleted text
ins newly inserted text (in contrast to del)
sup superscript
sub Subscript
 dfn
definition term
code
computer code
var
Variable
samp
sample code
kbd
keyboard input
q
short inline quote. [see “q” example]
cite book title (or title of: article, essay, song, script, film, TV show,
game, artwork, … etc)
ruby Pronunciation markup for Asian languages. [see ruby
example]
rt
used inside ruby tag, for pronunciation.
rp
used inside ruby tag, for older browser support.
br
line break
wbr
line-break hint. Browsers can render line break at this point
bdo
text direction
bdi
text direction

Table
table
Table
caption
table caption
tr
table row
td
table cell
 th
table cell header
thead
table header
tfoot
table footer
tbody
table body
colgroup
group table columns for styling
col
used inside colgroup

Image
img
inline image
figure
for independent illustartion, image, video, code example, …
figcaption
caption for images
map
Image Map Example
area
Image Map Example

Audio, Video, Special Objects

video [see HTML5 Video Tutorial]

audio embed sound files. [see HTML5 Audio Tag Tutorial]

A self-closing tag, to be used inside {video, audio} tags.

Similar in purpose to the src="…" attribute. Used to indicate
source media source, for different formats. For example, mp4, ogg.
For example, <source src="movie.mp4"
type="video/mp4">

track ? video/audio track related.

 script [see JavaScript Basics by Example]

For example: <noscript>displayed when JavaScript

noscript
is off</noscript>

object embedded object. [see “Object” tag for “Iframe”]

param parameter, used with object tag

embed interactive content or plugin

iframe embed a page; inner window. [see HTML: Iframe]

canvas interactive graphics, games. [see Canvas Example]

For example: <abbr title="eXtensible Markup

abbr
Language">XML</abbr>. [see abbr Example]

markup for contact of article or page. [see HTML5 “address”

address
Tag]

meter gauge indicator. [see HTML5 {meter, progress} Tags]

progress Progress bar. [see HTML5 {meter, progress} Tags]

time date/time. [see HTML5 “time” Tag]

Forms
form
button Render as Button. Used together with JavaScript.
input Generic input (text, radio box, checkbox, submit button)
textarea large text input (For example, comment)
select menu.
option Menu item. Used with select.
optgroup Menu item group label.
label A label for a form input
fieldset ?
legend title in a fieldset
eygen ?
ommand ? command button
atalist ? dropdown list
menu ? menu list
output ?
details ?
summary ? header of a "details" element

HTML5 Custom Data Attribute

Obsolete HTML4 Tags
acronym use abbr

applet use embed or object. [see “Object” tag for “Iframe”]

bgsound use audio

basefont use CSS

big use CSS font-size.

center use CSS. [see Centering with CSS]

dir Directory list. Use ul

font use CSS font-family

frame use CSS, iframe. [see HTML: Iframe]

frameset use CSS, iframe

noframes
 strike use s. [see “s” vs “strike” vs “del”]

stands for “teletype”, rendered in monospace font. Use

tt
{code, samp}, or CSS.

xmp use pre with CSS.

HTML: Allowed Characters in id Attribute

HTML5

HTML5 allows any character except any type of space character.

And, it must not be empty string. For example, you can have:
<p id="34">something</p>

<p id="♥">something</p>

<p id="#yes">something</p>

HTML 4.x

id attribute value must:

 start with a letter: A to Z, or a to z.

 After that, it can be digits (0 to 9), hyphen -, underscore _,
colon :, period ..

Note: you can start it with a Unicode letter, such as “α”, and the
W3C validator will pass it as valid (as of 2012-03-29).

Reference
HTML5:

The value must be unique amongst all the IDs in the element's home subtree and must
contain at least one character. The value must not contain any space characters.
 List of HTML Self-Closing Tags

<area /> <base /> <br />

<col /> <command /> <embed />

<hr /> <img /> <input />

<keygen /> <link /> <menuitem />

<meta /> <param /> <source />

<track /> <wbr />

The class attribute can have more than one value, separated by
space, like this:
<p class="a b c">Alice In Wonderland</p>

HTML: Multiple Class Attribute Values

order does not [Link] should NOT use multiple “class”, such
as class="…" class="…".