What's New Tutorial Index References Contact

Common File Formats

Believe it or not, a website is nothing more than a collection of files, files not unlike your personal pictures, music, and documents. In fact, sometimes including these things! If you can have it on a computer, you can put it on a website.

Alongside these, however, are file formats meant specifically for building your site. Some files hold the page itself, along with the text you read. Others describe what the page should look like. Others still, you'll never see on the site itself, but help search engines and browsers understand how it all comes together. A very simple site may only need your Web pages and nothing else. On the other hand, a complex site will need a variety of scripts and pages and styling to create what you see in your browser.

In any event, as you start to build your site and accumulate files, it's important you have some idea of what they all do and, if you're creating your own, how to name them so as to not confuse the computer. You don't need to know how to write each one, necessarily, but this page should give you an overview on their purpose.

HTML Documents (.html)

HTML5 shield logo

Naturally, your Web pages will be stored and written in HTML files, which have an .html (or .HTM, for very old Windows machines) extension. Any time you add a new page to your site, it should be saved with that extension.

Stylesheets (.css)

CSS3 shield logo

The visual information that tells a browser how a website should look (known as its styling) come in stylesheets with a .css extension. Beneficially, storing styling in files separately from your Web pages allows an infinite amount of pages to reuse the same styling information, keeping the look of your site consistent across all of those pages.

Scripts (.js)

WHATWG JavaScript logo

Any time a website is interactive, whether by reloading posts or comments, tracking users, or just plain being flashy, you can bet JavaScript is behind it. JavaScript is an extremely popular programming language that acts as the third pillar of sorts to Web design, enabling the modern Web as we know it. JavaScript is often stored in script files with the .js extension. Much like stylesheets, this allows scripts to be reused among many pages.

XML Documents (.xml)

XML document icon

XML is the more general-purpose cousin of HTML. It's a markup language for documents that aren't necessary Web pages. Not every site has them, but ones that do often use them for data storage that both humans and computers can understand. A good example of XML in use is in sitemaps, a file a search engine like Google will use to make sure every page on your site is indexed and searchable.

Text Files (.txt)

Text document icon

Finally, the simplest format, text files contain nothing more than plain text meant to be read by humans. The benefit to storing human-readable text in plain text files is their size (often kilobytes), their speed in loading, and their portability between new, old, and unfamiliar computers. A .doc file from Microsoft Word 6 might not be readable much anywhere these days, but a text file from 1995 will be the same as a text file from 2015: simply text you can load into just about any text editor or word processor.

Text files are good for documentation for downloads, things such as readme files. Their downside, of course, is the lack of formatting, but you can often use symbols to simulate things such as horizontal rules. It's all up to you. There's no strict format to a text file.

Summary:

  1. Websites, simply put, are built of files, all linked together and working together. These files aren't unlike the ones you use day to day—documents, music, photos, and so on.
  2. Some file formats have special meaning when you're building a site, and you should be on the lookout for them.
    • Your site's pages themselves are stores as HTML documents, with a .html extension.
    • Stylesheets, or the visual information for how your site should look, are stored with a .css extension. Many pages can use the same stylesheet, making things more consistent and easier on you.
    • JavaScript code comes in scripts stored with the .js extension. These too can be shared among many pages at once.
    • XML documents aren't as common as HTML documents, but you'll see them occasionally for data storage. These come with a .xml extension.
    • Finally, plain text meant to be read by humans often comes as text files with a .txt extension. These are fast, near universally supported between many types of computers, small, but can't store any formatting. You'll often see them used for documentation with downloads.

Further reading