HTML SPAN Basics
By Stephen Bucaro
Whereas a <div> is a block element which defines a vertical section of a
webpage or parent element, a <span> is an in-line element that is rendered during
the line-by-line parsing of the html code for the webpage. Without styles a span
provides no visible change. A span does allow you to group text so that you can
style it with CSS, or manipulate it with JavaScript.
Shown below is how a span might appear:
We hold these truths to be self-evident, that all men are created equal, that
they are endowed by their Creator with certain unalienable Rights, that among
these are Life, Liberty and the pursuit of Happiness.
That to secure these rights, Governments are instituted among Men, deriving their
just powers from the consent of the governed, That whenever any Form of
Government becomes destructive of these ends, it is the Right of the People to
alter or to abolish it, and to institute new Government, laying its foundation on
such principles and organizing its powers in such form, as to them shall seem most
likely to effect their Safety and Happiness.
Shown below is the code for the section with the span:
... Liberty and <span style="border:solid 1px;">the pursuit of Happiness</span>. That to secure ...
Note that in order to make the span visible I had to use some style code, giving
the span a border.
As an aside, you'll probably recognize this as a section form the American
Declaration of Independence. The span is where Thomas Jefferson, the author of
the document, replaced the third term of John Locke's trinity, "life, liberty, and property"
with "the pursuit of Happiness". Why would Jefferson do that? Well, you can't confiscate
peoples property when they don't pay taxes if property is their constitutional right.
More HTML Code:
• Providing Alternate and Title Text for an Image
• Divide a Table Into Head (thead), Body (tbody), and Footer (tfoot) Sections
• HTML Text Tags Basics
• Radio Button Basics
• Webpage DOCTYPE Declarations Explained
• Checkbox Basics
• Web Color Names Table
• HTML Linking Basics
• HTML title Tag
• Add an Image to a Web Page
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
Follow @Stephen Bucaro
General Web Design
