Download Naming HTML

WEB PAGE DESIGN
0.6 Naming Website folders and files
Naming website folders and files
The naming of folders and files is a small detail that can make all the difference
when maintaining a website. Here are a few recommendations for naming folders and files,
including HTML files (webpages), image files, and PDF and Word documents.
Guiding principles
A standard way of naming folders and files – a
naming convention – reduces the time it takes to
review/check updates to the website. It’s easier to
remember and use a single system for naming all folders
and files, rather than different system for each type of
folder or file. A standard for naming folders and files
reduces the likelihood of broken links; accidentally overwriting files, etc.
A person who wants to link to your website often
starts by copying the address of your webpage, and then
pasting it into their webpage code or search engine. A
person who downloads some sort of form from your
website will need to recognize it on their desktop.
Short, but meaningful, file names are quicker to
read, and less likely to be truncated (eliminated by your computer’s file management
system), than long file names.
For folder and file names: move key words to the beginning of the name and
remove joining words such as ‘a’, ‘the’, ‘and’, ‘for’, etc. Using the correct file extension for
the file type also helps a computer to open the file in the right program.
Root Folder (Website Folder)
When you begin building your Website out, you'll start with a Root Folder.
Typically name this the same as the site's URL or title, such as "firstnationalbank.com"; in
our case, due to saving project folders to the Drop File, “firstnationalbank.xxx”.
The Website's home page, "index.html", should be in the root folder. The Web site's CSS document
should also be in the root. The website folder (Root Folder) may have one and only one
"index.html" file to serve as the opening page. Your Homepage should be the index.html
Page.
Your Homepage Should be an index.html Page
When you start building your website, you
should create your main page and name it index.html.
This is true whether you're using a free hosting service
or you have your own domain name. That way, when
people come to your URL, they automatically get your
main page. All other pages will have names like
"about.html" or "contact.html", but your home page
should file should be called "index.html".
1
Recommendations
 Use natural language to name folders and files.
 Type all file and folder names in lowercase.
 Only use the lowercase characters [a-z], the numbers [0-9] and the hyphen
character [-] in folder and file names.
 Use a hyphen/dash between words.
 Use standard file extensions.
1. Use natural language to name folders and files. Natural language is every day,
conversational, and usually descriptive language. If a folder or file name can easily be
read and understood, then it’s probably natural language.
RATIONALE:
 You’ll need to relocate that folder/file/image~depending on the type of computer
you are using it is easier to search for a file named: logo.gif; than remember that you
named the logo: 003366.gif.
 Someone else will need to relocate that folder/file/image~folder and file names that
are too personalized make it harder for someone else to lend a hand when you’re
‘off sick’, or have ‘run out of time to add that press release to the homepage’.
 Folder and file names are the building-blocks for web addresses~using natural
language makes it easier for a person to ‘figure-out‘ the contents of the webpage or
file they are linking to.
 Web traffic reports typically show page statistics by file name~if the file name
describes the contents of the webpage, it’s easier to ‘figure-out’ what the statistics
mean.
 Search engines may use folder and file names to generate search results~if someone
searches for ‘baby gifts’ and you have a webpage named baby-gifts.html, then your
placement on Google might be improved.
2. Type all file and folder names in lowercase.
For example:
The folder containing the About Us pages: /about-us/
The Corporate History page/file: corporate-history.html
A photo of the company mascot: company-mascot.jpg
RATIONALE:
 Web servers can be case sensitive~for example, corporate-history.html (all
lowercase), could be considered by a web server to be a different file than
Corporate-History.html (initial capitals).
2
3. Only use the lowercase characters [a-z], the numbers [0-9] and the hyphen
character [-] in folder and file names. Also, do not use any spaces. Most operating
systems can handle documents with spaces in the file name without a problem, but it's not
a good idea for Web page documents. The problem is that when a URL is displayed it is
usually displayed with an underline. And so many people interpret a space as being the
underscore character instead, and so can't get to your page. Plus, in order to use a space in
a URL or Web file name, many browsers require that that space be encoded - either as a
plus-sign (+) or %20.
For example:
/multiple-word-folder/
multiple-word-file.html
080917-press-release.doc
RATIONALE:
 Non alpha-numeric characters and punctuation, often called ‘special characters’,
may also be used to write HTML code. Using special characters in folder and file
names runs the risk of creating a URL that will be interpreted as an instruction to
the web browser, rather than a file name.
 Operating systems may not allow special characters. Characters such as the
