HTML - Planning a Layout

Learning Goals

  • Explain the difference between block and inline elements
  • Wireframe a complex layout utilzing semantic HTML tags

Vocabulary

  • Block A block-level element occupies the entire width of its parent element (container), thereby creating a “block.”
  • Inline An 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 tags behave a little differently in a layout than others. Some tags 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 in the wild:

  • <em> is used to denote that you’d like to emphasize some text.
  • <strong> is used to denote that this text is important.

We use <em> and <strong> to denote the semantic meaning of the content.

See the Pen Inline v Block Elements by Turing School (@turing-school) on CodePen.

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.

<span> and <div>

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.

Sometimes, however, you don’t want a tag to have any meaning. Typically, this is when you just want to target a certain portion of the page with CSS or JavaScript and none of the semantic tags really apply.

Some think of <span> and <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?
  • Are <img> elements block or inline? <a> elements? Explain and/or prove it.

Layout Structure

As front-end developers, you’ll use HTML to build layouts given to you by a designer or client. It’s an interesting challenge that can seem overly simple, but how you structure your HTML can have a very real impact in how you have to write your CSS and even how you use Javascript. Remember, HTML is like the frame of a house – it has to be stable and well thought through for everything to be stable!

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.

Twitter Profile


Additional Resources

Lesson Search Results

Showing top 10 results