Skip to main content

learn html for intermediate : span and div







HTML is all about applying meaning to content. Whereas most HTML tags apply meaning (pmakes a paragraph, h1 makes a heading etc.), the span and div tags apply no meaning at all. This might sound about as useful as
a foam hammer but they are actually used quite extensively in conjunction with CSS.
They are used to group together a chunk of HTML and hook some information onto that chunk, most commonly with the attributesclass and id to associate the element with aclass or id CSS selector.
The difference between span and div is that aspan element is in-line and usually used for a small chunk of HTML inside a line (such as inside a paragraph) whereas a div (division) element isblock-line (which is basically equivalent to having a line-break before and after it) and used to group larger chunks of code.

<div id="scissors">
    <p>This is <span class="paper">crazy</span></p>
</div>
div and especially span shouldn’t actually be used that often. Whenever there is a sensible alternative that should be used instead. For example, if you want to emphasize the word “crazy” and the class “paper” is adding italics for visual emphasis, then, for richer, more meaningful content, the code might look like this:

<div id="scissors">
    <p>This is <em class="paper">crazy</em></p>
</div>
If you haven’t got a clue about classes and ID’s yet, don’t worry, they’re all explained in the CSS Intermediate Tutorial. All you need to remember is that span and div are “meaningless” tags.
Labels:

Popular posts from this blog

learn html for intermediate : Definition Lists

The HTML Beginner Tutorial looked at unordered lists and ordered lists , but, much like Peter Cushing’s Doctor Who,  definition lists  are quite often forgotten. This is maybe because they are much more specific than ordered and unordered lists and therefore less useful, generally, but where there is a list of terms and descriptions (such as a glossary), a definition list is your go-to-element. dl  gets the ball rolling, similar to the  ul  and  ol elements, establishing the list. Rather than containing  li  elements, though, definition lists have  dt  elements, which are the  definition terms , followed by  dd  elements, which are definition descriptions  associated to the  dt elements. There doesn’t have to be one  dt  followed by one dd , there can be any number of either. For example, if there are a number of words that have the same meaning, there might be a number of  dt ’s followed by...
Read more

learn advanced html Tables: Columns, Headers, and Footers

The Columns Strike Back Table rows tend to make table columns look rather stupid. They do all the work, as the table is built row by row, leaving the columns feeling quite rejected. Luckily for those eager columns though, the colgroup  and  col  tags have come to their rescue. These tags allow you to define the table columns and style them as desired, which is particularly useful if you want certain columns aligned or colored differently, as, without this, you would need to target individual cells.
Read more

learn advanced html Embedded Content: Video, Audio, and Canvas

The simplest embedded (foreign) content is an image, applied to a web page with the  img element. In the olden days,  object , along with various plugins and proprietary devil dust, was used to bash and smash video and audio into submission. Although not without its (compatibility) problems, there is now a much better method for using various types of media in web pages.
Read more