HTML Block Elements

An element is the html tag plus the content plus the closing tag. It's a chunk of code and content. "Block" means that it takes up the whole width of the screen (the height is usually determined by the content) and has a line break at the end (by default). Block elements also can have padding, nest other block elements. Below are some.

Headers

Headers create hierarchy to the web page. If you had a resumé for example, your name would be surrounded in a h1 tag (tags start with < and end with >), terms like education, work experience, etc. would be h2s and if further categories were needed, you'd use h3, h4, h5 and h6.

Headers naturally shrink

As you get higher in number

But you can change all of this in css later
Anyway

That was fun. But you wouldn't use headers in that way. Below you can see an h2 with h3s beneath.

Lists

Ordered lists

Ordered lists put a number in front of each item.

Example

  1. First list item
  2. Second list item
  3. Note how lists have a surrounding tag, then li tags to describe each item
  4. If you re-order the list items, the numbers stay ordered

Unordered lists

Pretty common for navigation or most any content that sits in parallel.

Example

  1. Home
  2. Portfolio
  3. About
  4. Contact us

Paragraphs

We've been using paragraph tags all along.

div

The div tag exists to organize (divide) chunks of content; usually for purposes of layout. You'll see a whole lot of divs if you look at a web page. And they nest. And they don't have any default visual style; so that's convenient. This paragraph is surrounded by a div tag, if you look at the source code.