Skip to content

Instantly share code, notes, and snippets.

@codecademydev

codecademydev/index.html Secret

Created October 19, 2020 00:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save codecademydev/0dae4802640e837310475b767c4674ba to your computer and use it in GitHub Desktop.
Save codecademydev/0dae4802640e837310475b767c4674ba to your computer and use it in GitHub Desktop.
Download ZIP
Codecademy export
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link href="./styles.css" rel="stylesheet" type="text/css">
<title>HTML Semantics</title>
</head>
<body>
<h1>Guide to Semantic HTML Tags</h1>
<p>Moving away from the <a class="tag">&lt;div&gt;</a> tag can be a little intimidating when first learning HTML, but writing semantic code makes work infinitely easier to both read and style with CSS. The table provided below is an attempt to keep tags straight for those new to HTML or as a quick reference for anyone that might need it.</p>
<main>
<table>
<thead>
<tr>
<th>Tag Name</th>
<th>Tag Open</th>
<th>Tag Close</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="center">Header</td>
<td class="tag">&lt;header&gt;</td>
<td class="tag">&lt;/header&gt;</td>
<td>Describes Content at Top of Page Body</td>
</tr>
<tr>
<td class="center">Nav</td>
<td class="tag">&lt;nav&gt;</td>
<td class="tag">&lt;/nav&gt;</td>
<td>Often in Header and Denotes Page's Navigational Links</td>
</tr>
<tr>
<td class="center">Main</td>
<td class="tag">&lt;main&gt;</td>
<td class="tag">&lt;/main&gt;</td>
<td>Placed Around the Main Content of Page</td>
</tr>
<tr>
<td class="center">Footer</td>
<td class="tag">&lt;footer&gt;</td>
<td class="tag">&lt;/footer&gt;</td>
<td>Denotes Footer Content at Page Bottom</td>
</tr>
<tr>
<td class="center">Video</td>
<td class="tag">&lt;video&gt;</td>
<td class="tag">&lt;/video&gt;</td>
<td>Allows the Addition of Video to a Page, Needs src Attribute</td>
</tr>
<tr>
<td class="center">Audio</td>
<td class="tag">&lt;audio&gt;</td>
<td class="tag">&lt;/audio&gt;</td>
<td>Allows Audio Files to be Added to Page, Needs src Attribute</td>
</tr>
<tr>
<td class="center">Embed</td>
<td class="tag">&lt;embed&gt;</td>
<td class="tag">Self-Closing</td>
<td>Adds Any Type of Media to Page, Needs src Attribute</td>
</tr>
<tr>
<td class="center">Figure</td>
<td class="tag">&lt;figure&gt;</td>
<td class="tag">&lt;/figure&gt;</td>
<td>Marks Media like Images, Diagrams, or Code Snippets</td>
</tr>
<tr>
<td class="center">Figcaption</td>
<td class="tag">&lt;figcaption&gt;</td>
<td class="tag">&lt;/figcaption&gt;</td>
<td>Exists Within Figure Tag to Describe Figure</td>
</tr>
<tr>
<td class="center">Section</td>
<td class="tag">&lt;section&gt;</td>
<td class="tag">&lt;/section&gt;</td>
<td>Defines Elements of the Page like Chapters or Headings</td>
</tr>
<tr>
<td class="center">Article</td>
<td class="tag">&lt;article&gt;</td>
<td class="tag">&lt;/article&gt;</td>
<td>Marks Content that Stands on Its Own, i.e. Blogs or Comments</td>
</tr>
<tr>
<td class="center">Aside</td>
<td class="tag">&lt;aside&gt;</td>
<td class="tag">&lt;/aside&gt;</td>
<td>Holds Bonus Information that Enhances Other Elements like Quotes</td>
</tr>
</tbody>
</table>
</main>
<footer>
<p class="center">Made By: Sean Browne</p>
<p class="center">Contact: sbrowne15@gmail.com</p>
</footer>
</body>
</html>
Raw
styles.css
head,
body,
footer {
background-color: AliceBlue;
color: DarkSlateGray;
font-family: Verdana;
}
h1 {
text-align: center;
font-weight: bold;
}
.tag {
background-color: WhiteSmoke;
font-family: Courier;
color: black;
font-weight: bold;
text-align: center;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
.center {
text-align: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment