Inline vs Block Element

Consecutive Inline Elements

An Inline Element will not have a line break after the tag. The song lyric below is a combination of Inline Elements.  Consecutive inline elements will look like a run on sentence.

1. Create a bold HTML tag
2. Create a Span Tag.
3. Create an Image Tag.
4. Create an Italic Tag.
5. Create a Hyperlink.

See the Pen Consecutive Inline Elements by jhoffmanbcc (@jhoffmanbcc) on CodePen.

Consecutive Block Elements

A Block Element will have a line break after each tag.  The Cupcake Awakens movie manuscript below is a combination of Block Elements.  Consecutive Block elements will have a space and a line break.  They will look like a double spaced essay.

1. Create an h6 tag.
2. Create an h2 tag.
3. Create a paragraph tag.
4. Create a div called frosting.
5. Add an h5 tag within the div called frosting.

See the Pen Consecutive Block Elements by jhoffmanbcc (@jhoffmanbcc) on CodePen.

Note:  The example above did not link the div tag to CSS Properties.  Default properties are displayed within the Div tag.

 Inline Element nested within a Block Element + CSS Style Sheet

An Inline Element will make changes within the same line. The SPAN element is an inline element.  Three words below have an inline property.  Three words are given inline CSS Style Property and the style changes are displayed on the given line.

1. Create a Paragraph Tag
2. Create a Span Class
3. Name the Span Class
4. Close the Paragraph Tag
5. Create a CSS Style Sheet
6. Link HTML Span Element to CSS Style Sheet
7. Add CSS Styles

See the Pen Inline + CSS by jhoffmanbcc (@jhoffmanbcc) on CodePen.

Active Learning Question:  Can you nest a Block Element within an Inline Element?