Intro to HTML: Span Element

Quick Copy Boxes

Spans are Inline Elements. They are usually used to change the formating on part of a larger element. For example, you might use a span to change the color of one word in a paragraph.

At the bottom of this page there is a code editor pre-loaded with the lesson's code.

Inline Elements

Spans, <a> links and images are examples of Inline Elements. This means a couple of things things:
✶ No line breaks are automatically inserted.
✶ The element only takes up as much space as it needs to contain it's content.

Span Example

  <!-- Paragraph-->
  <p>This is an <span>HTML paragraph</span>. Paragraphs are really rad<
  because they can contain lots of words.  Words commuicate ideas.  Yay to

<body> - Body Element
<div></div> - Div Element
<p></p> - Paragraph Element
<span></span> - Span Elements

Now let's pretend our CSS code does the following:
✶ BODY backgrounds are BLUE
✶ DIV backgrounds are GREEN
✶ PARAGRAPH backgrounds are YELLOW
✶ SPAN backgrounds are RED
This is how the example would display:

Now, play with the code in the code editor box below.