Tag Archives: html

Why Do We Use Unordered Lists for Navigation?

unorderedlists
The question in the title of today’s article has been bugging me for several years. Why, out of all the tags we could potentially use to style our site’s navigation, have modern designers chosen the unordered list?

At First Blush: Web-Elitism and Table Layouts All Over Again?

Coming from my background in hand-coding, when tables were still in vogue for layout building and lists were used for–well, listing things in one’s content–my confusion is warranted. I caught so much flack as a newbie designer for sticking with table format layouts, because, in the words of my critics, “tables are meant for tabular data only.”

So why use a list format for a navigation bar that is kinda sorta but not really a list?  See the following:

<ul class=”nav”><li><a href=”page1.html”>Page 1</a></li>

<li><a href=”page2.html”>Page 2</a></li>

<li><a href=”page3.html”>Page 3</a></li></ul>

Sure, a site’s navigation IS a list of links, but the unordered list used in most navigation schemes these days doesn’t end up LOOKING like a regular bulleted list. Instead, it gets twisted and reshaped with CSS magic into whatever configuration is needed, whether that’s a vertical list of links without bullets or whether it’s a long horizontal bar across the top of the page.  That magical CSS class creates all the beauty out of what otherwise looks like slightly bloated code, at least to my eye.

As I read article after article about using and styling unordered links, I kept thinking, “Isn’t that what we table-layout-makers were doing with tables back in the early 2000s? Isn’t this just another creative use of an HTML tag?” I found myself wondering if the unordered list would eventually go the way of the HTML table as a “deprecated” way of designing, and if those of us who had adopted it would be the butt of elitist jokes in 5 to 10 years. (Y’all who don’t think web-elitism exists–trust me, it does. People get snarky and condescending when they think they code better than you.)

The Answer to My Question: Yes AND No

But, as I’ve studied this problem a bit more, I’ve realized something. Yes, unordered lists seem like a little bit of excess code for what amounts to “a list that doesn’t look like a list onscreen.” But they actually solve a couple of problems, one of which reared its head in one of my recent designs.

My Old Navigation Style: “Display: Block” All the Way

I had organized my navigation into a div called “sidebar,” with the following code to handle all my navigation links:

#sidebar a {
display: block;
font-size: 20px;
font-weight: bold;
text-decoration: none;
border-bottom: 1px solid #AAAAAA;
padding: 10px 5px 10px 5px;}

#sidebar a:hover {
border-bottom: 1px solid #FFFFFF;
text-decoration: none;}

The corresponding HTML code for the navigation looked very simple, like this:

<div id=”sidebar”>

<a href=”about.php”>About</a>

<a href=”projects.php”>Projects</a>

<a href=”archives.php”>Archives</a>

</div>

The Problem: ALL the Links Were Affected

This was all well and good, until I decided to put more content in the sidebar–including some links that were part of paragraphs rather than navigation. You can probably guess what happened; I refreshed the page, and found that all my links in my sidebar were displaying proudly in block format, even if I had intended them to be contained in context with the paragraph around them.

So, what to do? I thought about creating another div to house my navigation links, styling it separately…but then, I realized I had the perfect tool for a vertical list of links already in my HTML toolbox. All I needed to do was to add unordered list code and give the unordered list a CSS ID. I dragged my feet about it a bit, but finally decided the list code was better than potentially causing layout havoc with another div thrown into the mix.

The Simple but Effective Fix

Thus, I ended up with this code instead:

#navlinks a {
font-size: 20px;
font-weight: bold;
text-decoration: none;
border-bottom: 1px solid #AAAAAA;
padding: 10px 5px 10px 5px;}

#navlinks a:hover {
border-bottom: #1px solid #FFFFFF;
text-decoration: none;}

The corresponding HTML code looked like this:

<div id=”sidebar”>

<p class=”sub”>A Headline</p>

<p>some text here with <a href=”index.html”>a link</a></p>

<ul id=”navlinks”>

<li><a href=”about.php”>About</a></li>

<li><a href=”projects.php”>Projects</a></li>

<li><a href=”archives.php”>Archives</a></li>

</ul>

</div>

Why This Change Helped

