My HTML and CSS Structure Cheat Sheet Project for Codecademy

HTML Page Structure

I often struggle with remembering the order or the structure of things when it comes to writing code. So I created the Cheat Sheet tables below as a reference to come back to when I struggle.

This page isn't that attractive and I'm pretty sure it's frowned upon to put tables, in tables in tables but using tables was the aim of the project so, please forgive me.

Feedback and constructive criticism welcome!

Name Element Meaning Used For
<html> HTML stands for Hypertext Markup Language Tells the browser that this is an HTML file so it can display it
<head> Used at the top of the page as a header Invisible to the user, contains links to fonts, styles and other information browsers and search engines need
<meta...> Metadata is data (information) about data. Meta name, content etc
<link...> Connects to something external to use it on the page Linking style sheets (CSS), fonts etc
<title> Name of the page Descriptive name that Google can process and also displays in browser tabs
<body> Defines the document's body. There can only be one. Contains the content of the page that can be seen and read
<nav> Short for 'navigation' Used for menus that help users navigate the page or site
<main> The main part of the content that the page has been made for Everything that the page's title describes - the text, images other media and more.
<section> A part within the main content Breaks up the page's content so the page can be easily read in HTML
<article> A self-contained part of the page's dialogue Used for content that can stand alone on the page
<aside> Content that is positioned to the side Mainly used for sidebars
<footer> The section at the bottom of a page Contains anything you need to appear after the main content and is the same on every page eg, a secondary menu or contact details


<html>
<head>
<meta...>
<link...>
<title></title>
</head>
<body>
<nav></nav>
<main>
<aside></aside>
<section></section>
<article></article>
</main>
<footer></footer>
</body>
</html>


HTML Table Structure

Name Element Meaning Used For
<table> Establishes your table to the browser Used to display content in cells organised in rows and columns
<thead> Much like the <header> element but for tables Contains the header cells. They can easily be styled differently.
<th> The table's header cells Use this element to mark the titles of your columns and rows and give them a different style
<tbody> Establishes this is the main content of your table Much like the <body> element for the page.
<tr> This is the table-row element. Starts a new row for your table
<td> These are the table-data cells of your table. Each new <td> starts a new cell in the same row. In the first row, it sets out your columns.
<tfoot> Specifies the footer part of your table Often used to display totals of columns etc.


<table>
<thead>
<tr>
<th></th> <th></th> <th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td> <td></td> <td></td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th> <th></th> <th></th>
</tr>
</tfoot>
</table>

CSS Structure

I know CSS specificity isn't strictly 'structure' but it is still a sequence that needs to be memorised so that you are able to write CSS that flows correctly and is easy to use.

There are also many more CSS Selectors that I didn't include but the table was getting difficult to handle as it was. Maybe this is something I can add in the future.

If you're really interested in CSS Specificity then I highly recommend you look into how you can 'Calculate' it and give it a value as explained here by CSS Tricks. As an amateur, I thought this was really interesting.

Name Example Specificity
<element> body, h1, div, p
.class, :pseudo-class .banner, :active
#id #extraspace
CSS Sheet Order .example {color:green;} .example {color:blue} blue wins
Inline Styling <h1> style=""...
!important Tag color: red!important;