A very important thing to understand about your HTML elements before you move on to learning CSS is whether the elements you add to your pages are inline or block-level elements. We don’t add specific tags to our HTML to make them inline or block, but knowing which kind they are is important.
Block-Level Elements
An block-level element is will display on your page without any other elements next to it. If you can imagine typing a line of text, then hitting enter on your keyboard, then typing more, the previous element would be one block, and the group before you hit enter again would also be one. Some common block-level elements are listed below.
header
main
footer
nav
h1-h6 headings
paragraphs
article
aside
section
lists
Inline-Level Elements
An inline-level element is will display in line with any other inline element on your page. Imagine that you have a paragraph of text. Inside of that paragraph, you have links to other information on your site. Those links would display inline with the rest of the text in the paragraph, not on a new line. This is what we mean when we refer to the way an inline-level element displays. Some common inline-level elements are listed below.
links
images
form labels
form inputs (including select, textarea, etc.)
spans