HTML Tables
| Tag | Name | Description | Link to MDN |
|---|---|---|---|
| <table> | Table | The wrapper element for all HTML tables. | The Table element |
| <thead> | Table Head | The set of rows defining the column headers in a table. | The Table Head element |
| <tbody> | Table Body | The set of rows containing actual table data. | The Table Body element |
| <tr> | Table Row | The table row container. | The Table Row element |
| <td> | Table Data | The table row container. | The Table Data Cell element |
| <tfoot> | Table Foot | The set of rows defining the footer in a table. | The Table Foot element |
Other HTML tags
| Tag | Name | Description | Link to MDN |
|---|---|---|---|
| <head> | Metadata element | Contains metadata and links to scripts and stylesheets. | The "head" HTML element |
| <body> | Body element | Encloses the content of the document visible to users. | The Document Body element |
| <main> | The Main element | Represents the dominant content of the body. | The Main element |
| <header> | The Header element | Represents introductory or navigational content. | The Header element |
| <footer> | The Footer element | Represents a footer for its nearest section. | The Footer element |
| <section> | Section element | Defines a section of the document. | Generic Section element |
| <p> | Paragraph | Defines a paragraph. | The Paragraph element |
| <div> | Content Division | Defines a division or section in an HTML document. | Content Division element |
| <span> | Content Span | Used to group inline-elements in a document. | Content Span element |
| <img> | Image Embed | Embeds an image into the document. | Image Embed element |
| <nav> | Navigation Section | Defines a set of navigation links. | The Navigation Section |
| <ul> | Unordered List | Defines an unordered (bulleted) list. | The Unordered List |
| <ol> | Ordered List | Defines an ordered (numbered) list. | Ordered List element |
| <li> | List Item | Defines a list item. | List Item element |
CSS selectors and specificity
| Selector | Example | Description | Link |
|---|---|---|---|
| Element Selector | p {} | Selects all <p> elements | CSS element Selector |
| ID Selector | #firstname | Selects the element with id="firstname" | CSS #id Selector |
| Class Selector | .intro | Selects all elements with class="intro" | CSS .class Selector |
| Class Selector | p.intro | Selects all <p> elements with class="intro" | CSS .class Selector |
| Universal Selector | * | Selects all elements | CSS Universal (*) Selector |
Common CSS properties
| CSS properties | Example | Description | Link to MDN |
|---|---|---|---|
| color | color: blue; | Sets the color of the text. | MDN Web Docs - color |
| background-color | background-color: yellow; | Sets the background color of an element. | MDN - background-color |
| font-size | font-size: 16px; | Sets the size of the font. | MDN Web Docs - font-size |
| margin | margin: 10px; | Sets the margin space around an element. | MDN Web Docs - margin |
| padding | padding: 10px; | Sets the padding space inside an element. | MDN Web Docs - padding |
| border | border: 1px solid black; | Sets the border around an element. | MDN Web Docs - border |
Useful links
| Name and link |
|---|
| LearnGitBranching |
| Google Fonts |
| MDN Web Docs |
| Markup Validation Service |
| Web Safe Fonts |
| CSS Colors |
| Scratch |
| Host JPG, GIF and PNG images |
| Building a better web, together |
| HTML Tutorial |