HTML Tutorial
INTRODUCTION
HTML BASIC TAGS
INLINE & BLOCK ELEMENTS
HTML LISTS
HTML TABLES
HTML FORMS
HEAD ELEMENTS
HTML MEDIA
MISCELLANEOUS TAGS
Link & Script Tags
The <link> and <script> tags are essential tools in HTM for connecting your webpage to external resources like CSS and JavaScript files. These tags are usually placed inside the <head> section of an HTML document.
The <link> Tag
The <link> tag is used to attach external resources – most commonly stylesheets (CSS) – to your HTML page. It is self-closing and does not require a closing tag.
Linking a CSS File
<link rel="stylesheet" type="text/css" href="styles.css">
rel="stylesheet"defines the relationship between the current document and the linked file.type="text/css"specifies the content type.href="styles.css"is the path to your CSS fie.
This tag is placed the <head> of your HTML document.
The <script> Tag
The <script> tag is used to add JavaScript to your HTML. It can either embed the code directly or link to an external JavaScript file. Unlike <link>, it requires a closing tag.
Linking an External JavaScript File
<script src="script.js" type="text/javascript"></script>
src="script.js"specifies the path to your JavaScript fie.type="text/javascript"defines the script type.
You can also place <script> at the end of the <body> to ensure your page loads faster.
Where to Use Them
- Place
<link>in the<head>for styles. - Place
<script>in the<head>or just before</body>for scripts.
Example Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Link and Script Example</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Conclusion
- Use
<link>to connect your HTML with external stylesheets. - Use
<script>to load JavaScript files for interactivity. - Both tags improve the functionality, style, and performance of your web pages.