Adding the unordered list tags to my navigation helped me out in two ways:

  1. Eliminated the need for “display: block;” in my CSS, because the natural behavior of lists is to display each item on a separate line;
  2. Created a specific ID for just my navigation links, so that the other links in the sidebar would be unfettered by navigation styling

Having specifically targeted code like this, even if it results in typing <ul> and <li> about a thousand times more than you’d like, actually makes it easier for you to design. With your navigation self-contained in a little list “box” all its own, you can specify its styles to your heart’s content and not worry about those style choices overflowing and causing havoc in the larger divided layer.

This is a great habit to pick up–only applying CSS styling to the elements you absolutely need to style, rather than cramming all your style rules in one or two overarching divided layers. It organizes your code better, makes it easier to change small formatting issues later, AND can save you from accidentally messing up the whole page trying to affect one small section.

Summary

Putting navigation in unordered list format may seem esoteric at first, but it’s actually handy. You might not actually need a separate div to cordon off your navigation, necessarily; all you might need is <ul><li></li></ul>!

Glasses Off: 4 Excellent Web Development Sites

Given that I generally blunder around a lot when it comes to backend coding, I often need to refer to others’ web development wisdom–not only to fix my own problems, but to write helpful articles of my own on these Monday posts. Here are four sites I find myself relying on for all this help and more:

Sitepoint
From HTML all the way to Ruby on Rails, and every major web programming language in between…this site is invaluable to me!

Tizag.com
This site’s MySQL and PHP tutorials are some of the most common-sense tuts I’ve ever read (and that’s a huge compliment!).

Nettuts
Whether you’re developing ASP.NET, HTML, Javascript, CSS, Python, or a host of other languages, Nettuts probably has a tutorial section for you!

WebProCafe
This forum provides a place for all us developers and designers to share ideas, ask questions, and offer help.

My Fair HTML List

CSS rarely flexes its styling muscles stronger than in the display of ordered and unordered lists. HTML outputs basic-looking lists like these…

basic_ol basic_ul

…but CSS can change them into great-looking lists like these:

opencircle_list squarefont_list romanborders_list
alphabottomborder_list gifbackground_list

But exactly how CSS can style these lists can be pretty obscure to a beginning webmaster (or even old hats like me). Here’s how to turn your plain ol’ lists into something lovely, sleek, and even spectacular. (Read to the end if you want to know how to create these five styled lists!)

Step 1: Label Your Lists

Before you can begin styling any specific list, you have to give it a name. CSS provides two ways to name your lists: classes and IDs. (CSS classes can be used over and over, but IDs can only be used one time on each page.)

CSS classes look like this: .list1 {styling rules go here}
CSS IDs look like this: #list1 {styling rules go here}

You can label your list anything you want to, as long as you remember to link your CSS style rules with your list, like so:

<ul id=”list1″>

<ul class=”list1″>

Step 2: Select Your List Styles

Once you’ve labeled your list, you can begin putting in style rules to make it fit your design. CSS has three style rules that pertain specifically to list styling:

  • list-style-type: Changes the bullet point out beside each list item to look a little different. (See the solid disc beside this list item?)
  • list-style-position: Changes whether the bullet point is included with the list item or hangs out a little farther beside it. (The “hangs out” position is the default)
  • list-style-image: Specifies a custom image as your bullet point image. (You have to make or find the bullet point image yourself)

List-Style-Type

To change the bullet point image with list-style-type, you simply write a line of CSS that looks like this:

#list1 {list-style-type: circle;}

If you don’t want an open circle as your bullet point, you can replace the word “circle” in the above example with another word from the following list. (Note: numbers will not work with unordered [un-numbered] lists, and likewise, bullet point images will not work with ordered lists.)

List-Style-Type Bullet Point Types

For Unordered Lists For Ordered Lists
disc (filled-in circle)
circle (open circle)
square (filled-in square)
decimal (.1, .2, etc.)
decimal-leading-zero (0.1, 0.2, etc.)
lower-roman (i, ii, iii, etc.)
upper-roman (I, II, III, etc.)
lower-greek (classical Greek numerals)
lower-alpha/lower-latin (a, b, c, etc.)
upper-alpha/upper-latin (A, B, C, etc.)
georgian (Georgian numerals)
armenian (Armenian numerals)