question mark (?) and ampersand (&) cannot be used to name folders or files in
Linux or Windows.
4. Use a hyphen/dash between words. Use a hyphen/dash between words, rather than a
space or underscore.
For example:
2014-application-form.pdf
RATIONALE:
 Web servers have different ways of handling (encoding) the space character.
This is likely to cause problems when someone else is linking to your website. They
might encode the space character incorrectly, resulting in a broken link.
 The underscore character is harder to see when it is underlined, and a person might
need to search for the file name on their computer once they have downloaded it.
Such as: 2014-application-form.pdf vs 2014_application_form.pdf
 Reduce keystrokes. Typing a hyphen is a single key-stroke, whereas the underscore
requires the Shift modifier key.
5. Don't Forget the File Extension. Most HTML editors will add the extension on for you,
but if you're writing your HTML in a text editor like Notepad, you'll need to include it
yourself. You have two choices for HTML files: .html or .htm.
3
6. Use standard file extensions. Standard file extensions are those that are recognized by
most web servers and web browsers.
COMMON WEB FILE TYPES AND EXTENSIONS
File type
Typical use
Extension
HTML document
(webpage)
JPEG
GIF
HTML code / webpage
.html, .htm
photos
graphical images, such as logos, graphs and
charts
PNG
graphical images, such as logos, graphs and
charts (similar, but superior to GIF)
Portable Document
documents, e-books, product catalogues
Format (PDF)
(non-editable)
Word / wordapplication forms, checklists, reports
processing document (editable)
.jpg
.gif
.png
.pdf
.doc
RATIONALE:
 Operating systems often use the file extension to suggest ‘helper’
applications/programs. Depending on the operating system, double-clicking on the
file will open it using a helper application. For example double-clicking a JPEG (file
extension .jpg) will open the file in an image editing program such as Photoshop.
 Web browsers may use the file extension to ‘figure-out’ how to display or delivery
the file. For example, when you download a PDF document (file extension .pdf), it
will be opened by Acrobat Reader.
 Using .html as the file extension, rather than the server-scripting language extension
(such as .asp or .php), makes it more difficult for someone attacking your website to
exploit scripting loop-holes. If a hacker knows the scripting language that has been
used to create a page, they know where to start looking for scripting weaknesses.
4
7. Use prefixes and suffixes to help identify and group related files. In addition to file
extensions, file names can be used to differentiate between similar, related files, and also
help when relocating files.
For example:
 date-based content pages, such as blog postings and media releases, often use the
date as a prefix. A blog entry might use the date (in the example below, the 19th Sept
2013) in the structure of the URL: www.example.blogger.com/2013/09/19/nameof-blog-posting/
 A media release might use the date as a prefix: 130919-product-launch.html
 The large and small (thumbnail) versions of the same photo: wedding-reception.jpg
(large version) or wedding-reception-th.jpg (thumbnail). In the example, the ‘-th’ is
preferable as a suffix, as it will enable you to group the large and thumbnail versions
of the same files through the file manager.
Such as, if the files are ordered alphabetically:
o arrival.jpg
arrival-th.jpg
banquet.jpg
banquet-th.jpg
wedding-reception.jpg
wedding-reception-th.jpg
RATIONALE:
 There are different ways to locate files on your local computer. Files can typically be
ordered: by file type, by date modified, or by file name.
 A file name with a date prefix maintains a chronology, even when the last-modified
dates of two files may not match their publication date.
 Using related file names makes that relationship visible (descriptive names), at the
file level, so you don’t need to open and compare the contents of each file.
8. Additionally, here are a couple of rules specific to XHTML and CSS files:





All CSS files must end with the .css file extension
All XHTML files must end with the .html file extension
Your site's home page should always be named index.html
Do not use any spaces.
Start the file name with a letter, some programming languages give numbers special
notice, and so a file starting with a number might not be treated as a file.
This means that in your file names, folder names, and anchor names there should be:
No SPACES or TABS
No COMMAS or APOSTROPHES
No SLASHES or QUOTES
No # & % + * = @ ~ ^ $
No < > ( ) [ ] { } : ; ? !
No Other Unusual Characters
5
Are these HTML file names OK? If not, why?
1. district123_home_page
2. my homepage.html
3. linc_home.html
4. 1_4_all.html
5. a:b.htm
6. Joe'sReview.html
7. earthquakes.HTML
8. socrates.html
9. buy/sell.html
10. "alpine"skiing.html
11. exercise#1.html
12. costs>10bucks.html
13. editor.htm
14. rnfrst.htm
15. image6.JPEG
16. why_problem_based?.html
6