Intro to HTML: Span Element
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:
Now, play with the code in the code editor box below.