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.
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.
<body> <div> <!-- 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 knowledge!!!</p> </div> <span>✶✶✶SPAN✶✶✶</span> </body>
<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: