Html tag list

ObydurHussain 1,011 views 9 slides Mar 31, 2016
Slide 1
Slide 1 of 9
Slide 1
1
Slide 2
2
Slide 3
3
Slide 4
4
Slide 5
5
Slide 6
6
Slide 7
7
Slide 8
8
Slide 9
9

About This Presentation

HTML Tag List & Description. Thanks for watching.


Slide Content

HELPFUL
ATTRIBUTE
w3schools Example
HTML Tags Type Definition Example for Use Difference with
HTML 4.01 and
HTML5
1. <!--> An HTML
comment
HTML




<script
type="text/javascript">
<!— //-->
</script>
Note: //
“-->”

NONE
2. <!DOCTYPE
>

HTML <html>
tag Browser
Webpage
Version Write
<!DOCTYPE html>
<html>
<head>
<title>Title of the
document</title>
</head>
</html>
HTML 4.01
DOCTYPE
(Strict, Transitional,
Frameset)। HTML5
<!DOCTYPE html>

3. <a> Hyperlink Tag

Tag
Attribute
href,

<a
href="http://www.w3sch
ools.com">Visit
W3Schools.com!</a>
Html 4.01
hyperlink anchor
html5
hyperlink

4. <abbr> Abbreviation
tag


content

The <abbr title="World
Health
Organization">WHO</ab
br> was founded in 1948.

5. <acronym> Acronym tag Same as <abbr> Can I get this <acronym
title="as soon as
possible">ASAP</acrony
m>?
HTML
4.01

6. <address> Address Tag
Web designer contact
information Tag.
Body Article

<address>
Written by <a
href="mailto:webmaster
@example.com">Jon
Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
HTML 4.01
website Article
address Tag
support , HTML
5 supported.
7. <applet> embedded
applet
java supported .
HTML5 supported
<object>

<applet
code="Bubbles.class"
width="350"
height="350">
Java applet that draws
animated bubbles.
</applet>
HTML4.01
virsion and browser

HTML5 supported
8. <area>









Indicates
inside an
image-map
area
image

image-map <map>
tag <img>
image
clickable link <img> tag
usemap
attribute <img> and <map> tag

<img src="planets.gif"
width="145"
height="126"
alt="Planets"
usemap="#planetmap">

<map
name="planetmap">
<area shape="rect"
coords="0,0,82,126"
href="sun.htm"
alt="Sun">
<area shape="circle"
coords="90,58,3"
href="mercur.htm"
alt="Mercury">
<area shape="circle"
coords="124,58,8"
href="venus.htm"
alt="Venus">
</map>
HTML5 new
attribute
:
hreflang (New)
media
rel
type
Others :
coords,alt, href, nohref,
shape, target

9. <b> bold text
text bold

<p>This is normal text -
<b>and this is bold
text</b>.</p>

10. <body> Body Tag
<html>...</html> content
body <body> Tag use

<body> Tag HTML document
contents ,
text, hyperlinks, images,
tables, lists,

<html>
<head>
<title>Title of the
document</title>
</head>

<body>
The content of the
document......
</body>

</html>
No difference.
11. <br> line break


break tag use
This text contains<br>a
line break.
end tag
XHTML <br/>
end tag
12. <button> Clickable
clickable button use
<button
HTML5

button
<button> tag
image/text form
button <input> tag
button create ,
browser value
type="button">Click
Me!</button>
attributes add :
autofocusNew
disabled
formNew
formactionNew
formenctypeNew
formmethodNew
formnovalidateNew
formtargetNew
name
type
value

13. <caption>Table caption
( )
Caption ,
table specific


<table border="1">
<caption>Monthly
savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
HTML5 align
attribute , HTML
4.01 tag

14. <canvas> draw
graphics


<canvas
id="myCanvas"></canvas
>

