HTML5 File Structure

HTML5 File Structure

HTML5 file structure tells the browser where a specific file is located in a website’s folder structure.

HTML5 File Structure Examples

<img src=” WordPress.jpg”>It tells the browser to extract the file ‘wordpress.jpg’ from the same folder where the webpage is located

<img src=" images/Jackets.jpg">

It tells the browser that the file ‘jackets.jpg’ is located inside the images folder of the current folder.

<img src=”/images/jackets.jpg”>

It tells the browser that the file ‘jackets.jpg’ is located in the images folder that resides at the root directory of the webpage.

<img src=”../Jackets.jpg”>

It tells the browser that the file ‘jackets.jpg’ is located one level up from the current folder.

Different Ways for Specifying HTML5 File Structure

We define file structure in our HTML document when we want to link to an external file, such as:

  • Webpages
  • Images
  • Stylesheets
  • Javascript

 

Absolute File Structure

While using absolute file structure, we specify a full URL of a file that we want to link in our HTML document.

Example

<!DOCTYPE html>
  <html>
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width = device-width, initial-scale=1.0">
     <title>HTML5 File Structure</title>
   </head>
   <body>
     <img src="https://techbeacon.scdn7.secure.raxcdn.com/sites/default/files/styles/article_hero_image/public/html5-mobile-app-native-hybrid-pros-cons.jpg?itok=f2OysLvu" alt="HTML5 ">
   </body>
</html>

 

The Output of this code will be

HTML File Structure

Relative File Structure

In the relative file path, we point to a file in our HTML document related to our webpage. In the below example, we point to an image file located in the root directory of the current webpage.

Example

<!DOCTYPE html>
<html>
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width = device-width, initial-scale=1.0">
     <title>HTML5 File Structure</title>
   </head>
   <body>
     <img src="/images/Jackets.jpg">
   </body>
</html>

 

The output of this code will be

HTML5 File Structure

 

In the below example, the file structure instructs the browser to extract the file from an image folder inside the current folder.

<!DOCTYPE html>
<html>
  <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width = device-width, initial-scale=1.0">
     <title>HTML5 File Structure</title>
     </head>
  <body>
     <img src="images/web development.jpg">
  </body>
</html>

 

The output of this code will be

HTML5 File Structure

 

In the below example, file structure instructs the browser to extract a file from an image folder one level up from the current folder.

<!DOCTYPE html>
<html>
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width = device-width, initial-scale=1.0">
     <title>HTML5 File Structure</title>
  </head>
  <body>
     <img src="../images/Jackets.jpg">
  </body>
</html>

 

The output of this code will be

HTML5 File Structure

Key Takeaways

The best development practice is to use a relative file structure in HTML5. If you adhere to the relative file structure, your webpage will not be bound to your current base URL.

Therefore, all the links will work perfectly well on your localhost and your current and future public domain.

 

Next Lesson »