Harvard Extension School, Fall 2018
CSCI E-12 Fundamentals of Web Site Development

## span element

The `span` element is a cousin to the `div` element -- in that it is used primarily for styling purposes, except that it is geared towards "inline" content.

Example 2.7 - span element - Example 2.7 (Without Styles) | <div class="citation"><span class="author">Berners‐Lee, Tim</span>. <span class="title">We Need a Magna Carta for the Internet</span><span class="journal">New Perspectives Quarterly</span> 31.3 (2014): 39-41. Web.<br/><a href="https://harvard.instructure.com/courses/8246/files/folder/readings?preview=1564950" title="We Need a Magna Carta for the Internet by Tim Berners-Lee">View PDF</a></div>.citation .journal { font-style: italic; } .citation span.title::before { content: '"';} .citation span.title::after { content: '." ';}

- Markup
- Style
- Display

    <div class="citation"><span class="author">Berners‐Lee, Tim</span>.<span class="title">We Need a Magna Carta for the Internet</span><span class="journal">New Perspectives Quarterly</span>31.3 (2014): 39-41. Web.<br/><a href="https://harvard.instructure.com/courses/8246/files/folder/readings?preview=1564950" title="We Need a Magna Carta for the Internet by Tim Berners-Lee">View PDF</a></div>

In `style` element (`<style type="text/css">`) within `head` element:

    .citation .journal { font-style: italic; }
    .citation span.title::before { content: '"';}
    .citation span.title::after { content: '." ';}

Berners‐Lee, Tim. We Need a Magna Carta for the Internet New Perspectives Quarterly 31.3 (2014): 39-41. Web.
View PDF

See: Inline elements and Block elements from MDN (Mozilla Developer Network)

Copyright © David Heitmeyer