HTML <script> Element

The HTML <script> element is used to embed or reference JavaScript code within an HTML document. It allows developers to add interactivity, dynamic behavior, and functionality to web pages by executing scripts written in JavaScript.

Example: Implementation of the script element.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>HTML script element</title>
</head>
 
<body>
    <h1>w3wiki</h1>
    <h2>HTML script Element</h2>
    <p id="GFG"></p>
 
    <!-- HTML script Tag Starts Here -->
    <script>
        document.getElementById("GFG").innerHTML
            = "Hello w3wiki!";
    </script>
    <!-- HTML Script Tag Ends Here -->
 
</body>
 
</html>


Output:

HTML Head Element

The HTML <head> element acts as a container for crucial metadata that defines the document’s essential attributes. Positioned between the <html> and <body> tags, elements such as <title>, <style>, <meta>, <link>, <script>, and <base> are wrapped inside The HTML <head> element. Additionally, The information contained by the <head> element is not displayed by the browser on the web page.

Similar Reads

HTML head Elements

Tag Description A container for metadata, placed between the and tags. Required element that defines the title of the document. <style> Used to define style information for a single document. <link> Often used to link to external style sheets. <meta> They are typically used to specify the character set, page description, keywords, author of the document, and viewport settings. <script> Used to define client-side JavaScript. <base> Specifies the base URL and target for all relative URLs in a page.... </p> </a> </div> <div class="article-related-item"> <a href="/article/learn_html_<title>_element_2"> <p class="article-related-title"> HTML <title> Element</p> <p class="article-related-description"> The title tag is an important element of a webpage that is used to provide the title of the page. It should contain only text and there can only be one <title> element in an HTML document. To make your webpage more informative, it is advisable to use a detailed and descriptive title instead of a short one.... </p> </a> </div> <div class="article-related-item"> <a href="/article/learn_html_<style>_element_3"> <p class="article-related-title"> HTML <style> Element</p> <p class="article-related-description"> ... </p> </a> </div> <div class="article-related-item"> <a href="/article/learn_html_<link>_element_4"> <p class="article-related-title"> HTML <link> Element</p> <p class="article-related-description"> The HTML <style> element is used to embed or link to CSS styles within a webpage, allowing developers to define the visual presentation of HTML elements. It enhances the design and layout of a document by specifying color, font, spacing, and other styling properties.... </p> </a> </div> <div class="article-related-item"> <a href="/article/learn_html_<meta>_element_5"> <p class="article-related-title"> HTML <meta> Element</p> <p class="article-related-description"> ... </p> </a> </div> <div class="article-related-item"> <a href="/article/learn_setting_the_viewport_6"> <p class="article-related-title"> Setting the viewport</p> <p class="article-related-description"> The <link> tag in HTML is used to define a link between a document and an external resource. The link tag is mainly used to link to external style sheets making an organised structure of CSS files.... </p> </a> </div> <div class="article-related-item"> <a href="/article/learn_html_<script>_element_7"> <p class="article-related-title"> HTML <script> Element</p> <p class="article-related-description"> ... </p> </a> </div> <div class="article-related-item"> <a href="/article/learn_html_<base>_element_8"> <p class="article-related-title"> HTML <base> Element</p> <p class="article-related-description"> ... </p> </a> </div> </div> </div> </div> <div class="detail-right"> <div class="box"> <h4>Categories</h3> <div class="cats"> <a href="/html/default" class="cats_item" title="HTML Tutorial">HTML</a> <a href="/css3/default" class="cats_item" title="CSS3 Tutorial">CSS3</a> <a href="/bootstrap/default" class="cats_item" title="Bootstrap Tutorial">Bootstrap</a> <a href="/foundation/default" class="cats_item" title="Foundation Tutorial">Foundation</a> <a href="/sass/default" class="cats_item" title="Sass Tutorial">Sass</a> <a href="/js/default" class="cats_item" title="JavaScript Tutorial">JavaScript</a> <a href="/typescript/index" class="cats_item" title="TypeScript Tutorial">TypeScript</a> <a href="/jquery/default" class="cats_item" title="JQuery Tutorial">JQuery</a> <a href="/angularjs/default" class="cats_item" title="AngularJS Tutorial">AngularJS</a> <a href="/react/default" class="cats_item" title="React Tutorial">React</a> <a href="/nodejs/default" class="cats_item" title="NodeJS Tutorial">NodeJS</a> <a href="/highcharts/default" class="cats_item" title="Highcharts Tutorial">Highcharts</a> <a href="/php/default" class="cats_item" title="PHP Tutorial">PHP</a> <a href="/python/default" class="cats_item" title="Python based tutorial">Python</a> <a href="/python3/default" class="cats_item" title="Python3 tutorial">Python3</a> <a href="/django/index" class="cats_item" title="Django tutorial">Django</a> <a href="/linux/default" class="cats_item" title="Linux tutorial">Linux</a> <a href="/docker/default" class="cats_item" title="Docker tutorial">Docker</a> <a href="/ruby/default" class="cats_item" title="Ruby tutorial">Ruby</a> <a href="/java/default" class="cats_item" title="Java tutorial">Java</a> <a href="/cprogramming/default" class="cats_item" title="C tutorial">C</a> <a href="/cplusplus/default" class="cats_item" title="C ++ tutorial">C ++</a> <a href="/perl/default" class="cats_item" title="Perl tutorial">Perl</a> <a href="/servlet/default" class="cats_item" title="Servlet tutorial">Servlet</a> <a href="/jsp/default" class="cats_item" title="JSP tutorial">JSP</a> <a href="/lua/default" class="cats_item" title="Lua tutorial">Lua</a> <a href="/scala/default" class="cats_item" title="Scala tutorial">Scala</a> <a href="/go/index" class="cats_item" title="Go tutorial">Go</a> <a href="/asp/default" class="cats_item" title="ASP tutorial">ASP</a> <a href="/csharp/default" class="cats_item" title="C # tutorial">C #</a> <a href="/sql/default" class="cats_item" title="SQL Tutorial">SQL</a> <a href="/mysql/default" class="cats_item" title="MySQL Tutorial">MySQL</a> <a href="/sqlite/default" class="cats_item" title="SQLite Tutorial">SQLite</a> <a href="/mongodb/default" class="cats_item" title="MongoDB Tutorial">MongoDB</a> <a href="/redis/default" class="cats_item" title="Redis Tutorial">Redis</a> <a href="/android/default" class="cats_item" title="Android Tutorial">Android</a> <a href="/swift/default" class="cats_item" title="Swift Tutorial">Swift</a> <a href="/ionic/default" class="cats_item" title="ionic Tutorial">ionic</a> <a href="/kotlin/index" class="cats_item" title="kotlin Tutorial">Kotlin</a> <a href="/xml/default" class="cats_item" title="XML Tutorial">XML tutorial</a> </div> </div> <div class="box"> <h4>Contact US</h4> <div class="form-group" style="height:36px"> <label for="inputEmail3" class="col-sm-3 control-label">Email:</label> <div class="col-sm-9"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-3 control-label">Content:</label> <div class="col-sm-9"> <textarea class="form-control" rows="3" id="inputTextarea" placeholder="Please Enter"></textarea> </div> </div> <div class="form-group"> <div class="col-sm-offset-3 col-sm-9"> <button class="btn btn-default" onclick="toSubmit()" style="margin-top:15px">Submit</button> </div> </div> </div> <div class="box outside"> <a href="/article/learn_methods_in_sap_abap_classes_5"></a> <a href="/article/learn_war_and_deforestation_4"></a> <a href="/article/learn_similar_triangles_examples_2"></a> <a href="/article/learn_how_to_do_a_market_analysis_7"></a> <a href="/article/learn_inorganic_chemical_changes_4"></a> <a href="/article/learn_continued_economic_growth_and_calls_for_democratisation_1"></a> <a href="/article/learn_faqs_on_applications_of_bar_graph_5"></a> <a href="/article/learn_steps_to_download_nda_admit_card__5"></a> <a href="/article/learn_feistel_cipher_algorithm_1"></a> <a href="/article/learn__format_the_device_12"></a> </div> </div> </div> </div> <script src="/public/js/jquery.min.js"></script> <script src="/public/js/bootstrap.min.js"></script> <script> $(function() { var ref = document.referrer; var data = ref ? ref.split('//')[1].split('/')[0].replace(/\./g, '-') : 'other'; $.post("/analysis", { referrer: data }); }); function toSubmit() { var email = $('#inputEmail3').val() var contact = $('#inputTextarea').val(); if (email.length > 5 && contact.length > 1) { $.ajax({ url: '/contact', // 目标URL type: 'POST', // 请求类型 data: { email: email, contact: contact }, success: function(res) { // 请求成功时的回调函数 console.log(res); if (res == true) { $('#inputEmail3').val('') $('#inputTextarea').val('') } }, error: function(xhr, status, error) { // 请求失败时的回调函数 console.error(error); } }); } }; </script> </body> </html>