Also, if you don’t want a bullet point at all, you can put “list-style-type: none;” into your CSS instead.

List-Style-Position

To affect whether the bullet point displays closer to the list item than the default, write a line of CSS like this:

#list1 {list-style-position: inside;}

(If you want the bullet point to appear a little farther away from the list item, you can either type “list-style-position: outside;” or you can just leave out the “list-style-position” stuff altogether.)

List-Style-Image

To select a custom image for your bullet points, just add a line of CSS which looks like this:

#list1 {list-style-image: url(‘IMAGE_FILENAME.jpg’);}

Replace the “IMAGE_FILENAME.jpg” with the name of your custom image, and you’re in business!

Step 3: Write Your List Style Rules

Once you’ve figured out how you want your list styled, you can combine all these various properties into one CSS rule, like so:

#list1 {list-style-type: square; list-style-position: inside; list-style-image: url(‘myimage.gif’);}

You can also combine all the “list-style” things into one shorthand property, like so:

#list1 {list-style: square inside url(‘myimage.gif’);}

When writing the shorthand, make sure that the “list-style-image” choice comes first, then “list-style-position,” and last, “list-style-image.”

Step 4: Make It Spiffy

Thankfully, you don’t have to just write “list style” rules. You can also change the list’s background color, font size, font family, borders, and all sorts of things, just as you can style other parts of your HTML code. Not only that, but you can style each list item, too! Check out the following examples to see how different padding, colors, borders, etc. affect your list’s look:

opencircle_list
#list1 {list-style-type: circle;
width: 150px;}

#list1 li {padding: 0px;
margin: 0px;}

squarefont_list
#list2 {list-style-type: square;
width: 150px;
font-family: “Verdana”, sans-serif;
font-size: 15px;}

#list2 li {padding: 5px;
margin: 0px;}

romanborders_list
#list3 {list-style-type: upper-roman;
width: 150px;
font-family: “Garamond”, serif;
font-size: 18px;}

#list3 li {border: 1px solid #336699;
margin: 5px;
padding-left: 4px;}

alphabottomborder_list
#list4 {list-style-type: lower-alpha;
width: 150px;
font-family: “Bell MT”, serif;}

#list4 li {border-bottom: 1px dotted #FF00FF;}

gifbackground_list
#list5 {list-style-image: url(‘flashy.gif’);
width: 150px;
background-color: #000000;
font-family: “Chixat 8”;
font-size: 10px;}

#list5 li {background-color: #000000;
color: #FFFFFF;
margin: 3px;
padding-top: 2px;}

(Note: the screenshot of the last list doesn’t show the animated GIF bullet point in action, so here it is: flashy)

Summary

Lists, like any other element of an HTML page, can be styled to perfection with just a few bits of CSS. Experiment with your own list styles and see what you can create!

The 5 Web Languages You Need to Know

Much like learning a language is for communicating with other humans, creating websites from scratch is all about communicating your design and function intentions to a browser or Web server. And to be a good web developer in this day and age, you need to be multi-lingual–speaking several different programming languages to be able to design better, sleeker and more functional websites.

But just Googling “web programming languages” or something similar brings up a whole host of options to learn, and it can be overwhelming for the beginning user. Where do you begin? Do you start learning MySQL, or Ruby on Rails? Should you take a course in HTML, or is Python the next big thing?

Thankfully, it doesn’t have to be this confusing. In this post I have culled the 5 most important Web programming languages to know–the ones which make up about 90% of most modern websites. If you’re just beginning to learn how to build websites, this article will serve as a road map.

HTML: The Skeleton of the Web

HTML is the strong, silent (and mostly invisible) foundational structure which provides you a page to look at (such as the one you’re reading from right now). It provides line breaks, breaks text up into paragraph structures, formats tables, divides page content into layers…pretty much anything that makes up your page’s most basic structure is what HTML handles best.

This should be your first Web language to learn, since so many of the other programming languages depend on it to function. Here are some excellent resources to start learning:

