In HTML, there are a few nuances that we must remember when developing websites.

Relative vs. Absolute URL Paths

There is two types of file paths: absolute and relative.

Absolute URL

Absolute file paths start from the highest level of the system you are working with. Online this is http:// followed by the domain i.e. wikipedia.org followed by the rest of the URL i.e. media/jpg/sample.jpg . All together "http://wikipedia.org/media/jpg/sample.jpg

Relative URL

Relative file paths start from the file you are writing. The webpage you are writing is the top of the "file tree". Everything that is in the same folder as the file you are writing is called just by its name i.e. "sample.jpg" If the file is in a folder below "media/sample.jpg". or "media/jpg/sample.jpg" if the file is in the jpg folder in the media folder. To go up a level you use ".../" followed by the file name. You can go up multiple levels using ".../.../" Remember relative paths start from the file you are writing the path for.

Sidenote about Paths

Don't worry about paths too much. If you put all the files you are using in one folder, you can just call them by name. In addition remember that you can only use HTML URLs to access two locations, the Internet and the machine your website is stored on. You cannot access your user's machine using HTML URLs.

When should I use absolute?

The only time absolute paths should be used is when are using content from other websites such as wikipedia, google, youtube, etc. Never use absolute paths for local files! As soon as your website is put online it will break.

Organizing Your Files

Keep all of the files for the website in a site folder with the index.html(usually the homepage) at the top level (not inside a folder) this allows for simple relative paths. Although this is not required if your web page is on your computer and viewed only on your computer. When you migrate your website to the internet, your server is your site folder.

There is no standard for the organization of the files of the website. It is up to the developer(s) to organize their files whether all mixed together in the one folder or split by file type or content into folders in the site folder.

Naming your files

Use meaningful names! In addition your homepage should be index.html . index.html loads automatically when your website is called.

Code formatting

Although no standard is enforced, almost if not all teaching material as well as developers themselves push for organization in all code. HTML is a markup language. In other words, HTML's purpose is to describe the content. Most HTML code is formatted using an outline style where each level is indented in. This allows the reader of the code to quickly see the relationship of the content as well as allowing the developer to keep track of the content. Below is an example of formatted code. Lorem Ipsum is used for sample text. Lorem Ipsum is standard dummy text.

<h1>Title</h1>
<h2>Subheading 1</h2>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
  massa metus, fermentum a accumsan eu, ullamcorper eu dolor. Nam 
  nec odio non felis mollis semper. Cum sociis natoque penatibus 
  et magnis dis parturient montes, nascetur ridiculus mus. Quisque 
  porttitor odio vel nisi ornare facilisis. Ut luctus ornare augue 
  sit amet ullamcorper.
</p>
<h2>Subheading 2</h2>
<p>
  Integer elementum porttitor mauris, non blandit turpis volutpat 
  nec. Maecenas sagittis, tortor venenatis tincidunt tincidunt, 
  sem leo ultrices risus, et consectetur nunc nibh ac justo. 
  Donec convallis porta purus eget cursus. Nam non velit lectus. 
  Aliquam vel orci tortor.
</p>
<p>
  Contact Info
</p>