-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
70 lines (66 loc) · 3.92 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<title>Challenge Project: Build Your Own Cheat Sheet</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<header>
<h1>HTML & CSS Cheat Sheet</h1>
<p>A breif overview of semantic html elements and how to use them.</p>
<h2>Why care about semantic html?</h2>
<p>A semantic element clearly describes its meaning to both the browser and the developer.<br> Non-semantic html, like <div> & <span>, is easy to use, but difficult for other developers to understand and pick up quickly.<br> This can present unseen challenges in the future.<br> In addition to benefiting other developers, semantic html will also benefit you when you come back to and revamp/refactor your own code. </p>
</header>
<table>
<thead>
<tr>
<th>HTML Tag</th>
<th>Description</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td><p></td>
<td>Semantic element representing a paragraph</td>
<td><p>Winston was a great dog. Every day he welcomed his parents, at the door, when they came home. In return, his Mom and Dad made sure to give winston plenty of belly scratches.</p></td>
</tr>
<tr>
<td><header></td>
<td>Semantic element representing a pages header</td>
<td><header>Winston the Dog</header></td>
</tr>
<tr>
<td><nav></td>
<td>Semantic element representing a pages navigation section</td>
<td><nav><a>About me</a><a>Life Story</a><a>Favorite Places</a></nav></td>
</tr>
<tr>
<td><figure></td>
<td>Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.</td>
<td><figure><img src="https://scontent.fagc1-1.fna.fbcdn.net/v/t39.30808-6/265968674_4913315405366253_1164260621524835986_n.jpg?_nc_cat=103&ccb=1-5&_nc_sid=8bfeb9&_nc_ohc=iGFk8Ant5_kAX__DTNH&_nc_ht=scontent.fagc1-1.fna&oh=00_AT9Pn_KhYH0Bo5HflwhXofjafCEv63PSc2O6MRp5d_4Ybg&oe=61D1E17D" width="200" height="166" alt="Winston chowing down on a bone"></img></figure></td>
</tr>
<tr>
<td><section></td>
<td>Defines a section in a document. A section is a thematic grouping of content, typically with a heading.</td>
<td><section>Winston the Dog</section></td>
</tr>
<tr>
<td><article></td>
<td>Specifies independent, self-contained content. An article should make sense on its own.</td>
<td><article>Winston is a 3 y.o goldendoodle that lives in Millersville, PA. He likes walks around the neighborhood and making people feel loved.</article></td>
</tr>
<tr>
<td><aside></td>
<td>Semantic element representing a pages header</td>
<td><aside>Other doggie parents in our neighborhood often ask his Mommy & Daddy what breed he is. While we were told the he is a goldendoodle, Winston looks more so a setterdoodle.</aside></td>
</tr>
<tr>
<td><footer></td>
<td>Semantic element representing a pages footer</td>
<td><footer>Contact Me @ [email protected]</footer></td>
</tr>
</tbody>
</table>
</body>
</html>