Typically, these conversations begin with "I'm so dumb" or "I just can't get this" which reinforces the anxiety people feel when dealing with this or that area of building out a page.
So first up: That is dumb. Look, there just isn't anything about doing any of this that is really what someone might call intuitive. Okay, maybe using <p> instead of <q> to indicate paragraphs, or using <li> instead of <xy> to indicate list items. That's helpful, but you still have to learn it, and not having learned it (so far) does not indicate a deficit in anyone's character.
Specifically (this is what's known as Burying The Lead), we are talking this week about <div> and <span> tags.
<span>
The <span> tag acts like an artificial inline tag. It affects only a subset of a larger block like a paragraph or a heading. Think of <strong> text. You start a paragraph, you motor along for a while and then drop in a <span> tag that assigns a class or an ID or actually contains styling rules that will be in effect for just this next few words or characters of the larger block. Something changes. Maybe the text changes color. Maybe the font is different. At some point, you end it with </span> and things will revert to whatever the formatting in effect was before the <span>.
<div>
The <div> tag is an artificial block-level tag. You will remember from our Introduction to HTML that block-level tags start on new lines, and claim the entire width of their containers. We use the example of a little paragraph with only a few words, that claims the blank space to its right after the period. If it didn't do this, the paragraph that followed would look like a second sentence in the first paragraph. Follow?
So what are <div>'s good for? Well, a lot of things. They are useful for corralling text that has a common purpose, or units that go together on the page. Think of all of your navigation links, for example. You would want them in some kind of a box that might be treated differently than the text above it, below it or around it. Maybe this could be a different background treatment, a border, different fonts or text-sizing or some combination of all of these. In the other example, you would probably want your photo captions to move with your photos, right? So you could wrap your <img> tags and your caption <p> tags together in a <div> and the two would travel together as their own block, no matter how big a monitor someone has or what text size they have selected. You can even constrain the width and/or height of a <div> and where it's placed on the page.
What do we mean by artificial in these examples? Well, the basic idea is that the behavior of a <span> or a <div> is undefined until you decide how to define it.
<div id="navigation"> begins a block-level situation on our page that we have to define for ourselves, probably by assigning one or more styles to the id of "navigation". The browser would encounter this tag and look up the styling information and apply all of those rules on every element of the division until it encounters the </div> tag.
How do I change fonts when I reference keyboard entries? I use a <span> tag that affects just a subset of the block that contains it. <span style="font-family: Courier, monospace; font-weight: bold; font-size: .9em;"> changes the text between the <span> tags from whatever it was to Courier. If Courier isn't found, your browser will use whatever the default system-resident monospaced font is. This text will be bolder than the text around it, and also just slightly smaller. This new styling rule will be in effect until the first </span> tag is encountered.
Constant Lurker will already be wondering why we don't just give this text a class, and assign the styling rules there. That would be the preferred method, allowing for much easier editing, if things go wrong. <span class="typewriter"> would put the class of "typewriter" into effect, and whatever styling rules applied there would be in effect until the </span> tag was encountered.
So that's basically it. Divisions, <div> tags, create block-level page elements where none previously existed. Spans, <span> tags, create inline differences from the surrounding page elements. Play around with them, and you'll get more comfortable with both concepts, I'm sure.
No comments:
Post a Comment