loordbarringtn/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="./styles.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Semantic HTML Cheatsheet</title>
</head>
<body>
    <h1>Semantic HTML Reference</h1>
    <h2>Semantic Tags</h2>
    <table>
        <thead>
            <tr>
                <th>Tag</th>
                <th>Name</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="code">&lt;figure&gt;</td>
                <td>Figure</td>
                <td>element is used to encapsulate media such as an image, diagram. or code </td>
            </tr>
            <tr>
                <td class="code">&lt;figcaption&gt;</td>
                <td>Figcaption</td>
                <td>element is used to describe the media encapsulated within the &lt;figure&gt; element.</td>
            </tr>
            <tr>
                <td class="code">&lt;video&gt;</td>
                <td>Video</td>
                <td>allows us to add videos to our website.</td>
            </tr>
            <tr>
                <td class="code">&lt;audio&gt;</td>
                <td>Audio</td>
                <td>allows us to implement audio into our website.</td>
            </tr>
            <tr>
                <td class="code">&lt;embed&gt;</td>
                <td>Embed</td>
                <td>can be used to implement any type of media.</td>
            </tr>
            <tr>
                <td class="code">&lt;section&gt;</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 class="code">&lt;article&gt;</td>
                <td>Article</td>
                <td>holds content that makes sense on its own such as articles, blogs, and comments.</td>
            </tr>
        </tbody>
    </table>
    <h2>Semantic attributes</h2>
    <table>
        <thead>
            <tr>
                <th>Attribute</th>
                <th>Name</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <!-- <td bgcolor="MediumAquaMarine">src</td> -->
                <td bgcolor="MintCream">src</td>
                <td>Src</td>
                <td>attribute to link the source of the content</td>
            </tr>
        </tbody>
    </table>
    <h2 class="nogapeafter">Useful links:</h2>
    <div style="display:grid; justify-content:center">
    <a href="https://www.codecademy.com/learn/paths/front-end-engineer-career-path/tracks/fecp-web-development-fundamentals/modules/fecp-semantic-HTML/cheatsheet
    " target="_blank">Semantic HTML cheatsheet</a>
    <a href="    https://www.codecademy.com/practice/tracks/fecp-web-development-fundamentals/modules/fecp-semantic-HTML"
     target="_blank">Semantic HTML</a>
    </div>
</body>
</html>

## styles.css
body {
    background-color: navajowhite;
    text-align: center;
}

h1 {
    color: maroon;
    font-size: 32px;
}

h2 {
    color: maroon;
    font-size: 26px;
    padding: 20px;
}

table {
    text-align: left;
    font-family: monospace, 'Times New Roman', Times, serif;
    border-collapse: separate;
    margin-left:auto;margin-right:auto;
    border-spacing: 5px;
    font-size: 16px;
    width: 80%;
}

tr, td, table {
    border: 2px solid #dd8c36;
}

th, td {
    padding: 15px;
}

th {
    font-size: 20px;
    background-color: lightsalmon;
    color: ghostwhite;
    text-transform: uppercase;
    height: 30px;
}

.code {
    color: #15141f;
    background-color: #eae9ed;
    white-space: normal;
    font-family: Monaco,Menlo,Ubuntu Mono,Droid Sans Mono,Consolas,monospace;
}

a {
    color: DarkSalmon;
    font-weight: bold;
    text-decoration: underline;
    padding: 5px;
    float:left;
    clear:left;
}

.nogapeafter {
    padding: 20px 0px 0px 0px;
}

.center {
    border: 5px solid #FFFF00;
    margin: 0 auto;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<link rel="stylesheet" href="./styles.css">
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Semantic HTML Cheatsheet</title>
	</head>
	<body>
	<h1>Semantic HTML Reference</h1>
	<h2>Semantic Tags</h2>
	<table>
	<thead>
	<tr>
	<th>Tag</th>
	<th>Name</th>
	<th>Description</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td class="code"><figure></td>
	<td>Figure</td>
	<td>element is used to encapsulate media such as an image, diagram. or code </td>
	</tr>
	<tr>
	<td class="code"><figcaption></td>
	<td>Figcaption</td>
	<td>element is used to describe the media encapsulated within the <figure> element.</td>
	</tr>
	<tr>
	<td class="code"><video></td>
	<td>Video</td>
	<td>allows us to add videos to our website.</td>
	</tr>
	<tr>
	<td class="code"><audio></td>
	<td>Audio</td>
	<td>allows us to implement audio into our website.</td>
	</tr>
	<tr>
	<td class="code"><embed></td>
	<td>Embed</td>
	<td>can be used to implement any type of media.</td>
	</tr>
	<tr>
	<td class="code"><section></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 class="code"><article></td>
	<td>Article</td>
	<td>holds content that makes sense on its own such as articles, blogs, and comments.</td>
	</tr>
	</tbody>
	</table>
	<h2>Semantic attributes</h2>
	<table>
	<thead>
	<tr>
	<th>Attribute</th>
	<th>Name</th>
	<th>Description</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<!-- <td bgcolor="MediumAquaMarine">src</td> -->
	<td bgcolor="MintCream">src</td>
	<td>Src</td>
	<td>attribute to link the source of the content</td>
	</tr>
	</tbody>
	</table>
	<h2 class="nogapeafter">Useful links:</h2>
	<div style="display:grid; justify-content:center">
	<a href="https://www.codecademy.com/learn/paths/front-end-engineer-career-path/tracks/fecp-web-development-fundamentals/modules/fecp-semantic-HTML/cheatsheet
	" target="_blank">Semantic HTML cheatsheet</a>
	<a href=" https://www.codecademy.com/practice/tracks/fecp-web-development-fundamentals/modules/fecp-semantic-HTML"
	target="_blank">Semantic HTML</a>
	</div>
	</body>
	</html>
	body {
	background-color: navajowhite;
	text-align: center;
	}

	h1 {
	color: maroon;
	font-size: 32px;
	}

	h2 {
	color: maroon;
	font-size: 26px;
	padding: 20px;
	}

	table {
	text-align: left;
	font-family: monospace, 'Times New Roman', Times, serif;
	border-collapse: separate;
	margin-left:auto;margin-right:auto;
	border-spacing: 5px;
	font-size: 16px;
	width: 80%;
	}

	tr, td, table {
	border: 2px solid #dd8c36;
	}

	th, td {
	padding: 15px;
	}

	th {
	font-size: 20px;
	background-color: lightsalmon;
	color: ghostwhite;
	text-transform: uppercase;
	height: 30px;
	}

	.code {
	color: #15141f;
	background-color: #eae9ed;
	white-space: normal;
	font-family: Monaco,Menlo,Ubuntu Mono,Droid Sans Mono,Consolas,monospace;
	}

	a {
	color: DarkSalmon;
	font-weight: bold;
	text-decoration: underline;
	padding: 5px;
	float:left;
	clear:left;
	}

	.nogapeafter {
	padding: 20px 0px 0px 0px;
	}

	.center {
	border: 5px solid #FFFF00;
	margin: 0 auto;
	}