HTML Tutorial @ W3Schools.com
HTMLGoodies.com
QuackIt.com’s HTML Resources

CSS: The Magic Styling Wand of the Web

Perfectly complementing HTML’s invisible strength, CSS takes HTML’s structure and gives it style. From giving your text just the right font choice and color to aligning each of your divided layers pixel-perfect on the screen, CSS can transform any boring old text and images into a lovely yet still functional page. There are plenty of simple CSS tricks that translate into downright amazing page effects–things you would never expect to accomplish with just a few lines of code!

CSS should be your second language to learn, as it builds on HTML knowledge while extending HTML’s capabilities of displaying Web content properly. Here are some resources to study CSS (both how it works and what it looks like when done right):

CSS Tutorial @ W3Schools.com
CSSZenGarden.com
Sitepoint.com’s CSS Reference

Javascript/jQuery: The Swiss Army Knife of the Web

Whatever special function you want your site to perform, whether it’s something to make your site display differently, something to change how your navigation menus open, etc., there’s likely a snippet of Javascript that can make it happen. Just putting a bit of carefully-chosen or carefully-crafted Javascript code into the head part of your HTML document can make a big difference! (By the way, the only real difference between Javascript and jQuery is that you don’t have to have a big library of Javascript code installed on your site for jQuery to work–all you need is a link to the library of code that’s already established on the Internet.)

Javascript should be your third language to learn, as it bridges the gap between Web languages that more about site display (“front-end development”) and Web languages that are more about site function (“back-end development”). Here are a few good websites to start studying Javascript:

Javascript Tutorial @ W3Schools.com
Codecademy’s Javascript Lessons
JavascriptKit.com

PHP: The Workhorse of the Web

Many of the websites you see today, like this one, are made possible with PHP–it’s literally everywhere, even though none of its code appears when you click “View Source.” The reason its code does not appear is because PHP is a server-side language, meaning that everything it does is tied to having a conversation with the server (that’s the thing that holds all your web pages, images, etc.).

PHP acts as a go-between for your browser (Internet Explorer, Mozilla Firefox, Google Chrome, or similar programs) and the server, asking questions of the server and delivering appropriate responses back to the browser in the form of a displayed page. (Ever searched for anything using a site’s search box? PHP was likely powering the search!)

PHP should be your fourth language to learn, since it is the most widely used of all the server-side languages, yet still deals with outputting data in HTML/CSS forms. Here are some excellent resources to help you learn PHP:

PHP Tutorial @ W3Schools.com
Tizag.com’s PHP Tutorial
PHP @ HomeAndLearn

MySQL: The Librarian of the Web

If you’ve got data to store, search through, and access, MySQL can handle it quite ably–it’s a programming language built to make, search, and access online databases on a server. The only trouble is, it doesn’t actually display the data on its own. So, quite often you’ll see PHP and MySQL being taught side-by-side; PHP code can “talk” to the MySQL database and retrieve results.

Still, you need to know how MySQL works in order to build a PHP script that can communicate with it. (Believe me, if you don’t know how MySQL works, you’re going to be VERY frustrated trying to build a successful PHP code to work with a MySQL database!) Here are a few sites to start your MySQL learning:

SQL Tutorial @ W3Schools.com
Tizag.com’s MySQL Tutorial
MySQLTutorial.org

(Fun fact: Most formally-trained programmers pronounce MySQL as “my sequel.” I, however, being relatively untrained, mentally pronounce it “my skwul” despite trying to train myself otherwise. LOL!)

Summary

These five Web programming languages may look scary, but if you take them one language at a time, mastering each before you move on, you will find that things become much easier to understand. And, once you understand these five, you will have a great basis of knowledge on which to build even further programming know-how. I hope this little “road map” serves you well!

Commenting Your Code: A Helpful Habit to Start

“Wait, what? You can put things in your code that are not read by the browser? Why would anybody want to do that?”

When I first started learning how to design web pages, I thought the same thing about using comments, until I started going back through my old layouts to rework and revamp old code for new designs. Boy, had I written myself some head-scratchers. “What in the world is THIS div even doing in the code? It doesn’t have anything in it!” “Huh? What’s this weird padding and margin thing?”

