| Tag | Name | Description |
|---|---|---|
| <table> | Table | The wrapper element for all HTNL tables and the associated tags. |
| <thead> | Table Head | The set of rows defining the volumn headers in a table. |
| <tbody> | Table Body | The set of rows containing actual table data. |
| <tr> | Table Row | The table row container for each line you need in the table. |
| <td> | Table Data | A column cell that you need for each row (embed in the table row tag). |
| <tfoot> | Table Foot | The set of rows defining the footer in a table |
| Attribute | Name | Description |
|---|---|---|
| colspan | Column Span | Defines how many columne a td element should span. |
| rowspan | Row Span | Defines how many ros a td element should span. |
| Tag | Name | Description |
|---|---|---|
| <head> | Head | Contains machine-readible information (metadata) about the documents, like title, scripts and stylesheets. |
| <h1>-<h6> | Headings | Headings for content. Start at h1 as the largeest and also most important and go to h6 as the smallest and leaste important. |
| <div> | Division | Generic container for flow content. Used to seperate parts of the HTML out. Has no effect on styling itself inless paid with CSS. |
| <p> | Paragragh | Represents a paragraph of usually texts, but can be used for any structual grouping, lile images. |
| <ul> | Un-ordered List | Used to represent a list of items, typically rendered as bullet points. |
| <ol> | Ordered List | Used to represent a list of items, typically from top to bottom. |
| <li> | List Item | Items for a list, to be embded in either ol or ul. |
| <a> | Anchor Tag | Anchor elements are used with their href attributes to vreate hyper links to othe pages, files, email address, location on the same page etc. |
| <span> | Span | Generic inline container for phrasing content, in itself it does not do anything, but usally paired with CSS. |
| Tag | Name | Description |
|---|---|---|
| <article> | The Article Element | This represents a self-contained composition in a document, page etc. It is intended to be independantly distributable or reusable such as a magazine or newpaper article. |
| <aside> | The Aside Element | This represents a portion of a document whose content is only indirectly related to the document's main content. Asides are frequently presented as sidebars or call-out boxes. |
| <nav> | The Navigation Section | This epresents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes. |
| <section> | The Generic Section Element | This represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions. |
| <main> | The Main Content | This represents the dominant content of the of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application. |
| Selectors | Name | Description |
|---|---|---|
| #id | ID Selector | Selects the element to style based on ID. Element must have the ID assigned and in css the ID name is prefixed with a '#'. This is the most specific. |
| .class | Class Selector | Selects the element to style based on class. This can be one element or multiple. Element(s) must have the class assigned and in css the class name is prefixed with a '.'. This is the second most specific. |
| element | Element Selector | Selects the element(s) to style based on the elemnt name. For instance if you typed 'h3' this would style all of the h3 elements. This is the leaste specific. |
| * | Universal Selector | This styles the entire page. it is often used to reset the styleing that many modern browsers will automatically apply. |
| element[attribute] | Attribute Selectors | All elements based on the name or value of a specific attribute can be selected and styled at once using a CSS attribute selector. |
| element.class | Element and class secector | Used to select a specified element within the specified class. |
| selector1 selector2 | Descendant Selector | Every elements that are descendants of a particular element are matched by the descendant selector. Whenever styling needs to be attributed to a few individual elements, this would be incredibly beneficial. |
| selector1, selector2, selector3 | Selector list | The list selector will apply styling to ever selector in the list seperated by a ','. |
| selector.hover | Pseudo-classes | The distinct state of an element is specified by a pseudo class (:). Based on the state of an element, styling can be applied. for instance, when a user mouses over it, visits, or clicks on a link. |
| Properties | Descrition | Options |
|---|---|---|
| algin-content | Align Content | This property sets the distribution of space between and around content items. There are examples of this in mdn web docs. |
| background | Background Property | This attribute sets all background styles properties. Can be amended for image, colour size etc. |
| border | Boder Property | This seets an elements border. Can be used with border0width, border-style etc. There are many examples in mdn web docs. |
| color | Color Property | This sets the foreground color value of an elements text and text decorations. |
| display | Display Property | This sets whether an element is treated as a block, inline box and the layout used for its children. |
| float | Float Property | This places an element on the left or right side of its container. There are examples of how to use this in mdn web docs. |
| font | Font Property | This sets all the different properties of an elements font. Has alternatives sich as font-family etc. |
| height | Height Property | Sets the heights of an element. |
| width | Width Property | Sets the width of an element. |
| margin | Margin Property | Sets the margin area of an element. There are many variations of this. |
| padding | Padding Property | This sets the padding on all four sides of an element. There are variations of this. |
| z-index | Z-Index Property | This sets the z-order of a positioned element. It essenitally determines which elements show on top if they overlap or are laid on top of one another. |
| opacity | Opacity Property | This determines how transparant an element is |