Basics
| Tag | Description |
|---|---|
| <!DOCTYPE html> | Defines the document type and version of HTML |
| <html> | Defines the root of an HTML document |
| <head> | Contains meta-information about the document |
| <title | Defines the title of document, shown in browser's tab, add into <head> |
| <link rel="stylesheet" href="styles.css"> | Links CSS stylesheet to HTML doc inside <head> |
| <div> | Defines a division or section in HTML, which can be styled with CSS |
| <span> | An inline container used to mark of a part of text with CSS |
| <br> | Inserts a single line break |
| <hr> | Creates a thematic break in the content (horizontal line) |
CSS Attributes
| Attributes | Description |
|---|---|
| background-color | Sets the background color of an element |
| color | Sets the foreground color of an element |
IDs & Classes
HTML Tags
| Tag | Description |
|---|---|
| <id=""> | Specifies a unique ID for an HTML element, can only be used for one element within the page |
| <class=""> | Points to a class name in HTML, can be used for multiple elements |
CSS Attributes
| Attribute | Description |
|---|---|
| # | #id in CSS, can only be used for one element within the page |
| . | .class points to a class name. Can be used for multiple elements |
Typography
HTML Tags
| Tag | Description |
|---|---|
| <h1> to <h6> | Defines HTML headings, from largest <h1 to smallest <h6> |
CSS Attributes
| Attribute | Description |
|---|---|
| font-family | Defines font-family, separate with commas for backup fonts |
| font-weight | Defines the font weight. Can be set with normal, bold, lighter, bolder |
| font-style | Sets a font with normal, italic, oblique |
| text-transform | Specifies how to capitalize an element's text: capitalize, uppercase, lowercase, none |
| text-align | Sets horizontal alignment of inline-level content inside a block element: center, start, end, justify |
Tables
HTML Tags
| Tag | Description |
|---|---|
| <table> | The wrapper element for all HTML tables |
| <thead | The set of rows defining the column headers in a table |
| <tr> | The table row container |
| <th> | Defines a header cell in a table |
| <tbody> | The set of rows containing actual table data |
| <td> | Defines a standard cell in a table |
| <tfoot> | The set of rows defining the footer in a table |
| <colspan> | Defines number of columns a td element should span |
| <rowspan> | Defines number of rows a td element should span |
CSS Attributes
| Attribute | Description |
|---|---|
| border | Defines the border of the table-including width, style, color |
| padding | Defines the space between the cell content & its border, apply to <td> and <th> |
| border-spacing | Defines the space between cells in a table, use on <table> property |
Lists
| Tag | Description |
|---|---|
| <ol> | Defines an ordered list |
| <ul> | Defines an unordered list |
| <li> | Defines a list item |
| <dl> | Defines a description list |
| <dt> | Defines a description term |
| <dd> | Describes each description term |
Images
HTML Tags
| Tag | Description |
|---|---|
| <img src="img.jpg" alt="description"> | Defines an image |
| width | set width="#" inside img tag |
| height | set height="#" inside img tag |
| title="" | Displays title when mouse hover image |
| <figcaption> | Provides caption for figure |
CSS Attributes
| Attribute | Description |
|---|---|
| background-image | Sets one or more background images on an element |
Links
HTML Tags
| Tag | Description |
|---|---|
| <a> | Anchor element to create hyperlink <a href="https://google.com"> |
Resources
- W3 Schools
- Learn to code with the world's largest web developer site.
- MDN Web Docs
- Comprehensive source for web development documentation, covering from HTML, CSS, JavaScript.