Frequent mistakes in site layout. File names in the project

Частые ошибки при HTML верстке сайтов. Имена файлов в проекте

A few simple rules, following which, you will avoid a lot of problems with links, images, pages, scripts and styles within the project.

You can often find files with names like Image ФОТО forest.JPEG… By inserting such an image on the site, you can make a dozen mistakes, as a result of which the image will not be displayed. I have listed all possible errors in this file name. Some of the characters are typed in capital letters. There are spaces in the file name. The file extension is in all caps. In addition, I brought the extension JPEG consisting of 4 letters when it exists and is just jpg of 3 letters.

Inserting such a picture on the site, you can make a mistake with capital letters, skip a space, specify the extension in lowercase and non-uppercase, and eventually confuse JPEG and jpg

Carefully read all the rules below and apply them in every project when coding your site.

File naming rules in a project

These rules apply to all files in the project. Without exception. To HTML pages, images, files with styles and scripts, and even to folders (directories, directories).

Allowed Characters

The file name can contain the following characters: Latin, numbers, symbols - and _

Latin only. (Hardcore only ;-))

The file name cannot contain Cyrillic (Russian letters). Latin and / or Arabic numerals only.

Wrong: фото.jpg
Right: photo.jpg

Wrong: котик003.jpg
Right: kotik003.jpg

Hyphens instead of spaces

Use a hyphen instead of spaces - or underscore _

Wrong: photo forest.jpg
Right: photo-forest.jpg or photo_forest.jpg

Wrong: favicon (5).ico
Right: favicon.ico

Wrong: photo page.html
Right: photo-page.html

Lowercase characters only

The file name and its extension must be in lowercase letters. No capital letters.

Wrong: IMAGE.jpg image.JPG
Right: image.jpg

Use these rules, remember them, embed them on the subconscious level, create new neural connections, write them down on the subcortex and you will avoid a lot of problems.


In a large project, you may need to rename a large number of files, say images. In this case, you can use the function of mass renaming of files, which is available in file managers, for example, in FreeCommander.

This article was written for the participants of the course on the creation and HTML layout of sites, the online school

Leave a Reply

Your email address will not be published.