<script
type="text/javascript">
var
canvas=document.getEle
mentById('myCanvas');
var
ctx=canvas.getContext('2
d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>

HTML 5
15. <center>
center
HTML

<center>This text will be
center-aligned.</center>
HTML 5 support
CSS code

16. <cite> Title Tag for
any work or
book, song
etc


, , , TV show
painting

<p><cite>The
Scream</cite> by Edward
Munch. Painted in
1893.</p>
HTML5 <cite> tag
title
HTML 4.01
citation


17. <del> Deleted text
tag
HTML Page
<p>My favorite color is
<del>blue</del>
None

like this.

HTML 5 <strike>
tag
<ins>red</ins>!</p>
18. <dir> Directory list
Directory list
<dir>
<li>html</li>
<li>xhtml</li>
<li>css</li>
</dir>
<dir> tag is not
supported in HTML5.
Use CSS instead.
19. <div> Divisional Tag
HTML Document
section


<div style="color:#000">
<h3>This is a
heading</h3>
<p>This is a
paragraph.</p>
</div>
HTML5 Tag
aign attribute

20. <dl> Description
List
HTML document



<dt> and <dd>
<dl>
<dt>Coffee</dt>
<dd>Black hot
drink</dd>
<dt>Milk</dt>
<dd>White cold
drink</dd>
</dl>
HTML 4.01
definition list. HTML
5 description list



21. <dt> defines
terms/names



Same example like <dl> Same
22. <dd> escribes each
term/name


Same example like <dl> Same
23. <em>
24. <fieldset>
25. <font> Defines the
Font of the
HTML
Document
html font face, font size,
and font text color

<font size="3"
color="red">This is some
text!</font>
<font face="verdana"
color="green">This is
some text!</font>
HTML5 <font> tag
support
CSS

26. <footer> To define
footer
section of the
document
Footer
element element
information author information,
copyright information, terms of use,
contact information,
html
document section
footer tag
<p>&copy; RR
Foundation</p>
HTML5

27. <form> To create
HTML Form
HTML <form> tag

element
<input>,
<textarea>, <button>, <select>,
<option>,, <optgroup>, <fieldset>,
<form
action="demo_form.asp"
method="get"
autocomplete="on">
First name:<input
type="text"
name="fname"><br>
E-mail: <input
HTML 5
attribute add
autocomplete
novalidate

<label>

type="email"
name="email"><br>
<input type="submit">
</form>
accept attribute

28. <frame> To create
particular
frame in
HTML page
HTML
frameset
, ,

<frameset
cols="25%,50%,25%">
<frame
src="frame_a.htm">
<frame
src="frame_b.htm">
<frame
src="frame_c.htm">
</frameset>
HTML5 support
, supported in
HTML 4.01
29. <frameset> To contain
frame in
frameset
<frameset> tag <frame>
tag
<frameset
cols="25%,*,25%">
<frame
src="frame_a.htm">
<frame
src="frame_b.htm">
<frame
src="frame_c.htm">
</frameset>
HTML5 support
, supported in
HTML 4.01
30. <head> HTML Head
HTML
<html> tag <head> tag
<title>
element <style>, <base>,
<link>, <meta>, <script>, <noscript>
tag
<html>
<head>
<title>Title of the
document</title>
</head>

<body>
The content of the
document......
</body>

</html>
None
31. <h1> -
<h6>
HTML
headings tag
heading

<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>
HTML 5 "align"
attribute ,
css

32. <hr> Horizontal
Rules Tag
HTML page content
page
thematic break

<h1>HTML</h1>
<p>HTML is a language
for describing web
pages.....</p>

<hr>

<h1>CSS</h1>
<p>CSS defines how to
display HTML
elements.....</p>
In HTML5 <hr> tag
thematic break
HTML 4.01
horizontal rule
HTML5

element ,
css

33. <html> Hypertext
markup
language Tag
HTML document
<html>- tag। browser
HTML
<!DOCTYPE>
HTML element tag

<!DOCTYPE HTML>
<html>
<head>
<title>Title of the
document</title>
</head>

<body>
The content of the
document......
</body>

</html>
HTML5 manifest

attribute

34. <i> Italic text tag
Paragraph text
content Italic

technical term,
phrase ,


element tag

<em> (emphasized text)
<strong> (important text)
<mark> (marked/highlighted text)
<cite> (the title of a work)
<dfn> (a definition term)

<p>He named his car
<i>The lightning</i>,
because it was very
fast.</p>
HTML5

, Style sheet


35. <iframe> Inline frame

HTML document page



<iframe
src="http://www.odesk.c
om"></iframe>
HTML5 new
attributes
HTML 4.01
remove

36. <img> Image tag
HTML page image show
image tag use <img>
tag src and alt
attribute
image
<a>

<img src="smiley.gif"
alt="Smiley face"
height="42" width="42">
“align, border, hspace,
longdesc, and vspace ”
attribute HTML5
supported
37. <input>
38. <ins> Inserted text
tag
<del> Tag delete text
text inserted
word/text

<p>My favorite color is
<del>blue</del>
<ins>red</ins>!</p>
None

39. <kbd> Defines
keyboard
input

40. <label> Radio
buttons with
labels

Male or Female

,


<label>

<form
action="demo_form.asp"
>
<label
for="male">Male</label>
<input type="radio"
name="sex" id="male"
value="male"><br>
<label
for="female">Female</la
bel>
<input type="radio"
name="sex" id="female"
value="female"><br>
<input type="submit"
value="Submit">
</form>
HTML 5
“form” element

41. <li> List item tag

ordered
lists(<ol>) unordered lists (<ul>)
menu lists (<menu>)

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

"type"
attribute HTML5
support
"value" support
42. <link> Link / relation
building tag
HTML CSS or
External Resource link

<head>
<link rel="stylesheet"
type="text/css"
href="theme.css">
</head>
HTML 5 "sizes"
attribute
old attribute
support ।
43. <map> image-map
image

image-map <map>
tag <img>
image
clickable link <img> tag
usemap
attribute <img> and <map> tag

Same as 8 no tag <area>
tag.

See <area> tag. NO 8.

44. <meta> Metadata tag
HTML page related
information
Meta elements page
description, keywords, author of the
document, last modified, and other
metadata information
<head>
<meta
name="description"
content="Free Web
tutorials">
<meta name="keywords"
content="HTML,CSS,XML,
JavaScript">
HTML5 has a new
attribute, charset,
which makes it easier to
define charset:
 HTML 4.01:
<meta http-
equiv="conten

browser
browser content
page
reload । search engines
keywords
<meta name="author"
content="Ståle Refsnes">
<meta charset="UTF-8">
</head>
t-type"
content="text/
html;
charset=UTF-
8">
 HTML5: <meta
charset="UTF-
8">

45. <ol> Ordered list
Ordered list


<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
"start" and "type"
attributes were
deprecated in HTML
4.01, and "reversed"
attribute is new in
HTML5.
46. <p> Paragraph
tag
Paragraph
Browser
paragraph
margin CSS
modify
<p>This is some text in a
paragraph.</p>
align attribute is no
longer supported in
HTML5. Use CSS to set
that.
47. <pre> preformatted
text tag
<pre>
Text in a pre element
is displayed in a fixed-
width
font, and it preserves
both spaces and
line breaks
</pre>

48. <small> Small Text
Tag
Document

<p>W3Schools.com - the
world's largest web
development site.</p>
<p><small>Copyright
1999-2050 by Refsnes
Data</small></p>
None
49. <span> Span tag
Document /text
element


word color, style, etc


CSS
<p>My mother has <span
style="color:blue">blue</
span> eyes.</p>
None
50. <strike> Strikethrough
Text Rag
HTML Page
like this.


<p>Version 2.0 is
<strike>not yet
available!</strike> now
available!</p>
HTML 4.01

HTML 5
<del> tag

51. <strong> Strong Text
tag
Strong or important text

<strong>Strong
text</strong>

style
Tag Description
<em> Renders as emphasized text
<strong> Defines important text
<dfn> Defines a definition term
<code> Defines a piece of computer code
<samp> Defines sample output from a computer program
<kbd> Defines keyboard input
<var> Defines a variable

52. <style> Style tag
HTML document stylish
style sheet <link>
HTML
style tag
CSS file

<html>
<head>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>

<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>
"scoped"
attribute HTML5

53. <table> Table Tag
HTML Document Table add
Table
<table> tag
<tr>= table row, <th>= table header,
<td> element tag
complex HTML table
<table> tag <caption>,
<col>, <colgroup>, <thead>, <tfoot>,
and <tbody>

<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
HTML5
"border" attribute
support
54. <u> Underline
Word underline

<p>This is a
<u>parragraph</u>.</p>

55. <ul> Unordered
list Tag
Unordered Menu list
<ul> tag
<li> List item tag
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
"compact" and "type"
attributes HTML5
support
Tags