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.

Header 2

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

This is an h6, as high as you can go

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.