Your websites are all made up of inline and block elements. The Complete Web Developer Course tutorials show you how to use these elements, though this post talks about some of the differences between the types of element, and where you would use each type.
An element is defined in HTML tags. A paragraph is a HTML element that is opened with a <p> tag, and closed by a </p> tag.
Emphasised text is defined by the <em> and </em> tags surrounding the text to be emphasised (typically in italics).
Though both <p> and <em> elements are text elements, there is one key difference between them.
Paragraph elements are block elements, whereas emphasis elements are inline elements.
In this post, I’ll be looking at three of the most common element types you’ll need to use, where to use them, plus a few bonus types.
Block elements
A block element is an element that, oddly enough, acts as a block would.
By this, I mean that it defines a rectangular area of the screen, it tries to be as wide as possible, and everything that precedes the element remains above it, and everything that proceeds it is pushed below it.
For example:
Two block elements
A block element can contain other elements within it, and can be styled to certain dimensions.
The most basic block element that exists is the <div> element, which is a generic container you can style for any purpose.
Inline elements
An inline element will act as though it’s part of a flow of text.
Consequently, elements used to manipulate text in a HTML document in some way are almost always inline.
The <strong> element is an inline element within the block <p> element.
If for example the <a> element were a block element, every new link you create would be stranded on a line of its own. No one wants a lonely link.
The most basic inline element is the element, which is the inline equivalent of the
element. It’s a generic container that allows you to refer to specific text in your site using CSS or JavaScript.
Super secret hybrid: Inline-block elements
There is a lesser-known third type of element that combines inline elements with block ones, allowing you to do things like set a height and width, but keep the element in a flow of text — the inline-block.
No element is an inline-block element by default, but you can set it as one using CSS.
Here’s how:
.exampleElements {display: inline-block;}
Inline-block elements are useful in scenarios a series of blocks need to line up as part of a flow, for example, <li> elements in an unordered list to create a navigation bar:
In this example, the <ul> element is a block, but the <li> elements are inline-blocks
Blocks can become inline
The display property can be used for more than setting making an element an inline-block.
Liquidity is the name of the game. Though every element has its default state, its default state can be changed using CSS.
If you need your emphasised words to be so emphasised that they have a line to themselves, why not make them a block element?
em {display: block;}
Conversely, if you want to make a block element inline, you can make it happen with this CSS:
div {display: inline;}
Bonus element types
There are actually a total of 20 different settings that the display property of a HTML element can be given, though block, inline, and inline-block elements are the most useful to understand, especially in the earlier stages of the web developer course.
Don’t be afraid to experiment though! If you sign up to the web development course, you’re eligible for one year of free hosting with an Advanced hosting account from Eco Web Hosting, which you can use to get creative.
Recent Comments