Embed Size (px)
Citation preview
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.w3schools.com">Visit W3Schools.com!</a>
Html 4.01
hyperlink anchor
html5
hyperlink
4. <abbr> Abbreviation tag
content
The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.
5. <acronym> Acronym tag Same as <abbr> Can I get this <acronym title="as soon as possible">ASAP</acronym>?
HTML
4.01
6. <address> Address Tag Web designer contact
information Tag.
Body Article
<address> Written by <a href="mailto:[email protected]">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.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); 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>© 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.com"></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</label> <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
![[Basic HTML/CSS] 2. html - list tags](https://img.pdfslide.us/doc/110x75/58ce75c41a28abdc578b67d9/basic-htmlcss-2-html-list-tags.jpg)
