When building websites with HTML elements you must understand that these elements have certain default traits with respect to how they display in the browser.
Elements can display as a block and elements can display as inline. Block elements are like headings and paragraphs. Inline elements are like links and images.
As you build a website you will be placing HTML elements within other HTML elements. This creates a tree-like structure of parent and child relationships. By default block elements take up the full width of their parent element (aka parent container).
For instance if you were writing a blog post you would use the article tag to wrap around your blog post. Your blog post would likely contain headings and paragraphs. These headings and paragraphs would take up the full width provided by the article tag. Headings and paragraphs will also always start on a new line.
<!--When building a website you place HTML elements within other HTML elements--> <main> <article> <h1>This is my first blog post heading</h1> <p>This is my first paragraph for my blog post.</p> <p>This is my second paragraph for my blog post.</p> </article> </main>
Within the blog post you may also have links and images. Rather than taking up the full width and starting on a new line. Inline elements stay on the same line and only take up the space available for them. This makes sense. If you have a link within a paragraph wrapping some text you would not want it to start on a new line as it would mess up the formatting of your paragraph.
<!--When building a website you place HTML elements within other HTML elements--> <main> <article> <h1>This is my first blog post heading</h1> <!--An inline element like a link is not required to be within another element and can be on it's own line such as a list of links--> <p>This is my first paragraph for my blog post and it now has an inline <a href="#">link</a> element</p> <p>This is my second paragraph for my blog post.</p> </article> </main>
I find images a trickier one to remember, but it is an inline element. Images will be on their own line by default but with styling can make paragraphs wrap around them similar to a newspaper article or magazine. To get you to remember that Images are inline elements and not block elements, just remember that images complement your blog post or main message of the page, they are not the star of the show. Images are not dominant, they complement.
While I would suggest sticking to the block and inline most of the time there is a third display option called inline-block which essentially combines the characteristics of both. Essentially you have a block element on the same line. There are no elements set to inline-block by default. For formatting blocks I would stick to using flexbox and grid to organize blogs on a page rather than inline-block. Just helpful to know it exists and that you can set an element to this display type with CSS.
In another post you will learn how to style block and inline elements with CSS. For now just remember that block elements have more options for styling than inline elements.
No fluff. Just real projects, real value, and the path from code to cash — one useful build at a time.