As you become more familiar with HTML (formally known as “HyperText Markup Language”) and with the pieces that make up this coding language (html tags), you will eventually notice that there is an important difference in the way certain tags display your information in the browser. This important difference is that html tags can be broken up into two main categories:
BLOCK ELEMENTS and INLINE ELEMENTS
Block elements essentially do what their name sounds like: they take whatever text or other information you type inside of them and display it as a block, or separate visual chunk, when viewed in the browser. Block elements (or html tags) force a new line break and create some space around them on your page (above and below them). They will also take up the entire width of the page, unless you specify that they should be contained within a certain width.
Here is an example how a block element – in this case the <div> tag – would display on a page:
This takes up more than one horizontal line of space
Here is an example of how a DIV block element would appear on your web page.
Inline elements also essentially do what their name sounds like: they display your information along the same line (or row) and same visual space. They do not force what you type to begin on a new line, and they only take up as much space as the information you typed inside of your html tags does. A topic that is related to this subject is using inline CSS. This article goes into some detail on how to use inline CSS on your website or blog.
Example of how a SPAN inline element would appear on your web page.
For quick reference, here is a list* of block elements and inline elements (HTML5 tags are in red):
BLOCK
- address
- article
- aside
- blockquote
- body
- br
- button
- canvas
- caption
- col
- colgroup
- dd
- details
- dialog
- div
- dl
- dt
- embed
- fieldset
- figcaption
- figure
- footer
- form
- h1
- h2
- h3
- h4
- h5
- h6
- header
- hgroup
- hr
- li
- main
- map
- nav
- noscript
- object
- ol
- output
- p
- pre
- section
- table
- tbody
- tfoot
- th
- thead
- tr
- ul
INLINE
- a
- abbr
- acronym
- audio
- b
- big
- br
- button
- cite
- code
- data
- datalist
- details
- del
- dfn
- em
- embed
- font
- i
- iframe
- img
- input
- ins
- kbd
- label
- legend
- link
- map
- mark
- meter
- nav
- noscript
- object
- optgroup
- option
- output
- picture
- samp
- script
- select
- small
- source
- span
- strong
- sub
- summary
- sup
- svg
- tbody
- td
- textarea
- time
- tt
- var
- video
*Note: this list might not be 100% complete, and it also might include certain html tags that are not strictly considered either inline or block-level. (For example, the “body” tag probably isn’t truly either a block or an inline tag per se).
HTML (and now HTML5) is the core coding language that makes up the foundation of what we see today on the internet. There are so many tools and different types of website functionality available to us today, even compared with 10 years ago. When I first began building websites (back in the days of the dinosaurs), the spec was HTML4 – which I thought was awesome back in the day – but now with the new semantic version of html, many more options are open to me (and you).
And frankly in my opinion, html5 is much more simple, is more in keeping with web accessibility guidelines, and it’s better for SEO too! The SEMRush blog has a very detailed article all about semantic HTML5 – what is it and how to use it.
I encourage you to get out there and create and don’t be afraid to push the limits, to try new things, and have fun with it! Please share this article & let me know down in the comments if I missed anything here – or if you have any general questions about web development.
