Mga tag na ginagamit sa seksyon ng ulo

Ang artikulong ito ay nagpapaliwanag ng mga tag na ginamit sa head section.

Ipinapaliwanag nito ang mga tag na ginagamit sa seksyon ng head, tulad ng <link>, <script>, <style>.

YouTube Video

Mga tag na ginagamit sa seksyon ng ulo

Tag na <title>

1<title>Document Title</title>

• Ang <title> na tag ay nagtatakda ng pamagat ng dokumento. Ang pamagat na ito ay ipinapakita sa tab ng browser at ginagamit sa mga bookmark at resulta ng paghahanap.

Tag na <link>

• Ang <link> na tag ay ginagamit upang i-link ang mga panlabas na mapagkukunan sa kasalukuyang dokumento. Karaniwan itong ginagamit upang i-link ang mga panlabas na CSS file ngunit maaari ring gamitin para sa mga icon at iba pang mga panlabas na mapagkukunan.

Ang rel Attribute ng <link> Tag

Ang rel na attribute ay ginagamit upang tukuyin ang relasyon sa pagitan ng resource na naka-link at ng kasalukuyang dokumento sa <link> na tag. Maraming uri ng mga halaga para sa rel na attribute, ngunit dito ipapaliwanag natin ang mga partikular na mahalaga at madalas gamitin.

stylesheet

1<link rel="stylesheet" href="styles.css">

• Ginagamit ang stylesheet upang i-link ang isang panlabas na stylesheet.

icon

1<link rel="icon" href="favicon.ico" type="image/x-icon">

• Ang rel="icon" ay nagtatakda sa icon na ipinapakita sa tab ng browser o bookmark. Sa pamamagitan ng pagtukoy ng tamang favicon, napapahusay ang pagpapakilala ng tatak ng site at pagkilala sa visual.

preload

1<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">

• Ginagamit ang preload upang mag-load ng mga resource nang maaga bago magsimula ang pag-render ng pahina. Ito ay lalong kapaki-pakinabang para sa mga resource kung saan mahalaga ang timing, tulad ng mga font o malalaking larawan. Pinapabuti nito ang pagganap at pinahuhusay ang karanasan ng gumagamit.

canonical

1<link rel="canonical" href="https://example.com/page.html">

• Gamit ang canonical upang ipaalam sa mga search engine ang canonical na bersyon ng isang pahina. Sa kaso ng dobleng nilalaman, ang pagtukoy sa canonical na URL ay nakakatulong upang pagsamahin ang ranggo ng search engine mula sa pananaw ng SEO at tinitiyak na ang nilalaman ay tama ang pagkaka-index.

alternate

1<link rel="alternate" hreflang="en" href="https://example.com/en/">

• Ginagamit ang alternate upang ipahiwatig ang mga pahina ng iba't ibang mga wika o format sa mga search engine at browser. Sa mga multilingual na site, maaari mong tukuyin ang URL para sa bawat bersyon ng wika kasabay ng hreflang na attribute upang mabigyan ang mga gumagamit ng mga pahina sa naaangkop na wika.

manifest

1<link rel="manifest" href="/manifest.json">

• Pinapagana ng manifest ang browser sa pamamagitan ng pagbibigay ng manifest file na naglalaman ng impormasyon ng configuration para sa isang PWA (Progressive Web App). Ang file na ito ay naglalaman ng impormasyon tulad ng icon ng app, kulay ng tema, at mode ng display, na tumutulong sa pag-install at pagpapatakbo ng PWA sa mga mobile device.

dns-prefetch

1<link rel="dns-prefetch" href="//example.com">

• Kapag tumutukoy sa mga panlabas na mapagkukunan, ang pagsasagawa ng DNS resolution ng domain nang maaga ay maaaring magpahusay sa bilis ng pag-load ng pahina. Ito ay partikular na epektibo para sa mga pahina na may maraming panlabas na mapagkukunan o kung saan nais ang mabilis na karanasan ng user.

Tag na <style>

1<style>
2  body {
3    font-family: Arial, sans-serif;
4  }
5</style>

• Ang <style> na tag ay ginagamit upang tukuyin ang mga panloob na style sheets. Ito ay ginagamit upang mag-apply ng CSS styles sa mga elemento ng pahina, na nagbibigay-daan sa iyo na magsulat ng CSS nang hindi gumagamit ng mga panlabas na file.

Tag na <script>

1<script>
2    console.log('Hello, World!');
3</script>
4<script src="script.js"></script>

• Ang <script> na tag ay ginagamit upang mag-embed ng JavaScript code sa isang HTML na dokumento. Maaari ka ring mag-link ng mga panlabas na JavaScript files, na kumokontrol sa dinamikong paguugali ng pahina. Gamitin ang src na attribute upang tukuyin ang script file.

Ang Mga Katangian ng async at defer

