Guide: How to Specify Document Base URL using HTML Element

Websites are built with a series of links pointing to pages and resources such as images and style sheets. There are two ways specify the URL linking to these resources: Use an absolute path or a relative path. The absolute path refers to a specific destination, usually it starts with the domain name (along with HTTP) such as www.domain.com/destination/source.jpg. The relative path is the opposite: the link destination depends on the root location or in most cases the domain name of your website. A typical relative path would look like this:

For example, if your website domain is hongkiat.com, the image path will be resolved to hongkiat.com/assets/img/image.png. You need to understand this if you have been developing a website for a while. But most of you have probably never liked it element. This HTML tag has been around since HTML4, but very little of its implementation has been seen in the wild. W3C describes this element as: “The basic element allows authors to specify the base URL of the document for resolving relative URLs and the name of the default browsing context for following hyperlinks. “ This element actually determines the base URL for the relative path in web pages. Rather than relying on the root location or domain of your website, you can point it elsewhere, such as the URL where your resources are located in CDN (Content Delivery Network). Let’s see how that really works.

Using the base element

The is defined next to the and tags within the

This specification affects all paths in the document, including a path specified in the href attribute and the src of the images. Assuming we have a stylesheet, images and links in the document set with a relative path like this, for example: Even though our webpage is located under demo.hongkiat.com, the relative path will point to hongkiat.maxcdn.com, according to the base path specified in the tag. Try hovering over the link and the browser will show you exactly where the path leads. All relative paths will eventually be:

In addition to defining the base URL, the tag also set the default link target through the target attribute. Let’s say you want to open all links in the document in the new browser tab, set the target with _blank, like so.

The tag does contain some caveats in some cases: First is the browser support great; it works in IE6. But IE6 thinks it requires a closing tag . This can cause a hierarchy problem in the document if the closing tag is not specified. An easy quick way to fix this problem is through add closing to a comment, <! -[if lte IE 6]> <![endif] If you use # in conjunction with the To link to sections in the document, you may encounter a problem in Internet Explorer 9. Instead of jumping to the said section, Internet Explorer 9 will reload the page. In addition, an empty href will result in the base URL instead of linking to the current directory where the page is located (this is standard browser behavior), which can cause unexpected referral problems.

Wrap Up

The is a handy HTML feature this can simplify pointing to links in a web document. Use the tag carefully to minimize the pitfalls. Follow this reference below to learn more about the tag:

Absolute and Relative URLs – MSDN Basic HTML Element – W3C

How to Specify Document Base URL using HTML Element: benefits

[wpsm_list type=”star”]

The How to Specify Document Base URL using HTML Element tutorial is free . This guide already helps so many users follow up with interest in a timely manner. The price of the How to Specify Document Base URL using HTML Element guide is free.

[/wpsm_list]

Faq

[wpsm_accordion] [wpsm_accordion_section title=”Tutorial summary of How to Specify Document Base URL using HTML Element”] In this guide, we told you about the How to Specify Document Base URL using HTML Element; please read all steps so that you understand How to Specify Document Base URL using HTML Element in case if you need any assistance from us, then contact us. [/wpsm_accordion_section] [wpsm_accordion_section title=”How this tutorial helping you?”] So in this guide, we discuss the How to Specify Document Base URL using HTML Element, which undoubtedly helps you. [/wpsm_accordion_section] [wpsm_accordion_section title=”What is actual time in which this method complete?”] The time to complete the How to Specify Document Base URL using HTML Element tutorial is 10+ minutes. [/wpsm_accordion_section] [wpsm_accordion_section title=”What are the supported Device?”] PC Laptop or Desktop [/wpsm_accordion_section] [/wpsm_accordion] [wpsm_divider top=”2px” bottom=”15px” style=”fadeout”]

Final note

I hope you like the guide How to Specify Document Base URL using HTML Element. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends. For our visitors: If you have any queries regards the How to Specify Document Base URL using HTML Element, then please ask us through the comment section below or directly contact us. Education: This guide or tutorial is just for educational purposes. Misinformation: If you want to correct any misinformation about the guide “How to Specify Document Base URL using HTML Element”, then kindly contact us. Want to add an alternate method: If anyone wants to add more methods to the guide How to Specify Document Base URL using HTML Element, then kindly contact us. Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off). Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.