HTML Basics - Structure

So - you’ve gotten this far, time for the real stuff.

HTML exists in the present world to give structure to webpages. In the infancy of the internet, we used it to style elements as well, but with the rise of CSS those days are long gone. Here are the basics -

<div>

Uninspiringly short for ‘division’, this is our bread and butter. ‘divs’ are likely the most common tag a web developer will use, and for good reason. The lowly div is easy to style, unflattering in its default shape and size, and unspecific about what its contents may be. Essentially, it is a container for the content of a webpage. For the sake of easy styling, it is safe to say that everything should be put in a div unless otherwise specific needs appear.

<section>, <header>, <footer>, and <article> are functionally the same as <div> but denote what their contents are. See my article on semantics for more on the topic.

div elements are stacked vertically on top of each other in a first-come first-served arrangement. Elements with this behavior are called block-level elements because they stack… like blocks…

Most HTML elements exhibit block-level behavior.

<span>

However, span is div’s ‘inline’ antithesis. When placed inside another element, its contents appear on the same line (hence ‘inline’) as the content of the host tag.

Be careful though, span is picky and will only show inline with the tag of choice if it is actually inside the other tag. Put it on the outside and it stacks below the content that is in front of it. On the other hand, two span tags next to each other do display inline. Test it out here.

<table>

A table with X and Y axes, just like a spreadsheet. This is the only real way HTML has to structure content horizontally. It isn’t pretty, but it has its uses. Most of the structure benefits you get from the <table> can be done better by styling conventions of CSS, so the use case here is more or less the same as data in an Excel worksheet. If it absolutely has to be done exclusively in HTML, then at least <table> exists!

<ul> and <ol>

The Unordered List and its Ordered List sibling are more or less what one might expect from a list. The difference between the two are the symbol used as a bullet before each list item, unordered being symbol bullets like the dot or dash, and ordered being numbers, letters, or roman numerals. They both contain items with the tag <li> meaning - surprise! - ‘list item’. Inside each list item goes whatever content you want as an item in the list.

These are all the elements that structure a webpage. Seems like a small list, but due to the incredibly efficient relationship between HTML and CSS, these are all we need. The structure established with HTML can be seen as inception-style boxes within boxes, with each box’s purpose in mind awaiting its styling with CSS.