Ang <script> na tag ay sumusuporta sa dalawang attribute, async at defer, na nakakaapekto sa tiyempo ng pag-load at pag-execute ng script. Karaniwan, ang mga script ay pinoproseso nang sunud-sunod ng browser, ngunit ang paggamit ng mga attribute na ito ay maaaring magpabuti sa performance ng pahina at karanasan sa pag-load.

Ang Katangiang async

1<script src="script.js" async></script>

• Ang paggamit ng async na attribute ay nagpapahintulot sa script na ma-load nang asynchronous. Ina-load ng browser ang script kasabay ng iba pang mapagkukunan at ini-execute ito agad kapag natapos ang pag-load.
• Ang async ay pangunahing angkop para sa mga independent na script at ginagamit kapag ang script ay hindi umaasa sa pag-load ng iba pang script o ng DOM.

Ang Katangiang defer

1<script src="script.js" defer></script>

• Ang paggamit ng defer na attribute ay nagpapahintulot sa script na ma-load nang asynchronous ngunit ma-execute pagkaraan ng HTML parsing. Ang pag-execute ng script ay hindi humaharang sa pagpapakita ng pahina, kaya nagpapabuti sa karanasan ng user.
• Ang defer ay epektibo kapag kailangang i-execute ang mga script matapos ganap na ma-load ang DOM. Halimbawa, ito ay angkop kapag nais mong tumakbo ang script pagkatapos ma-load ang buong layout at mga elemento ng pahina.

Patakaran sa CORS at ang Katangiang crossorigin

Kapag naglo-load ng mga panlabas na script, maaaring magpatupad ng mga restriksyon sa seguridad batay sa Same-Origin Policy. Sa mga ganitong kaso, maaaring gamitin ang crossorigin na attribute upang pahintulutan ang pagbabahagi ng mapagkukunan.

1<script src="https://example.com/script.js" crossorigin="anonymous"></script>

Ang crossorigin na katangian ay maaaring itakda gamit ang sumusunod na dalawang halaga:.

• anonymous: Nagpapadala ng mga request na hindi kasama ang mga kredensyal.
• use-credentials: Nagpapadala ng mga request na kasama ang mga kredensyal.

katangiang type

Maaaring gamitin ng <script> na tag ang type na attribute upang tukuyin ang uri ng script. Sa default, ginagamit ang JavaScript, ngunit maaari mo ring tukuyin ang ilang uri ng script (hal., module type JavaScript o template na wika).

Mga Module ng JavaScript

1<script type="module" src="module.js"></script>

• Mula noong ECMAScript 2015 (ES6), ipinakilala ang mga module ng JavaScript, na nagpapahintulot sa paghahati ng code sa mga module, kaya nagpapahusay sa reusability. Sa pamamagitan ng pagtukoy sa type="module", maaari mong ituring ang script bilang isang module.

• Maaaring hatiin ang mga module sa iba pang module sa pamamagitan ng paggamit ng import at export.

Mga Script na Hindi JavaScript

1<script type="application/ld+json">
2{
3  "@context": "https://schema.org",
4  "@type": "Organization",
5  "name": "Example Inc.",
6  "url": "https://www.example.com"
7}
8</script>

• Maaaring tukuyin din ang mga script bukod sa JavaScript sa loob ng <script> na tag. Halimbawa, gamitin ang type="application/ld+json" kapag naglalarawan ng naka-istrukturang datos tulad ng JSON-LD. Dito, ang JSON-LD ay isang format na nag-iistruktura ng datos sa isang web page, na nagpapahintulot sa mga search engine at iba pang mga aplikasyon na mas malalim na maunawaan ang datos.

Mga Tala sa Paggamit ng <script> na Tag

• Order ng mga Script: Ang mga library na pinagbabatayan ng mga script ay kailangang ma-load bago ang mga dependent na script. Halimbawa, ang mga script na gumagamit ng jQuery ay kailangang ma-load pagkatapos ng mismong jQuery.
• Pag-optimize ng Pagganap: Upang maiwasan ang epekto sa bilis ng pag-load ng page, i-load lamang ang mga script kapag kinakailangan at iwasan ang pagpapatakbo ng mga hindi kinakailangang script.
• Mga Pamamaraan ng Seguridad: Kapag gumagamit ng mga panlabas na script, tiyakin na i-load ang mga ito mula sa mapagkakatiwalaang mga pinagmulan upang maiwasan ang pagkakasama ng mapanirang mga script.

<base> tag

1<base href="https://example.com/">

• Itinatakda ng <base> na tag ang base URL para sa lahat ng relativong URL sa dokumento. Ang URL na tinukoy sa href attribute ay nagiging base para sa relativong mga landas sa mga link at imahe. Karaniwan itong ginagamit ng isang beses lamang bawat pahina.

<noscript> tag

1<noscript>Your browser does not support JavaScript!</noscript>

• Itinatakda ng <noscript> na tag ang nilalaman na ipinapakita kapag ang JavaScript ay naka-disable sa browser. Ito ay ginagamit upang magbigay ng alternatibong nilalaman para sa mga kapaligiran kung saan ang JavaScript ay hindi suportado.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video