Lesson 15: Span and Div

Overview

In this HTML lesson, we demonstrate how the generic elements, span and div, can be used to alter the style and layout of documents. Span and div are generic inline and block-level elements that can be used to encapsulate text so that it can be styled. To show this, we run through a series of HTML documents with various commonly used layouts and effects.

Inline and Block Elements

Span and div are generic inline and block-level elements. We illustrate this by encapsulting three words with each element to illustrate what they do. Notice that the elements do not change the styling at all. However, the div elements do create blocks, which we illustrate by making the span elements green an the div elements red.

Example1.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    The righteous <span>man</span> who has died will condemn the
    <div>ungodly</div> who are living, and <span>youth</span>
    that is <div>quickly</div> perfected will <span>condemn</span>
    the prolonged old age of the <div>unrighteous</div> man.
  </body>
</html>

Output

Output with Color

Styling with Span

In this example, we encapsulate the four different words in span elements and style each one differently: We make the text green for one, the background yellow for the next one, the text bold for the third one, and the text larger for the last one. Since these are inline elements, we see that the text remains one block.

Example2.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
    <style>
      #id1 {
	    color: lime;
	  }
      #id2 {
	    background-color: yellow;
	  }
      #id3 {
	    font-weight: 900;
	  }
      #id4 {
	    font-size: xx-large;
	  }
    </style>
  </head>
  <body>
We thought that his life was madness
and that his end was without honor.
Why has he been <span id="id1">numbered</span> among the sons of God?
And why is his lot among the saints?
So it was we who strayed from the way of truth,
and the light of <span id="id2">righteousness</span> did not shine on us,
and the sun did not rise upon us.
We took our fill of the paths of <span id="id3">lawlessness</span> and destruction,
and we <span id="id4">journeyed</span> through trackless deserts,
but the way of the Lord we have not known.
What has our arrogance profited us?
And what good has our boasted wealth brought us?
  </body>
</html>

Output

Encapsulation

In this example, we demonstrate that block-level elements dominate whether they are inside or outside an inline element. We do this, by putting a div inside a span and vice versa.

Example3.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    Therefore I will divide him a portion with the great,
    and he shall divide the spoil with the strong;
    because he <span><div>poured</div></span> out his soul to death,
    and was numbered with the <div><span>transgressors;</span></div>
    yet he bore the sin of many,
    and made intercession for the transgressors.
  </body>
</html>

Output

Two Column Documents

In this example, we wrapped a div around each column of text and put them inside a third div that creates the overall page. Each column is pushed to the side to create its column of text.

Example4.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
  <div style="width:420px;">
    <div style="width:200px;float:left;">
	  Sing, O barren one, who did not bear;
      break forth into singing and cry aloud,
      you who have not been in travail!
	  For the children of the desolate one will be more
      than the children of her that is married, says the Lord.
    </div>
    <div style="width:200px;float:right;">
	  Enlarge the place of your tent,
      and let the curtains of your habitations be stretched out;
	  hold not back, lengthen your cords
	  and strengthen your stakes.
    </div>
  </div>
  </body>
</html>

Output

Images in Text

Here, we demonstrate how an image can be put into an article. We added an image at the top of the main div and pushed it to the right. Then we added a margin to make sure that text remains well-spaced, apart from the image

Example5.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
  <div style="width:320px;">
    <img style="float:right;margin-left:5px;" src="TheVirginGrieving_FrancescoHayez_1842.png">
But the righteous live for ever,
and their reward is with the Lord;
the Most High takes care of them.
Therefore they will receive a glorious crown
and a beautiful diadem from the hand of the Lord,
because with his right hand he will cover them,
and with his arm he will shield them.
The Lord will take his zeal as his whole armor,
and will arm all creation to repel his enemies;
he will put on righteousness as a breastplate,
and wear impartial justice as a helmet;
he will take holiness as an invincible shield,
and sharpen stern wrath for a sword,
and creation will join with him to fight against the madmen.
  </div>
  </body>
</html>

Output

Classic Layout Effects

This HTML document employs two classic layout effects. We added a div with enlarged text and pushed this to the right of the column. Then we used a span to enlarge the first letter of the article. These common effects from magazines and Gothic manuscripts.

Example6.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <div style="width:600px;">
      <div style="padding:30px;font-size:150%;float:right;">
        Seek the Lord while he may be found,<br />
        call upon him while he is near;
      </div>
<span style="font-size:250%;">H</span>o, every one who thirsts,
come to the waters;
and he who has no money,
come, buy and eat!
Come, buy wine and milk
without money and without price.
Why do you spend your money for that which is not bread,
and your labor for that which does not satisfy?
Hearken diligently to me, and eat what is good,
and delight yourselves in fatness.
Incline your ear, and come to me;
hear, that your soul may live;
and I will make with you an everlasting covenant,
my steadfast, sure love for David.
Behold, I made him a witness to the peoples,
a leader and commander for the peoples.
Behold, you shall call nations that you know not,
and nations that knew you not shall run to you,
because of the Lord your God, and of the Holy One of Israel,
for he has glorified you.
Seek the Lord while he may be found,
call upon him while he is near;
let the wicked forsake his way,
and the unrighteous man his thoughts;
let him return to the Lord, that he may have mercy on him,
and to our God, for he will abundantly pardon.
For my thoughts are not your thoughts,
neither are your ways my ways, says the Lord.
For as the heavens are higher than the earth,
so are my ways higher than your ways
and my thoughts than your thoughts.
    </div>
  </body>
</html>