At the time I drafted the older bits of code, I knew exactly what I was doing with the code–I knew exactly what purpose each div, margin, spacer image, and line break was for. But going back to that old code after three or four years? Let’s just say I spent a lot longer than I should have trying to decipher my past self’s reasoning. LOL!

So, to avoid this kind of bafflement every time I go back to an old design, I have resolved to start using comments in my HTML, CSS, PHP, and Javascript codes.

Why Use Comments in Your Code?

As I’ve already said, comments are a great way to remind yourself of why you coded a particular section the way you did. (For instance, reminding yourself that a certain div or code hack is only in place to make IE behave itself. There are plenty of instances of that! LOL!)

But comments aren’t just useful for leaving yourself reminders about code–they’re also good ways to section your code, so that you don’t have to hunt through thousands of lines just to find the one thing you want to fix.

For example, an HTML page sectioned out might look like this:


<!–NAVIGATION–>
<div id=”nav”>

</div>
<!–CONTENT–>
<div id=”content”>

</div>

And a comment-sectioned CSS file might look like this:

/* BODY STYLES */
body {color: #FFFFFF;
background-color: #000000;
…}

/* LINK STYLES */
a:link {color: #FF0000; text-decoration: none;}

Both usages are sanity-preserving (and as web developers, we all know that sanity sometimes is in short supply, LOL). Comments make it possible for you to leave reminders, section headers, and even silly little in-progress notes to yourself to make your job a little more fun.

How to Code a Comment, in Four Different Web Languages

Each Web programming language has its own comment tag style, a way to include things that are only for the web developer to see.

HTML Comments

When you want to start an HTML comment, you place “” after. Like the following:

<!–Woo this is a comment–>

Comments in HTML can be placed anywhere within the <body> tag; the browser will just ignore them.

CSS Comments

When you want to comment in your CSS code, just put a “/*” before you start the comment, and put a “*/” at the end, like this:

/* Yay I have some CSS styles, woot */

You can place CSS comments anywhere in your CSS, whether your CSS is in a separate file or in the <head> section of your page.

PHP Comments

There are two kinds of PHP comment styles–one for comments that only take up a single line in your PHP document, and another for comments that take up multiple lines in the document. (In PHP, lines REALLY matter, so if you’re not sure if your comment will only take up one line of code, best to use the multi-line comment.

Single-Line Comment
To put in a single-line comment, just put “//” or “#” before you begin your comment. Everything to the right of those double slashes or hash symbol will be commented out as long as it’s on the same line as the slashes or hash symbol. Like so:

<?php echo “Whee!”; // a simple little echo statement
# why did I just write Whee? xD
?>

Multi-Line Comment
If your comment is going to go for multiple lines, you’ll instead put in “/*” before you begin your comment, and “*/” after you’ve finished your comment. (Looks identical to CSS!) Here’s an example:

<?php echo “Whee!”;
/* Seriously, why did I just write Whee?  I have no idea.
Possibly because it’s 2 AM and I’ve been staring at this code for hours? LOL */
?>

Javascript Comments

Like PHP, Javascript has two different styles of commenting, depending on if the comment is on a single line or multiple lines.

Single-Line Comment
Doing a single-line comment in Javascript is identical to doing it in PHP–you use “//” before your comment, and everything out to the right of those two slashes will be commented out. Example:

<script type=”text/javascript”>
<!–
document.write(“Hello!”);
//I need to add some more stuff here!
//–>
</script>

Multi-Line Comment
Again, identical to PHP (and CSS), Javascript uses “/* at the beginning and “*/” at the end of its multi-line comments. Makes it pretty simple to remember if you code in multiple languages!

<script type=”text/javascript”>
<!–
document.write(“Hello!”);
/* Here I’ll put in a few more document.write things, as well as some preloaders, but I need to be careful! */
//–>
</script>

References and Further Reading

Here are the sites I used to research this article; they are both great sites to help you learn more about web development of all sorts.

HTML Comments @ W3Schools.com
CSS Comments @ W3Schools.com
PHP Comments @ Tizag.com
Javascript Comments @ Tizag.com