**Course Title:** HTML & Web Development Fundamentals: Building Modern Websites **Section Title:** HTML and JavaScript Integration **Topic:** Using the `<script>` tag and async vs defer attributes. ### Introduction In the previous topic, we introduced JavaScript and its role in dynamic web pages. We also covered linking JavaScript to HTML using inline and external scripts. In this topic, we will delve deeper into using the `<script>` tag and explore the `async` and `defer` attributes. ### The `<script>` Tag The `<script>` tag is used to define a script in HTML. It is typically used to link to an external JavaScript file or to write inline JavaScript code. The basic syntax of the `<script>` tag is as follows: ```html <script src="script.js"></script> ``` In this example, we are linking to an external JavaScript file called `script.js`. ### Async Attribute The `async` attribute is used to specify that the script should be executed asynchronously. This means that the browser will continue to parse the HTML while the script is being downloaded and executed. The `async` attribute is particularly useful when loading external scripts, as it can improve page performance. ```html <script src="script.js" async></script> ``` When using the `async` attribute, the script is executed as soon as it is downloaded, regardless of whether the HTML is fully parsed. This can lead to issues if the script is dependent on the HTML being fully parsed. ### Defer Attribute The `defer` attribute is used to specify that the script should be executed after the HTML has been fully parsed. This means that the browser will wait until the HTML is fully parsed before executing the script. The `defer` attribute is particularly useful when loading external scripts that rely on the HTML being fully parsed. ```html <script src="script.js" defer></script> ``` When using the `defer` attribute, the script is executed after the HTML is fully parsed, but before the page is fully loaded. ### Comparison of Async and Defer | | Async | Defer | | --- | --- | --- | | **Execution** | Executed as soon as downloaded, regardless of HTML parsing | Executed after HTML is fully parsed | | **HTML Parsing** | Browser continues to parse HTML while script is being downloaded | Browser waits until HTML is fully parsed before executing script | | **Use Case** | Best for scripts that don't rely on HTML being fully parsed | Best for scripts that rely on HTML being fully parsed | ### Example Use Case Consider a scenario where we have a JavaScript file that is responsible for manipulating the DOM. In this case, we would want to use the `defer` attribute to ensure that the script is executed after the HTML is fully parsed. ```html <script src="script.js" defer></script> ``` Alternatively, if we have a script that doesn't rely on the HTML being fully parsed, such as a Google Analytics script, we can use the `async` attribute. ```html <script src="analytics.js" async></script> ``` ### Conclusion In this topic, we covered the basics of using the `<script>` tag and explored the `async` and `defer` attributes. We discussed the differences between these attributes and provided example use cases to illustrate their usage. By understanding the role of the `<script>` tag and the `async` and `defer` attributes, we can better optimize our web pages for performance and ensure that our JavaScript code is executed correctly. **Additional Resources:** * [MDN Web Docs: `<script>` tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) * [MDN Web Docs: `async` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-async) * [MDN Web Docs: `defer` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer) **Have Questions or Need Help?** Leave a comment below if you have any questions or need further clarification on this topic. **What's Next?** In the next topic, we will explore the basic interaction between HTML and JavaScript, including manipulating the DOM.