This repository has been archived by the owner on Aug 11, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
3007-Html.txt
106 lines (79 loc) · 2.54 KB
/
3007-Html.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
1. <div> -- The main use of <div> is to structure the web-document. The <div> element is next to the <body> DOM who can persist
any element in it including <form>, <table> and <div> it self.
-- In HTML5, some new elements are introduced which replaces the <div>s : <header>, <footer>, <section>, <article>, and
<nav> to add declartive behavior of document.
HTML5 page
---------------
<!doctype html>
<html lang="en">
<head>
<title>Sample HTML5</title>
</head>
<body>
<div>
<header> ... </header>
<nav> <a href="#">..</a> </nav>
<section>
<div> ...</div>
<article> ..</article>
</section>
<footer> .. </footer>
</div>
</body>
</html>
Note that these new element are only for "description" and their behavior belongs to <div>.
And you can construct same doc using <div>s.
.....
<body>
<div> <----------------------------- This is main/root div
<!---- Header ---->
<div></div>
<!----- Navigation ---->
<div></div>
<!---- section ----->
<div></div>
<!------footer --->
<div></div>
</div>
</body>
IMPORTANT : Always wrap "content" elements (all elements inside the body) inside the <div> (see above example).
To add declarativeness to <div>s, we need to assign "selectors".
e.g
<div id="main">
<div id="header"></div>
<div id="nav"></div>
<div class="section"></div>
<div class="section"></div>
.....
2. table tag
Never use "table" tag to structure the "document". In fact we should have to avoid the excessive use of "table" because of its "complex" DOM representation. A <table> is formed with number of elements including <thead>, <tbody>, <tfoot>, <tr>, <th>, and <td>s.
<table>
<thead>
<tr><th>..</th></tr>
</thead>
<tbody>
<tr><td>..</td></tr>
</tbody>
<tfoot>
<tr><td>..</td></tr>
</tfoot>
</table>
3. fieldset tag
You can use this tag to structure the document along with <div>.
<fieldset>
<legend>Search</legend>
<div> .. </div>
</fieldset>
4. label tag
It will be used to describe the input.
<p>
<label for="no">Enter No</label>
<input type="text" id="no" name="no"/>
</p>
Or lazy way : <p>Enter No : <input type="text" ../>
5. span tag
It will be used to seperate the "text" behavior (style).
<h1><span class="big-40">T</span>he
<span class="red">red</span>
<span class="yellow">sun.</span>
</h1>