- Explain the difference between block and inline elements
- Wireframe a complex layout utilizing semantic HTML tags
BlockA block-level element occupies the entire width of its parent element (container), thereby creating a “block.”
InlineAn inline-level element only occupies the space bounded by the tags defining the element, instead of breaking the flow of the content.
Block and Inline Elements
You might notice that some elements behave a little differently in a layout than others. Some elements make content stack, while others let content sit next to each other. What’s that about?
This is an important distinction:
- Block elements stack on top of each other. Each one starts and ends on its own line.
- Inline elements can be used to mark up a few words inside of a block element.
Most elements are block elements. Some common inline tags you might see used:
<em>is used to denote that you’d like to emphasize some text.
<strong>is used to denote that this text is important.
<strong> to denote the semantic meaning of the content. When looking at the markup, you also notice that it’s common for inline elements to be written on the same line of code, nested inside of a parent element.
You may notice that the
<em> tags are italicized and the
<strong> tags are displayed in bold. The browser does this by default. That said, you should still only use these tags to convey meaning. We can change the way elements appear by using CSS - later.
All of the tags we discussed above have some kind of semantic meaning. Assistive technology devices will use them to help people with visual impairments understand the page. Search engines will use them to figure out the structure of your page. You should use semantic HTML tags whenever possible and appropriate.
Some think of
<div> as the flavorless Jello of HTML tags:
- They don’t have any meaning in and of themselves
- They typically don’t come with any built-in styling from the browser.
There is just one important difference between the two:
<div>is a block element.
<span>is an inline element.
We’ll discuss these more in a later lesson when we talk about CSS.
Turn & Talk
- What is the difference between block and inline elements?
<img>elements block or inline?
<a>elements? Explain and/or prove it.
There are a number of HTML elements whose main job is to hold other content - or be a container. The
div is the oldest, probably most well-known and most used container element. It communicates no semantic meaning; which sometimes is what we want.
When we want to convey semantic meaning, we can use one the following containing elements:
Although we commonly refer to these, broadly, as “containers” - to be clear, there is not and HTML element called “container”.
Planning a Layout
In your groups, use the following semantic HTML tags to create the basic structure of a twitter profile on your chart paper. Click the links below to read the docs for each HTML element. (notice they all send you to the MDN docs). Think about which elements are most fitting and how it could be used to create the basic structure of the page.
Recommended starting point: Mark up the hard copy of the image with the elements you would use for each part, then consider the ordering/nesting necessary to achieve that as you write your HTML on the chart paper.