codecademydev/index.html Secret

## index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Semantic HTML Reference</title>
        <link rel="stylesheet" href="styles.css" type="text/css">
    </head>
    <body class="center">
        <header>
            <h1>Semantic HTML Reference</h1>
            <h2>Semantic Tags</h2>
        </header>
        <main>
            <table>
                <thead>
                    <tr>
                        <th>Tag</th>
                        <th>Name</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="monospacefontfamily-bgcolorwhite">&lt;header&gt;</td>
                        <td>Header</td>
                        <td>The title of the content at the top of the page.</td>
                    </tr>
                    <tr>
                        <td class="monospacefontfamily-bgcolorwhite">&lt;nav&gt;</td>
                        <td>Navigation</td>
                        <td>The wrapper element for all elements containing main navigational links.</td>
                    </tr>
                    <tr>
                        <td class="monospacefontfamily-bgcolorwhite">&lt;main&gt;</td>
                        <td>Main</td>
                        <td>The set of main contents of a page between the header/navigation and footer areas.</td>
                    </tr>
                    <tr>
                        <td class="monospacefontfamily-bgcolorwhite">&lt;footer&gt;</td>
                        <td>Footer</td>
                        <td>The set of footer contents.</td>
                    </tr>
                    <tr>
                        <td class="monospacefontfamily-bgcolorwhite">&lt;video&gt;</td>
                        <td>Video</td>
                        <td>The container for video resources.</td>
                    </tr>
                    <tr>
                        <td class="monospacefontfamily-bgcolorwhite">&lt;audio&gt;</td>
                        <td>Audio</td>
                        <td>The container for audio resources.</td>
                    </tr>
                    <tr>
                        <td class="monospacefontfamily-bgcolorwhite">&lt;embed&gt;</td>
                        <td>Embed</td>
                        <td>The container for any type of resource.</td>
                    </tr>
                    <tr>
                        <td class="monospacefontfamily-bgcolorwhite">&lt;figure&gt;</td>
                        <td>Figure</td>
                        <td>The encapsulator of media elements such as image, diagram or code snippet.</td>
                    </tr>
                    <tr>
                        <td class="monospacefontfamily-bgcolorwhite">&lt;figcaption&gt;</td>
                        <td>Figure Caption</td>
                        <td>The description for encapsulated medias.</td>
                    </tr>
                    <tr>
                        <td class="monospacefontfamily-bgcolorwhite">&lt;section&gt;</td>
                        <td>Section</td>
                        <td>The definer for elements in a document such as chapters, heading or any other area.</td>
                    </tr>
                    <tr>
                        <td class="monospacefontfamily-bgcolorwhite">&lt;article&gt;</td>
                        <td>Article</td>
                        <td>The holder of contents that makes sense on it's own such as articles, blogs and comments.</td>
                    </tr>
                    <tr>
                        <td class="monospacefontfamily-bgcolorwhite">&lt;aside&gt;</td>
                        <td>Aside</td>
                        <td>The enhancer of another element by marking additional information but isn't required in order to understand the main content.</td>
                    </tr>
                </tbody>
            </table>
        </main>
    </body>
</html>

## styles.css
.monospacefontfamily-bgcolorwhite {
    font-family: Lucida Console, Courier, monospace;
    background-color: white;
}

.center {
    text-align: center;
}


h1 {
    font-size: 2em;
    font-weight: bold;
    margin-top: 5px;
}

h2 {
    color: rebeccapurple;
}

body {
    font-family: Arial, sans-serif;
    background-color: gainsboro;
}

table {
    border: 2px solid darkorchid;
    width: 650px;
    margin: 0 auto;
    text-align: start;
}

thead {
    background-color: plum;
}

td {
    border-top: 1px solid darkorchid;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Semantic HTML Reference</title>
	<link rel="stylesheet" href="styles.css" type="text/css">
	</head>
	<body class="center">
	<header>
	<h1>Semantic HTML Reference</h1>
	<h2>Semantic Tags</h2>
	</header>
	<main>
	<table>
	<thead>
	<tr>
	<th>Tag</th>
	<th>Name</th>
	<th>Description</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td class="monospacefontfamily-bgcolorwhite"><header></td>
	<td>Header</td>
	<td>The title of the content at the top of the page.</td>
	</tr>
	<tr>
	<td class="monospacefontfamily-bgcolorwhite"><nav></td>
	<td>Navigation</td>
	<td>The wrapper element for all elements containing main navigational links.</td>
	</tr>
	<tr>
	<td class="monospacefontfamily-bgcolorwhite"><main></td>
	<td>Main</td>
	<td>The set of main contents of a page between the header/navigation and footer areas.</td>
	</tr>
	<tr>
	<td class="monospacefontfamily-bgcolorwhite"><footer></td>
	<td>Footer</td>
	<td>The set of footer contents.</td>
	</tr>
	<tr>
	<td class="monospacefontfamily-bgcolorwhite"><video></td>
	<td>Video</td>
	<td>The container for video resources.</td>
	</tr>
	<tr>
	<td class="monospacefontfamily-bgcolorwhite"><audio></td>
	<td>Audio</td>
	<td>The container for audio resources.</td>
	</tr>
	<tr>
	<td class="monospacefontfamily-bgcolorwhite"><embed></td>
	<td>Embed</td>
	<td>The container for any type of resource.</td>
	</tr>
	<tr>
	<td class="monospacefontfamily-bgcolorwhite"><figure></td>
	<td>Figure</td>
	<td>The encapsulator of media elements such as image, diagram or code snippet.</td>
	</tr>
	<tr>
	<td class="monospacefontfamily-bgcolorwhite"><figcaption></td>
	<td>Figure Caption</td>
	<td>The description for encapsulated medias.</td>
	</tr>
	<tr>
	<td class="monospacefontfamily-bgcolorwhite"><section></td>
	<td>Section</td>
	<td>The definer for elements in a document such as chapters, heading or any other area.</td>
	</tr>
	<tr>
	<td class="monospacefontfamily-bgcolorwhite"><article></td>
	<td>Article</td>
	<td>The holder of contents that makes sense on it's own such as articles, blogs and comments.</td>
	</tr>
	<tr>
	<td class="monospacefontfamily-bgcolorwhite"><aside></td>
	<td>Aside</td>
	<td>The enhancer of another element by marking additional information but isn't required in order to understand the main content.</td>
	</tr>
	</tbody>
	</table>
	</main>
	</body>
	</html>
	.monospacefontfamily-bgcolorwhite {
	font-family: Lucida Console, Courier, monospace;
	background-color: white;
	}

	.center {
	text-align: center;
	}


	h1 {
	font-size: 2em;
	font-weight: bold;
	margin-top: 5px;
	}

	h2 {
	color: rebeccapurple;
	}

	body {
	font-family: Arial, sans-serif;
	background-color: gainsboro;
	}

	table {
	border: 2px solid darkorchid;
	width: 650px;
	margin: 0 auto;
	text-align: start;
	}

	thead {
	background-color: plum;
	}

	td {
	border-top: 1px solid darkorchid;
	}