A crappy weekend, div and span

Man, this was an awful weekend. New medical issues decided to pop up (my feet decided to join the party and become numb like my arms). On the plus side, I did get to see the new lego movie, which was fucking awesome.

HTML blocks and layout

I actually accidentally already learned about <span> and <div> earlier, because I had seen span a million times and then had to use it for styling outlines, but yolo we’ll cover it again. It turns out HTML elements can be one of two things – block level elements, or inline elements.

Block level – Typically start and end with a new line when displayed in a browser. Examples include <p>, <h1>, and <div>

Inline – Typically displayed without starting a new line. Examples include <b>, <td>, <a> and <span>

<div> is a block level element that can be used as a container for grouping other HTML elements. Because it is a block level element, the browser will display a line before and after it. It’s mainly used with CSS to style attributes to large blocks of content.

<div class=“firstlist”>

<h1>What’s good in the hood</h1>

<p>This whole thing will be styled</p>


Now <span>, however, is a inline element, meaning that there’s no line displayed before and after it. It is used as a container for text, to style parts of text.

<p> This is a good example of a <span id=“super”>super enthusiastic</span> part of my sentence </p>

In the examples above, you can see I linked them to id’s and classes, which I’d then use in my style sheet to style the sections their containing.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s