HTML has three types of elements, the Block-Level (Block) elements or Inline elements and the Empty (Self Closing) element.
These elements can be divided into related areas using Div and Span.
Classes and IDs are used to identify these elements so they can be targeted for styling, layout and function.
Block and Inline
Let’s start by exploring what is the main difference between Block level and Inline elements.
Block level elements extending across the full width of the area the block element is placed. Each addition block element appears below the previous one.
Inline elements appear next to each to each other on either the left or right and can start anywhere on a line.
Block
The example below illustrates how two Block level elements appear together. Here we use a headline followed by a paragraph block element.
<h1 style="background-color: yellow;">This is a headline</h1>
<p style="background-color: lightgrey;">This is a paragraph of text</p>This is a headline
This is a paragraph of text
By using a different background colour for each block level element we can clearly see how the block level element appears across the full width of the available area and not just around the text.
HTML Block level elements include:
ph1, h2, h3, h4, h5, h6ol, ulpreaddressblockquotedldivfieldsetformhrnoscripttableInline
Inline elements appear next to each other as shown in the example below. In this example, each inline elements has a different coloured background showing the space each inline element occupies.
<h1><span style="background-color: yellow;">Yellow</span><span style="background-color: red;">Red</span><span style="background-color: blue;">Blue</span></h1>
YellowRedBlue
In the second example below, a lightgrey background colour applied to the H1 element, showing the inline elements still appear within the H1 block level element.
<h1 style="background-color:lightgrey;"<span style="background-color: yellow;">Yellow</span><span style="background-color: red;">Red</span><span style="background-color: blue;">Blue</span></h1>
YellowRedBlue
HTML Inline elements include:
aimgbstrongiemqsmallbigcodespanbuttoninputlabelselectscriptsubsuptextareaEmpty element
Empty elements are HTML elements without any content, such a line break <br> or <br />. These elements do not require a closing tag as they are empty elements.
HTML Empty elements include:
<area><base><br><col><embed><hr><img><link><meta><source><track>Divs and Spans
HTML can be divided into groups of elements using <div> for Block level elements and <span> for Inline elements.
Div
Div (division) allows a number of block level elements to be grouped together in a container which can simplify the organisation, layout and styling of the HTML document.
The <div> tag is used at the beginning of the div element and requires a closing tag </div> at the end. Nested inside the Div are all the related block level elements.
The example below shows a div container used to group two block level elements.
<div class="special-offer"><h2>Special Offer</h2><p>Get 10% off your next order</p></div>Grouping elements into Divs enables the grouped elements to have related CSS styling, positioning and functionality applied.
Span
Spans are used to define a selection of an inline element. The opening <span> tag is applied at the start of the selected content and the closing </span> at the end.
Spans applied in the example below have a different colour applied to the word red and blue.
<h1><h1 style="color: grey;">Roses are <span style="color: red;">Red</span>Violets are <span style="color: blue;">Blue...</span></h1>
Roses are Red
Violets are Blue…
Spans shouldn’t be used often and it is better to use where possible classes or ids to target inline elements.
Classes and IDs
Class and Id are hooks that are used to identify HTML elements within a document so they can be targeted for styling in CSS or manipulation by another language like JavaScript.
id="name-of-id"class="name-of-class"These hooks can be applied to any HTML element, for example, a paragraph.
<p class="highlighted">This is a paragraph we want to target with the 'highlight' class within our css.</p><p id="special">This is a paragraph we want to target with the 'special id' class within our css or javascript.</p>An element can have both an ID and a Class.
<p id="special" class="red-text">This is a paragraph with a special id and class of red-text.</p>Classes
Classes can be applied to elements that appear more than once in an HTML document. Classes are used when the existing semantics definition of an element is not enough. For example, if you want different colours for paragraphs of text.
<p>This is the first paragraph of text.</p><p class="red-text">This is the second paragraph of text.</p>The same class can be used multiple times on multiple elements.
Classes should be used for elements which have repeatable characteristics.
IDs
IDs are used for targeting unique items in the HTML document. Only one ID can be used per element and this ID can be used only once per page.
IDs can be used for styling CSS but classes should probably be used together with an ID for added clarity in the markup.
IDs have an additional useful feature which is the ‘hash-value’ in the URL. When a web address appears with a hashtag, eg. www.points-pixels.com#links, then the browser will try to locate an ID with this name (links) in the HTML document and automatically scroll to this point on the page.
<p id="links">This is a list of links</p><ul><li> Link one</li><li> Link two</li><li> Link three</li></ul>
IDs should be used for unique items that appear only once per page.