Using Codepen more and more, often to experiment and for demos to show the code I’m working with, I’ve learned to make my Codepen workflow smoother with little tacks here and there. One of which is finding a way to avoid repeating a same base URL in the HTML, in Pens. Here’s what I mean…
It could be a set of hyperlinked texts to different articles from a same website, or images displayed from a same CDN — In such cases using absolute URLs and repeating the same domain in each URL can crowd the HTML (well, kinda). So, if the requested resources can be called instead with relative URLs then that would clean up the code and readers can focus on the main code.
For instance, instead of something like this:
We can have this, cleaner version:
Making this change is really simple. We use the HTML
base tag for?
This element, to be placed inside
head, assigns a base URL for the document. By doing this, unless a URL is absolute in the HTML document it’ll be treated as a relative URL, relative to the document’s base URL.
Codepen has a setting for adding codes inside the
head element of the result document (codes like
meta tags and
links). We use that setting to add the
Open the pen and click Settings, if not already selected, select the HTML tab. Under Stuff for head type the
base element with its
href attribute containing the base URL.
Now your Pen’s HTML has a base URL that you can use to fetch any resource in it.