Skip to content

Instantly share code, notes, and snippets.

@codecademydev

codecademydev/index.html Secret

Created October 12, 2020 11:31
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/68d0ba3c58b17456686fb9e0dfe39c5d to your computer and use it in GitHub Desktop.
Save codecademydev/68d0ba3c58b17456686fb9e0dfe39c5d to your computer and use it in GitHub Desktop.
Download ZIP
Codecademy export
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Semantic HTML Reference</title>
<link href="./styles.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="head">
<h1 id="head-title">Semantic HTML Reference</h1>
<img src="https://assets.hongkiat.com/uploads/html-5-semantics/document-outline-example.jpg"/>
</div>
<div class="table">
<h2 class="secondTitle">Semantic Basic Tags</h2>
<table border = 1>
<thead>
<tr>
<th scope="col">Tag</th>
<th scope="col">Name</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="Tag">&lt;header&gt;</td>
<td>header</td>
<td class="description">a container for navigational links or introductory content</td>
</tr>
<tr>
<td class="Tag">&lt;nav&gt;</td>
<td>navigation</td>
<td class="description">define a block of navigation links</td>
</tr>
<tr>
<td class="Tag">&lt;main&gt;</td>
<td>main</td>
<td class="description">encapsulate the dominant content within a webpage</td>
</tr>
<tr>
<td class="Tag">&lt;footer&gt;</td>
<td>footer</td>
<td class="description">The content at the bottom of the subject information</td>
</tr>
</tbody>
</table>
<h2 class="secondTitle">Semantic Other Tags</h2>
<table border = 1>
<thead>
<tr>
<th scope="col">Tag</th>
<th scope="col">Name</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="Tag">&lt;section&gt;</td>
<td>section</td>
<td class="description">defineds elements in a documment</td>
</tr>
<tr>
<td class="Tag">&lt;article&gt;</td>
<td>article</td>
<td class="description">hold content that makes sense on its own</td>
</tr>
<tr>
<td class="Tag">&lt;aside&gt;</td>
<td>aside</td>
<td class="description">used to mark additional information that can enhance another element</td>
</tr>
<tr>
<td class="Tag">&lt;figure&gt;</td>
<td>figure</td>
<td class="description">encapsulate media</td>
</tr>
<tr>
<td class="Tag">&lt;figcaption&gt;</td>
<td>figcaption</td>
<td class="description">describe the media</td>
</tr>
<tr>
<td class="Tag">&lt;audio&gt;</td>
<td>audio</td>
<td class="description">embed audion content into a document</td>
</tr>
<tr>
<td class="Tag">&lt;video&gt;</td>
<td>video</td>
<td class="description">makes it clear that a developer is attempting to display a video to the user</td>
</tr>
<tr>
<td class="Tag">&lt;embed&gt;</td>
<td>embed</td>
<td class="description">embed any media content</td>
</tr>
</tbody>
</table>
</div>
</body>
<footer></footer>
</html>
Raw
styles.css
body {
font-family: ;
background-color: Beige;
text-align: center;
}
thead {
background-color: #aab5ff;
}
tbody {
background-color: #47589b;
color: White;
}
.secondTitle {
color: MidnightBlue;
font-weight: bold;
}
.Tag {
color: Thistle;
}
#head-title {
color: MediumVioletRed;
}
table {
display: table;
border: 2px solid SlateBlue;
text-align: center;
width: 650px;
margin: 0 auto;
}
.description {
text-align: left;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment