Container Elements

Container elements are used for grouping and styling in HTML. These are particularly useful for breaking down your webpage into sections. They aid in styling by isolating the part that you want the style rule to apply to. For instance, if you wanted a word in a sentence to be a different colour; you would have the sentence inside a paragraph and wrap the word you want to colour in a span element. This span can then be targeted with style rules, which will be covered in the CSS section, resulting in only a colour change to the word wrapped in the span element, not the whole paragraph.

Element	Description	Common Attributes
`<div></div>`	A division element that encapsulates other page elements and divides a HTML into sections. Typically used for larger sections.	IDs and classes used for styling purposes (covered just down the page).
`<span></span>`	An inline small container element that takes up the same amount of space as its content. They are used to style or manipulate a specific portion of text.	IDs and classes used for styling purposes (covered just down the page).

Structural Elements

Structural elements define the role of text in the document structure. Headings in HTML are very important to ensure that your website is accessible and available to users. They range in size and importance from H1 down to H6. For best practices, there should only be one H1 per webpage and then then subsequent headings should follow the hierarchical order without skipping levels, for example then there should be a H2 heading following a H1 without skipping straight to H3. Although there should only be one H1 per page, there can be multiples of the other heading levels. This may seem odd at first, but it is actually quite intuitive. Imagine you are writing an essay or report; you generally have a big title at the top of it; that is your H1 heading. Then each section will have its own title, but stylistically these section titles will look the same; these are your H2 titles. If a section is further split into more sections, these would be titled with smaller headings (H3), and some H2 sections would have no smaller sections at all. This may result in a contents page that looks like:

H1 (title)
- H2 (Section 1)
  - H3 (Sub-section 1)
  - H3 (Sub-section 2)
    - H4 (Sub-sub-section 1)
- H2 (Section 2)
- H2 (Section 3)
  - H3 (Sub-section 1)
  - H3 (Sub-section 2)
    - H4 (Sub-sub-section 1)
      - H5 (Sub-sub-sub-section 1)
        
        H6 (Sub-sub-sub-sub-section 1)

Paragraphs use the <p></p> tags and anything written between the opening and closing tag will appear as a paragraph on your web application.

Code

<h1>This is a level 1 header</h1>
<h2>This is a level 2 header</h2>
<h3>This is a level 3 header</h3>
<h4>This is a level 4 header</h4>
<h5>This is a level 5 header</h5>
<h6>This is a level 6 header</h6>
<p>This is a paragraph</p>

Result

This is a level 1 header

This is a level 2 header

This is a level 3 header

This is a level 4 header

This is a level 5 header

This is a level 6 header

This is a paragraph

Text Formatting Elements

These are inline elements that change the appearance of text and the typical ones are:

Element	Description
`<b>Bold</b>`	Bold
`<i>Italic</i>`	Italic
`<u>Underline</u>`	Underline
`<s>Strikethrough</s>`	~~Strikethrough~~
`<mark>Highlighted Text</mark>`	Highlighted Text
`<small>Smaller Text</small>`	Smaller Text
`<sub>Subscript</sub>`	_Subscript
`<sup>Superscript</sup>`	^Superscript
`<q>Quotation</q>`	Quotation
`<abbr title="Explanation on hover">Abbreviation on hover</abbr>`	AoH
`<dfn title="Explanation on hover">Definition on hover</abbr>`	Defined Word

Breaking Elements

Some elements introduce purposeful breaks in the follow of the webpage. This can be to ensure that the next element is placed on another next line or to introduce a horizontal rule across the page between sections.