START A COURSE

The HTML and CSS Blog:

What You Learn in This HTML Lesson

If you’re going to be building web pages, you’ll need to understand how file structures work, so you can actually put the HTML code you’ve written up on the World Wide Web. Thus for one of our first lessons you’ll learn about directory structure and I’ll teach you what the root directory is, what to name your root directory, and why root is important.

What is a Root Directory?

Root Directory Tree

A Root Directory is Like a Tree

Each website is contained in a single folder, called the root folder or root directory. When your website launches, this root directory will be copied onto your server, usually with the same name as your site. Until that day, the root directory will exist on your computer. But either way, it’s just a folder that holds all the parts of your site.

What is Root?

It may be useful to know that most computer programmers think in terms of “root,” not just folks writing HTML. If we think of any file system as a metaphorical tree, the root directory is where all the branches of the file system grow from.

Thus, if you are already accustomed to reading directory names like this:

you may already be familiar with “root” as the C: drive…all other directories are folders within folders within root. In the same way, Joe’s site is also just a series of directories inside a root folder:

Here, magnificientseven.html is a file in a directory called “songs” and songs is a directory in the root folder that contains the whole website (theclash.com).

The root directory is symbolized by a single slash: /

Sudden Clarity Clarence is thinking Every URL on the Internet ...is just a bunch of nested folders on a computer somewhere

Sudden Clarity Clarence has an epiphany: those mysterious urls are no different than the file names on his own computer.

Why Do You Need A Root Directory?

If you are working on local files on your computer it is important to put all the files that make up your site into one folder. (It’s ok to have as many subfolders as you wish inside the root directory). Each website you might work on should have its own root directory.

Without putting every file into one root directory it is very difficult to transfer the files to a server to make the site live without having broken links or missing pictures. If you start with everything in one folder then it is easy to transfer it when finished to your server without any problems. The first step in a new project is simply to create a new root directory. You can name the root directory anything you wish. Most people name it after their website name.

What Should I Name My Root Directory?

Google has a nice remarkably clearly written guidelines to help you optimize your site for the best possible search results. It’s written in plain English and every web developer and writer should read this document.

The Google SEO guidelines doc takes the time to make some good common-sense suggestions about your root directory.

Use meaningful names, not random information or numbers that don’t add any meaning to your web visitor. You can see the folder names in the path in the search results page, so it’s nice if it actually means something. Using the example of a website about an eighties punk band, the search path could look like:

or:

Which Parent Directory Means More?

Look carefully at your content, and create subfolders in your root folder that are clear and meaningful and well organized. Often a good practice is to name folders after the same labels being used for the site-wide navigation. You may want to create folders for different file types, such as video, music, html pages, and images. Be organized.

kittens go in the kitten file

Keep your site organized! [image via OnSugar]

Take care in the naming of your folders: no symbols or spaces allowed. Use numbers and letters and dashes or underscore. Lowercase is probably a good idea for simplicity because file and folder names are case senstive. Otherwise, while you are coding you’ll have to remember whether you capitalized a folder name or not. This can be a nuisance and a silly reason to have errors in your code, so it’s better to keep it simple and go with lowercase if directory names.

Brain Snack

Learn HTML With This Lesson

Set up a root folder on the computer you’re going to be using for your HTML practice lessons. This folder should be named after the name of the site you’re planning to build.

Then set up some folders within that folder for the potential folders you’ll want on that site.

Try to make it clear and organized and be sure to follow best practices on naming (no spaces or symbols, keep it lowercase). Some typical folders include: images, icons, media, audio, plugins, etc. How you organize the folders depends on what kinds of media you’ll be offering on the site.

 

Here is an example of a root folder for a website about the History Of Punk Music.

Here is an example of a root folder for a website about The History Of Punk Music.

The Easiest Way to Learn HTML and CSS
Hi! I'm Diane. I'm an experienced web design teacher in San Francisco. I produce music videos to help new coders learn HTML. I'm dedicated to helping you learn to code, with tons of songs, videos, tutorials and activities. All our tutorials are free and we're adding new lessons every day. Subscribe to get the latest post in your inbox.

HTML Lessons

©2013 Diane Presler. All rights reserved.