<header><h1>Basic HTML Cheatsheet</h1></header>
<main>
<section id="basic-tags">
<h2 class="section-header" >Basic tags</h2>
<table>
<thead>
<tr>
<th>Tag</th>
<th>Name</th>
<th>Description</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<!-- html tag -->
<tr>
<td><code><html><code></td>
<td>Html</td>
<td>Creates an HTML document</td>
<td class="code-segment" rowspan="4">
<pre>
<code>
<html>
<head>
//page information
<title>Youtube</title>
</head>
<body>
//HTML code
</body>
</html>
</code>
</pre>
</td>
</tr>
<!-- head tag -->
<tr>
<td><code><head><code></td>
<td>Head</td>
<td>Sets off the title & other info that isn't displayed.</td>
</tr>
<!-- body tag -->
<tr>
<td><code><body><code></td>
<td>Body</td>
<td>Sets off the visible portion of the document.</td>
</tr>
<!-- title tag -->
<tr>
<td><code><title><code></td>
<td>Title</td>
<td>
Puts name of the document in the title bar; when bookmarking
pages, this is what is bookmarked.
</td>
</tr>
</tbody>
</table>
</section>
<section id="text-tags">
<h2 class="section-header">Text Tags</h2>
<table>
<thead>
<tr>
<th>Tag</th>
<th>Name</th>
<th>Description</th>
<th>Example</th>
<th>Result</th>
</tr>
</thead>
<!-- h tags -->
<tr>
<td>
<code><h1> </h1> --> <h6> </h6></code>
</td>
<td>Heading Tag</td>
<td>Creates headlines -- h1 being the largest to h6 being the smallest.</td>
<td><pre><code>
<h1>Travel blog</h1>
<h2>Travel blog</h2>
<h3>Travel blog</h3>
<h4>Travel blog</h4>
<h5>Travel blog</h5>
<h6>Travel blog</h6>
</code></pre>
</td>
<td>
<h1>Travel blog</h1>
<h2>Travel blog</h2>
<h3>Travel blog</h3>
<h4>Travel blog</h4>
<h5>Travel blog</h5>
<h6>Travel blog</h6>
</td>
</tr>
<!-- p tags -->
<tr>
<td><code><p></code></td>
<td>Paragraph tag</td>
<td>This tag is used to define a Paragraph</td>
<td><code><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci quisquam repudiandae labore, voluptatibus eum corporis? Ut enim praesentium voluptatum porro!</p></code></td>
<td><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci quisquam repudiandae labore, voluptatibus eum corporis? Ut enim praesentium voluptatum porro!</td>
</tr>
<!-- strong tag -->
<tr>
<td>
<code><strong></code>
</td>
<td>Strong Importance/Bold</td>
<td>This HTML element indicates that its contents have strong importance typically rendering the contents in bold type.</td>
<td><code>The event will be this <strong>Friday!</strong></code></td>
<td><p>The event will be the <strong>Friday!</strong></td>
</tr>
<!-- emphasis tag -->
<tr>
<td><code><em></code></td>
<td>Emphasis</td>
<td>This element marks text that has stress emphasis</td>
<td><code>His most famous work was, <em>"Star Wars VI Return of the Jedi".</em></code></td>
<td><p>His most famost work was, <em>"Star Wars VI Return of the Jedi".</em></td>
</tr>
</table>
</section>
<section id="list-tags">
<h2 class="section-header">List Tags</h2>
<table>
<thead>
<tr>
<th>Tag</th>
<th>Name</th>
<th>Description</th>
<th>Example</th>
<th>Result</th>
</tr>
</thead>
<tbody>
<!-- ordered list -->
<tr>
<td><code><ol></code></td>
<td>Ordered list</td>
<td><p>This defines an ordered list. An ordered list can be numerical or alphabetical</td>
<td class="code-segment" rowspan="3"> <pre><code>
<h3>Chores</h3>
<ol>
<li>Clean room</li>
<li>Take out Garbage</li>
<li>Feed cats</li>
</ol>
<h3>Favorite food</h3>
<ul>
<li>Pizza</li>
<li>Sushi</li>
<li>Ramen</li></code></pre>
</td>
<td rowspan="3"><h3>Chores</h3>
<ol>
<li>Clean room</li>
<li>Take out Garbage</li>
<li>Feed cats</li>
</ol>
<h3>Favorite food</h3>
<ul>
<li>Pizza</li>
<li>Sushi</li>
<li>Ramen</li>
</ul></td>
</tr>
<!-- unordered list -->
<tr>
<td><code><ul></code></td>
<td>Ordered list</td>
<td><p>This defines an unordered list. groups a collection of items having no numerical order</td>
</tr>
<!-- list item-->
<tr>
<td><code><li></code></td>
<td>list item</td>
<td><p>This element is used to represent an item in a list</td>
</tr>
</ul>
</tbody>
</table>
</section>
</main>
</body>
body {
background-color: cornsilk;
font-family: Georgia, "Times New Roman", Times, serif;
}
header {
text-align: center;
}
table {
border: 7px solid crimson;
}
td,
th {
text-align: center;
}
th {
font-weight: bold;
}
.section-header {
color: darkred;
text-align: center;
}
.code-segment {
text-align: initial;
}
code,
.code-segment {
background-color: lavender;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.