HTML - File linking

A normal, minimalistic way to include a file is this way. It shows 3 examples:

This is the standard way to include a file when you don't care about controlling loading.

Linking a CSS, Javascript and other files is a pretty easy, as nothing much changes - just use the standard way as the previous code shows. One more thing file linking has, is loading control:

The "preload" tag makes the file load earlier when you go to a website page, its called "parsing". The "type=module" is not a loading function, but it enables ES6 modules - making global functions more strict for instance. Lastly, the "defer" attribute waits for HTML to load first, and then the linked file loads afterwards.

Linking fonts, app icons, and audios/videos

Here is an instance to include these elements in your website, with an advanced way:

Typically when including a font in HTML, Google Fonts is used for this. Here we just put the "https://fonts.googleapis.com/css2?family=Roboto&display=swap" link in the "href" tag, and your font is linked from an external website. For putting an image onto HTML, we use the "video" tag, including "audio" element to include sound in our video. Finally, for the icon, we use "rel='icon'", so it behaves as an icon for a website, and use the ".ico" extension for the icon file, to explicitly tell the computer that the file belongs to an icon.