{"id":78931,"date":"2020-07-04T09:00:13","date_gmt":"2020-07-04T03:30:13","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=78931"},"modified":"2024-07-24T18:17:13","modified_gmt":"2024-07-24T12:47:13","slug":"html-file-paths","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/html-file-paths\/","title":{"rendered":"HTML File Paths – Absolute and Relative File Paths"},"content":{"rendered":"

HTML file paths are used to define the file\u2019s location, which will be used as an external resource within the HTML document. The location of the file is specified as per the structure of the web folder. External resources such as CSS files, script files, images, multimedia, etc. can be linked to an HTML document. A website has a folder structure and the file path is to describe the location of the file within that folder structure.<\/p>\n

\"HTML<\/a><\/p>\n

HTML File Paths Types<\/h2>\n

File Paths in HTML are of two types:<\/p>\n

1. HTML Absolute File Paths<\/h3>\n

The full URL of the file, that is to be accessed, is mentioned. For example,
\nCode-<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <title><\/title>\r\n<\/head>\r\n<body>\r\n<h1>Welcome to DataFlair<\/h1>\r\n<img src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/6\/61\/HTML5_logo_and_wordmark.svg\/1200px-HTML5_logo_and_wordmark.svg.png\" height=\"200px\" width=\"200px\">\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"html<\/a><\/p>\n
2. HTML Relative File Paths<\/h3>\n
The path of the file that is relative to the current web-page\u2019s file is specified.<\/p>\n
a. Same folder as the current web-page file<\/h4>\n
For example, there is a folder \u2018DataFlair\u2019 that has an image \u2018DataFlair.png\u2019.
\nCode-<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<\/head>\r\n<body>\r\n<h1>Welcome to DataFlair<\/h1>\r\n<img src=\"DataFlair.png\" height=\"200px\" width=\"200px\">\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"relative<\/a><\/p>\n
b. Images folder in the current folder itself<\/h4>\n
For example, there is a folder DataFlair that has another folder \u2018images\u2019 comprising the image \u2018river.jpg\u2019.<\/p>\n
Code-<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<\/head>\r\n<body>\r\n<h1>Welcome to DataFlair<\/h1>\r\n<img src=\"images\/river.jpg\" height=\"200px\" width=\"200px\">\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"Images<\/a><\/p>\n
c. Folder at the root of the web-site folder<\/h4>\n
For example, The root folder (C:\\ drive in this case) has a folder \u2018images\u2019 consisting of an image \u2018river.jpg\u2019.<\/p>\n
Code-<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <title><\/title>\r\n<\/head>\r\n<body>\r\n<h1>Welcome to DataFlair<\/h1>\r\n<img src=\"\/images\/river.jpg\" height=\"200px\" width=\"200px\">\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"Folder<\/a><\/p>\n
d. Images folder one level up the current web-page\u2019s folder<\/h4>\n
For example, The folder \u2018DataFlair\u2019 is located as C:\\Users\\abc\\Desktop and there is an image \u2018river.jpg\u2019 on the Desktop. Then in order to access and insert this image on our web-page, the following code is written.
\nCode-<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<\/head>\r\n<body>\r\n<h1>Welcome to DataFlair<\/h1>\r\n<img src=\"..\/river.jpg\" height=\"200px\" width=\"200px\">\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"Images<\/a><\/p>\n
Note-<\/strong> It is recommended to use relative URL paths as compared to the absolute URL paths.<\/p>\n
Working with relative file paths has many advantages. It is useful to guarantee that the links inside your site work properly if the name of the domain changes while the folder is preserved. This also increases the mobility of the website and can be easily relocated from one server to another while in the process the links do not disintegrate.<\/p>\n
Furthermore, use of relative paths helps one to have short and clean code, which in one way helps in the management and maintenance of the HTML documents. Organizing files in a logical manner proves beneficial for other workers, increasing the efficiency of Web development projects.<\/p>\n
Below table depicts the above-mentioned types:<\/p>\n\n\n\n\n\n\n\n\n
Path<\/b><\/td>\nFunction<\/b><\/td>\n<\/tr>\n
<img src=”https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/ 6\/61\/HTML5_logo_and_wordmark.svg\/1200px-HTML5_logo_and_wordmark.svg.png”><\/span><\/td>\nAbsolute URL of the image specified here.<\/span><\/td>\n<\/tr>\n
<img src=”DataFlair.png”<\/span><\/td>\nImage in the current folder as the web-page.<\/span><\/td>\n<\/tr>\n
<img src=”images\/river.jpg”<\/span><\/td>\nImage in the images folder, same as the current folder.<\/span><\/td>\n<\/tr>\n
<img src=”\/images\/river.jpg”<\/span><\/td>\nImage in the images folder, at the root of the current web-page.<\/span><\/td>\n<\/tr>\n
<img src=”..\/river.jpg”<\/span><\/td>\nImage in the images folder, one level up the current folder.<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Summary<\/h2>\n
File Paths are used to add external resources to the current HTML document. These resources can be images,multimedia,script,CSS file,etc.<\/p>\n","protected":false},"excerpt":{"rendered":"
HTML file paths are used to define the file\u2019s location, which will be used as an external resource within the HTML document. The location of the file is specified as per the structure of...<\/p>\n","protected":false},"author":10,"featured_media":78992,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22400],"tags":[22519,22517,22518],"class_list":["post-78931","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","tag-html-absolute-path","tag-html-file-paths","tag-html-relative-paths"],"yoast_head":"\nHTML File Paths - Absolute and Relative File Paths - DataFlair<\/title>\n<meta name=\"description\" content=\"Learn file paths in HTML with types and examples - HTML Absolute path, relative paths-Same folder as current web-page file,Images in current folder,Folder at root of web-site folder, folder one level up the current web-page\u2019s folder\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/html-file-paths\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML File Paths - Absolute and Relative File Paths - DataFlair\" \/>\n<meta property=\"og:description\" content=\"Learn file paths in HTML with types and examples - HTML Absolute path, relative paths-Same folder as current web-page file,Images in current folder,Folder at root of web-site folder, folder one level up the current web-page\u2019s folder\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/html-file-paths\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-04T03:30:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-24T12:47:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/HTML-File-Paths-df.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML File Paths - Absolute and Relative File Paths - DataFlair","description":"Learn file paths in HTML with types and examples - HTML Absolute path, relative paths-Same folder as current web-page file,Images in current folder,Folder at root of web-site folder, folder one level up the current web-page\u2019s folder","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/data-flair.training\/blogs\/html-file-paths\/","og_locale":"en_US","og_type":"article","og_title":"HTML File Paths - Absolute and Relative File Paths - DataFlair","og_description":"Learn file paths in HTML with types and examples - HTML Absolute path, relative paths-Same folder as current web-page file,Images in current folder,Folder at root of web-site folder, folder one level up the current web-page\u2019s folder","og_url":"https:\/\/data-flair.training\/blogs\/html-file-paths\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2020-07-04T03:30:13+00:00","article_modified_time":"2024-07-24T12:47:13+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/HTML-File-Paths-df.jpg","type":"image\/jpeg"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/html-file-paths\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/html-file-paths\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/a90b082e16aa38d207212d22b0581f33"},"headline":"HTML File Paths – Absolute and Relative File Paths","datePublished":"2020-07-04T03:30:13+00:00","dateModified":"2024-07-24T12:47:13+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/html-file-paths\/"},"wordCount":518,"commentCount":0,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/html-file-paths\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/HTML-File-Paths-df.jpg","keywords":["html absolute path","html file paths","html relative paths"],"articleSection":["HTML Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/html-file-paths\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/html-file-paths\/","url":"https:\/\/data-flair.training\/blogs\/html-file-paths\/","name":"HTML File Paths - Absolute and Relative File Paths - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/html-file-paths\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/html-file-paths\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/HTML-File-Paths-df.jpg","datePublished":"2020-07-04T03:30:13+00:00","dateModified":"2024-07-24T12:47:13+00:00","description":"Learn file paths in HTML with types and examples - HTML Absolute path, relative paths-Same folder as current web-page file,Images in current folder,Folder at root of web-site folder, folder one level up the current web-page\u2019s folder","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/html-file-paths\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/html-file-paths\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/html-file-paths\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/HTML-File-Paths-df.jpg","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/HTML-File-Paths-df.jpg","width":1200,"height":628,"caption":"HTML File Paths"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/html-file-paths\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"HTML Tutorials","item":"https:\/\/data-flair.training\/blogs\/category\/html\/"},{"@type":"ListItem","position":3,"name":"HTML File Paths – Absolute and Relative File Paths"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/a90b082e16aa38d207212d22b0581f33","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/dd6de0d647a0185cd6faf264e4ba860b0d85d08d7070766f9cd41bea5bb0b227?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/dd6de0d647a0185cd6faf264e4ba860b0d85d08d7070766f9cd41bea5bb0b227?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/dd6de0d647a0185cd6faf264e4ba860b0d85d08d7070766f9cd41bea5bb0b227?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"The DataFlair Team is passionate about delivering top-notch tutorials and resources on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. With expertise in the tech industry, we simplify complex topics to help learners excel. Stay updated with our latest insights.","url":"https:\/\/data-flair.training\/blogs\/author\/dfadteam1\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/78931","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=78931"}],"version-history":[{"count":8,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/78931\/revisions"}],"predecessor-version":[{"id":142905,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/78931\/revisions\/142905"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/78992"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=78931"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=78931"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=78931"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}