-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
124 lines (124 loc) · 6.45 KB
/
index.html
File metadata and controls
124 lines (124 loc) · 6.45 KB
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantic HTML Cheatsheet Project</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body>
<header id="Top">
<nav>
<ul>
<li><a href="#Top">Top</a></li>
<li><a href="#Cheatsheet"> Cheatsheet</a></li>
<li><a href="#Contact Me">Contact Me</a></li>
</ul>
</nav>
<h1>Semantic HTML</h1>
</header>
<main>
<section id="Benefits">
<h2>Benefits of Semantic HTML</h2>
<ul>
<li>Accessibility: Semantic HTML makes webpages accessible for mobile devices and for people with disabilities as well.
This is because screen readers and browsers are able to interpret the code better.</li>
<li>Readability: Semantic HTML also makes the website’s source code easier to read for other web developers.</li>
<li>SEO: It improves the website SEO, or Search Engine Optimization, which is the process of increasing the number of
people that visit your webpage. With better SEO, search engines are better able to identify the content of your website
and weight the most important content appropriately.</li>
</ul>
</section>
<section id="Cheatsheet">
<h2>Semantic HTML Tags</h2>
<table>
<colgroup>
<col style="background-color: darkviolet;">
<col style="background-color: darkgoldenrod;">
<col style="background-color: darkgoldenrod;">
</colgroup>
<thead>
<tr>
<th>Tag</th>
<th>Name</th>
<th>Use</th>
</tr>
</thead>
<tbody>
<tr>
<td> <span class="code"><article></span></td>
<td>Article</td>
<td>Represents a part of a page which is self-contained and could be published elsewhere. Common uses include blog posts or magazine articles.</td>
</tr>
<tr>
<td> <span class="code"><aside></span></td>
<td>Aside</td>
<td>Represents a part of a page which is relevant to the current content, but not a part of it directly. It can be used for related links, for clarifying a statement from the current article, or even for advertising meant for the current page.</td>
</tr>
<tr>
<td> <span class="code"><details></span></td>
<td>Details</td>
<td>Encapsulates the <span class="code"><summary></span> element and any additional details which are only visible when the element is in an open state.</td>
</tr>
<tr>
<td> <span class="code"><figcaption></span></td>
<td>Figcaption</td>
<td>Used for a picture</td>
</tr>
<tr>
<td> <span class="code"><figure></span></td>
<td>Figure</td>
<td>Encapsulates media such as an image, diagram, or code snippet.</td>
</tr>
<tr>
<td> <span class="code"><footer></span></td>
<td>Footer</td>
<td>Represents a part of a page which is meant to be at the end of a completed block of content. Common uses include copyright information for the page or additional links to relevant pages.</td>
</tr>
<tr>
<td> <span class="code"><header></span></td>
<td>Header</td>
<td>Represents a part of a page which is meant to be introductory. It can include heading tags, a logo, a search bar, and navigation elements</td>
</tr>
<tr>
<td> <span class="code"><main></span></td>
<td>Main</td>
<td>Represents the primary content within the body element of the web page.</td>
</tr>
<tr>
<td> <span class="code"><mark></span></td>
<td>Mark</td>
<td>Represents part of a text that should be rendered as marked or highlighted.</td>
</tr>
<tr>
<td> <span class="code"><nav></span></td>
<td>Nav</td>
<td>Defines a block of navigation links such as menus and tables of contents.</td>
</tr>
<tr>
<td> <span class="code"><section></span></td>
<td>Section</td>
<td>Defines elements in a document, such as chapters, headings, or any other area of the document with the same theme.</td>
</tr>
<tr>
<td> <span class="code"><summary></span></td>
<td>Summary</td>
<td>Acts as a label for the <span class="code"><details></span> element and reveals additional information when clicked.</td>
</tr>
<tr>
<td> <span class="code"><time></span></td>
<td>Time</td>
<td>Represents a time-related piece of information and can take a datetime attribute that makes it machine-readable.</td>
</tr>
</tbody>
</table>
</section>
</main>
<footer id="Contact Me">
<h5>Created by Christopher d'Arcy</h5>
<h5>June 12th 2023</h5>
<h5>cdarcy656481@gmail.com</h5>
</footer>
</body>
</html>