> 1560

author
q9design@squatterz.com

keywords
04-tag-youre-it

location
learn-web-design/04-tag-youre-it/

04 - Tag you're it.  

The pages you see on the web are described to the browser using a markup language called HTML.  The browser understands this language and converts the descriptive language into the page you see.  This descriptive HTML language is relatively simple.  It's kinda amazing how such a simple language can produce such a rich variety of pages... Then again.. it's kinda amazing how such a simple instrument like a piano can produce such a wide variety of songs.

As far as content goes, When we boil things down... a web page is mostly two things... text.. and images.  And of those two things... images are pretty much just images, they don't have much variety... text however can take on several properties and still be the same basic text... properties like color, size, font and underlineing.  Besides basic variation properties.. there's also position.  Elements on a page will need to have some sort of position one to another.  It's a combination of content (the words, and images) and the content's position and attributes that pretty much determine the look of the page.

So.. how?  How do we take all these bits of info.. and direct them to look some way.. be here.. or be there. First we need some way to reference each little bit... the answer... Tags...

Tagging is a way of marking off a certain section of content... a kind-of corralling of sorts, and in doing so providing a "hook" into referring to that collection of content so to suggest to the browser the look and position for that section of content.

Let's look at a simple example...

Say we had two sentences of content...

Hello my name is Bob.    And I'm Larry!

And say we wanted to tag/group each sentence.....

Tags work very similar to how a quoted statement works in English.. "this is a quote" .. it begins with an opening quote.. and ends in a closing quote.. together the quotes mark the entire quote.  It's the same with tags.. there's a opening and closing tag element.. those two sentences, grouped now under two tag sections... would look something like this...

<div>Hello my name Bob.</div> <div>And I'm Larry!</div>

See the opening and closing tags.. <div> opens and </div> closes... notice that closing tags are just like the opening tag but the closing tag includes the forward slash '/'.

Great! Now we have the two sentences separated into two tagged sections.  But grouping in itself doesn't make a webpage... Next we'll want to let the browser know what we want to do with our groups...we want to apply properties and styles.