Hello friends, like always, my name I's Gustavo Assis and I'm a Computer Engeneering studant. I made this articles to help you, and help me, to learn about HTML and CSS.
Today, we will see more about HTML.
LINKS:
I'm talking about The element <link ...> is used to link the HTML file with external resources like stylesheets, fonts, etc.
<link rel="stylesheet" href="./styles.css" />
Stylesheet in one of several arguments, the possible others are:
1. Style and Appearance
stylesheet → Imports an external CSS file.
alternate stylesheet → An alternative style sheet that the user can choose to apply.
2. Site Navigation and Structure
icon → Specifies an icon for the page (favicon).
shortcut icon → Older variant for favicon (today it’s more common to just use icon).
manifest → A JSON file that describes a web application (PWA).
prefetch → Instructs the browser to fetch a resource in advance.
preload → Preloads resources (CSS, fonts, images, etc.) in a controlled way.
prerender → Pre-renders a page in the background for faster navigation.
prev / next → Links sequential documents (like pages in an article).
canonical → Specifies the canonical URL for SEO purposes.
alternate → Links to an alternate version of the content (e.g., different language).
3. Fonts, APIs, and Data
dns-prefetch → Resolves a domain’s DNS before it’s needed.
preconnect → Establishes an early connection to a server.
modulepreload → Preloads JavaScript modules in advance.
About the fonts, Google provides code with the links in Google Fonts, example:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mozilla+Headline:wght@200..700&display=swap" rel="stylesheet">
An example of icons:
<link rel="icon" href="favicon.ico" />
Top comments (0)