#18 HTML - The Head Element
Like Avenger have Hulk. Then we have <head> in HTML.
tag is container for
<title>, <style>, <script>, <link>, <base>, and
<meta>
The HTML Tag
The <head> tag is a container for metadata (data about data). It is placed after <html> and before <body> tag.
HTML metadata is data about the HTML document. Metadata is not displayed in web page.
Metadata typically defines the document title, character set, styles, scripts, and other meta information.
Note: Today I will put only code and you have to try it all in your system. It’s the 18th tutorial right. So try
The HTML Tag</h2>
<p>The HTML <code><title></code> tag is used for specifying the title of the HTML document. Which is display in the browser tab. Following is an example to give a title to an HTML document</p>
<p>Try and check title in browser tab.</p>
<pre class="astro-code dark-plus" style="background-color:#1E1E1E;color:#D4D4D4; overflow-x: auto;" tabindex="0" data-language="html"><code><span class="line"><span style="color:#808080"><!</span><span style="color:#569CD6">DOCTYPE</span><span style="color:#9CDCFE"> html</span><span style="color:#808080">></span></span>
<span class="line"><span style="color:#808080"><</span><span style="color:#569CD6">html</span><span style="color:#808080">></span></span>
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">head</span><span style="color:#808080">></span></span>
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">title</span><span style="color:#808080">></span><span style="color:#D4D4D4">A Meaningful Page Title</span><span style="color:#808080"></</span><span style="color:#569CD6">title</span><span style="color:#808080">></span><span style="color:#D4D4D4"> </span></span>
<span class="line"><span style="color:#808080"> </</span><span style="color:#569CD6">head</span><span style="color:#808080">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">body</span><span style="color:#808080">></span></span>
<span class="line"><span style="color:#D4D4D4"> The content of the document....</span></span>
<span class="line"><span style="color:#808080"> </</span><span style="color:#569CD6">body</span><span style="color:#808080">></span></span>
<span class="line"><span style="color:#808080"></</span><span style="color:#569CD6">html</span><span style="color:#808080">></span></span></code></pre>
<h2 id="the-html--tag-2">The HTML <meta> Tag</h2>
<p>The HTML <code><meta></code> tag is used to provide metadata about the HTML document which includes information about page expiry, viewports settings, page author, list of keywords, page description, etc.</p>
<p>Meta tags are also useful in SEO (search engine optimization).</p>
<p>Following are some of the important usages of <code><meta></code> tag inside an HTML document.</p>
<p>try this example, actually it will not displayed but they affect the website.</p>
<pre class="astro-code dark-plus" style="background-color:#1E1E1E;color:#D4D4D4; overflow-x: auto;" tabindex="0" data-language="html"><code><span class="line"><span style="color:#808080"><!</span><span style="color:#569CD6">DOCTYPE</span><span style="color:#9CDCFE"> html</span><span style="color:#808080">></span></span>
<span class="line"><span style="color:#808080"><</span><span style="color:#569CD6">html</span><span style="color:#808080">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">head</span><span style="color:#808080">></span></span>
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">title</span><span style="color:#808080">></span><span style="color:#D4D4D4">HTML Meta Tag Example</span><span style="color:#808080"></</span><span style="color:#569CD6">title</span><span style="color:#808080">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#6A9955"> <!-- Provide list of keywords --></span></span>
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">meta</span><span style="color:#9CDCFE"> name</span><span style="color:#D4D4D4"> = </span><span style="color:#CE9178">"keywords"</span><span style="color:#9CDCFE"> content</span><span style="color:#D4D4D4"> = </span><span style="color:#CE9178">"C, C++, Java, PHP, Perl, Python"</span><span style="color:#808080">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#6A9955"> <!-- Provide description of the page --></span></span>
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">meta</span><span style="color:#9CDCFE"> name</span><span style="color:#D4D4D4"> = </span><span style="color:#CE9178">"description"</span><span style="color:#9CDCFE"> content</span><span style="color:#D4D4D4"> = </span><span style="color:#CE9178">"Simply Easy Learning by Tutorials Point"</span><span style="color:#808080">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#6A9955"> <!-- Author information --></span></span>
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">meta</span><span style="color:#9CDCFE"> name</span><span style="color:#D4D4D4"> = </span><span style="color:#CE9178">"author"</span><span style="color:#9CDCFE"> content</span><span style="color:#D4D4D4"> = </span><span style="color:#CE9178">"Tutorials Point"</span><span style="color:#808080">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#6A9955"> <!-- Page content type --></span></span>
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">meta</span><span style="color:#9CDCFE"> http-equiv</span><span style="color:#D4D4D4"> = </span><span style="color:#CE9178">"content-type"</span><span style="color:#9CDCFE"> content</span><span style="color:#D4D4D4"> = </span><span style="color:#CE9178">"text/html; charset = UTF-8"</span><span style="color:#808080">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#6A9955"> <!-- Page refreshing delay --></span></span>
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">meta</span><span style="color:#9CDCFE"> http-equiv</span><span style="color:#D4D4D4"> = </span><span style="color:#CE9178">"refresh"</span><span style="color:#9CDCFE"> content</span><span style="color:#D4D4D4"> = </span><span style="color:#CE9178">"30"</span><span style="color:#808080">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#6A9955"> <!-- Page expiry --></span></span>
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">meta</span><span style="color:#9CDCFE"> http-equiv</span><span style="color:#D4D4D4"> = </span><span style="color:#CE9178">"expires"</span><span style="color:#9CDCFE"> content</span><span style="color:#D4D4D4"> = </span><span style="color:#CE9178">"Wed, 21 June 2006 14:25:27 GMT"</span><span style="color:#808080">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#6A9955"> <!-- Tag to tell robots not to index the content of a page --></span></span>
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">meta</span><span style="color:#9CDCFE"> name</span><span style="color:#D4D4D4"> = </span><span style="color:#CE9178">"robots"</span><span style="color:#9CDCFE"> content</span><span style="color:#D4D4D4"> = </span><span style="color:#CE9178">"noindex, nofollow"</span><span style="color:#808080">></span></span>
<span class="line"><span style="color:#D4D4D4"> </span></span>
<span class="line"><span style="color:#6A9955"> <!-- Setting the viewport to make your website look good on all devices --></span></span>
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">meta</span><span style="color:#9CDCFE"> name</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"viewport"</span><span style="color:#9CDCFE"> content</span><span style="color:#D4D4D4">=</span><span style="color:#CE9178">"width=device-width, initial-scale=1.0"</span><span style="color:#808080">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#808080"> </</span><span style="color:#569CD6">head</span><span style="color:#808080">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">body</span><span style="color:#808080">></span></span>
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">p</span><span style="color:#808080">></span><span style="color:#D4D4D4">Hello, World!</span><span style="color:#808080"></</span><span style="color:#569CD6">p</span><span style="color:#808080">></span></span>
<span class="line"><span style="color:#808080"> </</span><span style="color:#569CD6">body</span><span style="color:#808080">></span></span>
<span class="line"><span style="color:#D4D4D4"> </span></span>
<span class="line"><span style="color:#808080"></</span><span style="color:#569CD6">html</span><span style="color:#808080">></span></span></code></pre>
<h3 id="lets-see-about-viewport">Let’s see about viewport</h3>
<p>The viewport is the user’s visible area of a web page. It varies with the different device - it will be smaller on a mobile phone than on a computer screen.</p>
<p>You should include the following <code><meta></code> element in all your web pages</p>
<pre class="astro-code dark-plus" style="background-color:#1E1E1E;color:#D4D4D4; overflow-x: auto;" tabindex="0" data-language="plaintext"><code><span class="line"><span><meta name="viewport" content="width=device-width, initial-scale=1.0"></span></span></code></pre>
<p>This gives the browser instructions on how to control the page’s dimensions and scaling.</p>
<p>The <code>width=device-width</code> part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).</p>
<p>The <code>initial-scale=1.0</code> part sets the initial zoom level when the page is first loaded by the browser.</p>
<p>Here is an example of a web page <em>without</em> the viewport meta tag, and the same web page <em>with</em> the viewport meta tag:</p>
<p><strong>Tip:</strong> If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference.</p>
<figure>
<p><img src="/images/img_viewport1.png" alt=""></p>
<figcaption>
<p>Without the viewport meta tag</p>
</figcaption>
</figure>
<figure>
<p><img src="/images/img_viewport2.png" alt=""></p>
<figcaption>
<p>With the viewport meta tag</p>
</figcaption>
</figure>
<h2 id="the-html--tag-3">The HTML <base> Tag</h2>
<p>The HTML tag is used for specifying the base URL for all relative URLs in a page, which means all the other URLs will be <strong>concatenated</strong> into <strong>base URL</strong> while locating for the given item.</p>
<p>For example, all the given pages and images will be searched after prefixing the given URLs with base URL <a href="http://www.codesnail.com/">http://www.codesnail.com/</a> directory</p>
<p><strong>example</strong></p>
<pre class="astro-code dark-plus" style="background-color:#1E1E1E;color:#D4D4D4; overflow-x: auto;" tabindex="0" data-language="html"><code><span class="line"><span style="color:#808080"><!</span><span style="color:#569CD6">DOCTYPE</span><span style="color:#9CDCFE"> html</span><span style="color:#808080">></span></span>
<span class="line"><span style="color:#808080"><</span><span style="color:#569CD6">html</span><span style="color:#808080">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">head</span><span style="color:#808080">></span></span>
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">title</span><span style="color:#808080">></span><span style="color:#D4D4D4">HTML Base Tag Example</span><span style="color:#808080"></</span><span style="color:#569CD6">title</span><span style="color:#808080">></span></span>
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">base</span><span style="color:#9CDCFE"> href</span><span style="color:#D4D4D4"> = </span><span style="color:#CE9178">"https://www.codesnail.com/"</span><span style="color:#808080"> /></span></span>
<span class="line"><span style="color:#808080"> </</span><span style="color:#569CD6">head</span><span style="color:#808080">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">body</span><span style="color:#808080">></span></span>
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">img</span><span style="color:#9CDCFE"> src</span><span style="color:#D4D4D4"> = </span><span style="color:#CE9178">"/images/logo.png"</span><span style="color:#9CDCFE"> alt</span><span style="color:#D4D4D4"> = </span><span style="color:#CE9178">"Logo Image"</span><span style="color:#808080">/></span></span>
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">a</span><span style="color:#9CDCFE"> href</span><span style="color:#D4D4D4"> = </span><span style="color:#CE9178">"/html-tutorial/"</span><span style="color:#9CDCFE"> title</span><span style="color:#D4D4D4"> = </span><span style="color:#CE9178">"HTML Tutorial"</span><span style="color:#F44747">/</span><span style="color:#808080">></span><span style="color:#D4D4D4">HTML Tutorial</span><span style="color:#808080"></</span><span style="color:#569CD6">a</span><span style="color:#808080">></span><span style="color:#D4D4D4"> </span></span>
<span class="line"><span style="color:#808080"> </</span><span style="color:#569CD6">body</span><span style="color:#808080">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#808080"></</span><span style="color:#569CD6">html</span><span style="color:#808080">></span></span></code></pre>
<h2 id="the-html--tag-4">The HTML <link> Tag</h2>
<p>The <link> is used to define relation between in the current document and external resourse.</p>
<p>I’m sure 99.99% you will use this tag to link external CSS file to HTML file. We will discuss in CSS tutorial.</p>
<p>if you want try, we will also discuss in css tutorial</p>
<pre class="astro-code dark-plus" style="background-color:#1E1E1E;color:#D4D4D4; overflow-x: auto;" tabindex="0" data-language="html"><code><span class="line"><span style="color:#808080"><!</span><span style="color:#569CD6">DOCTYPE</span><span style="color:#9CDCFE"> html</span><span style="color:#808080">></span></span>
<span class="line"><span style="color:#808080"><</span><span style="color:#569CD6">html</span><span style="color:#808080">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">head</span><span style="color:#808080">></span></span>
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">title</span><span style="color:#808080">></span><span style="color:#D4D4D4">HTML link Tag Example</span><span style="color:#808080"></</span><span style="color:#569CD6">title</span><span style="color:#808080">></span></span>
<span class="line"><span style="color:#6A9955"> <!-- external css --></span></span>
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">link</span><span style="color:#9CDCFE"> rel</span><span style="color:#D4D4D4"> = </span><span style="color:#CE9178">"stylesheet"</span><span style="color:#9CDCFE"> type</span><span style="color:#D4D4D4"> = </span><span style="color:#CE9178">"text/css"</span><span style="color:#9CDCFE"> href</span><span style="color:#D4D4D4"> = </span><span style="color:#CE9178">"/css/style.css"</span><span style="color:#808080">></span></span>
<span class="line"><span style="color:#808080"> </</span><span style="color:#569CD6">head</span><span style="color:#808080">></span></span>
<span class="line"><span style="color:#D4D4D4"> </span></span>
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">body</span><span style="color:#808080">></span></span>
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">p</span><span style="color:#808080">></span><span style="color:#D4D4D4">Hello, World!</span><span style="color:#808080"></</span><span style="color:#569CD6">p</span><span style="color:#808080">></span></span>
<span class="line"><span style="color:#808080"> </</span><span style="color:#569CD6">body</span><span style="color:#808080">></span></span>
<span class="line"><span style="color:#D4D4D4"> </span></span>
<span class="line"><span style="color:#808080"></</span><span style="color:#569CD6">html</span><span style="color:#808080">></span></span></code></pre>
<h2 id="the-html--tag-5">The HTML <style> Tag</h2>
<p>We already seen this tag in various tutorial right. I know I never explained but here’s the explanation.</p>
<p>The HTML <code><style></code> tag is used to specify the style sheet for the current HTML document (also known as internal style sheet). Following is an example to define few style sheet rules inside <style> tag −</p>
<p>try this example</p>
<pre class="astro-code dark-plus" style="background-color:#1E1E1E;color:#D4D4D4; overflow-x: auto;" tabindex="0" data-language="html"><code><span class="line"><span style="color:#808080"><!</span><span style="color:#569CD6">DOCTYPE</span><span style="color:#9CDCFE"> html</span><span style="color:#808080">></span></span>
<span class="line"><span style="color:#808080"><</span><span style="color:#569CD6">html</span><span style="color:#808080">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">head</span><span style="color:#808080">></span></span>
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">title</span><span style="color:#808080">></span><span style="color:#D4D4D4">HTML style Tag Example</span><span style="color:#808080"></</span><span style="color:#569CD6">title</span><span style="color:#808080">></span></span>
<span class="line"><span style="color:#D4D4D4"> </span></span>
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">style</span><span style="color:#9CDCFE"> type</span><span style="color:#D4D4D4"> = </span><span style="color:#CE9178">"text/css"</span><span style="color:#808080">></span></span>
<span class="line"><span style="color:#D7BA7D"> .myclass</span><span style="color:#D4D4D4"> {</span></span>
<span class="line"><span style="color:#9CDCFE"> background-color</span><span style="color:#D4D4D4">: </span><span style="color:#CE9178">#aaa</span><span style="color:#D4D4D4">;</span></span>
<span class="line"><span style="color:#9CDCFE"> padding</span><span style="color:#D4D4D4">: </span><span style="color:#B5CEA8">10px</span><span style="color:#D4D4D4">;</span></span>
<span class="line"><span style="color:#D4D4D4"> }</span></span>
<span class="line"><span style="color:#808080"> </</span><span style="color:#569CD6">style</span><span style="color:#808080">></span></span>
<span class="line"><span style="color:#808080"> </</span><span style="color:#569CD6">head</span><span style="color:#808080">></span></span>
<span class="line"><span style="color:#D4D4D4"> </span></span>
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">body</span><span style="color:#808080">></span></span>
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">p</span><span style="color:#9CDCFE"> class</span><span style="color:#D4D4D4"> = </span><span style="color:#CE9178">"myclass"</span><span style="color:#808080">></span><span style="color:#D4D4D4">Hello, World!</span><span style="color:#808080"></</span><span style="color:#569CD6">p</span><span style="color:#808080">></span></span>
<span class="line"><span style="color:#808080"> </</span><span style="color:#569CD6">body</span><span style="color:#808080">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#808080"></</span><span style="color:#569CD6">html</span><span style="color:#808080">></span></span></code></pre>
<h2 id="the-html--tag-6">The HTML <script> Tag</h2>
<p>The HTML <code><script></code> tag is used to include either an external script file or to define an internal script for the HTML document.</p>
<p>Following is an example where we are using internal JavaScript to define a simple JavaScript function. We will see about the external script in the JavaScript tutorial.</p>
<p>try example</p>
<pre class="astro-code dark-plus" style="background-color:#1E1E1E;color:#D4D4D4; overflow-x: auto;" tabindex="0" data-language="html"><code><span class="line"><span style="color:#808080"><!</span><span style="color:#569CD6">DOCTYPE</span><span style="color:#9CDCFE"> html</span><span style="color:#808080">></span></span>
<span class="line"><span style="color:#808080"><</span><span style="color:#569CD6">html</span><span style="color:#808080">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">head</span><span style="color:#808080">></span></span>
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">title</span><span style="color:#808080">></span><span style="color:#D4D4D4">HTML script Tag Example</span><span style="color:#808080"></</span><span style="color:#569CD6">title</span><span style="color:#808080">></span></span>
<span class="line"><span style="color:#D4D4D4"> </span></span>
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">script</span><span style="color:#9CDCFE"> type</span><span style="color:#D4D4D4"> = </span><span style="color:#CE9178">"text/JavaScript"</span><span style="color:#808080">></span></span>
<span class="line"><span style="color:#569CD6"> function</span><span style="color:#DCDCAA"> Hello</span><span style="color:#D4D4D4">() {</span></span>
<span class="line"><span style="color:#DCDCAA"> alert</span><span style="color:#D4D4D4">(</span><span style="color:#CE9178">"Hello, World"</span><span style="color:#D4D4D4">);</span></span>
<span class="line"><span style="color:#D4D4D4"> }</span></span>
<span class="line"><span style="color:#808080"> </</span><span style="color:#569CD6">script</span><span style="color:#808080">></span></span>
<span class="line"><span style="color:#808080"> </</span><span style="color:#569CD6">head</span><span style="color:#808080">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">body</span><span style="color:#808080">></span></span>
<span class="line"><span style="color:#808080"> <</span><span style="color:#569CD6">input</span><span style="color:#9CDCFE"> type</span><span style="color:#D4D4D4"> = </span><span style="color:#CE9178">"button"</span><span style="color:#9CDCFE"> onclick</span><span style="color:#D4D4D4"> = </span><span style="color:#CE9178">"</span><span style="color:#DCDCAA">Hello</span><span style="color:#CE9178">();"</span><span style="color:#9CDCFE"> name</span><span style="color:#D4D4D4"> = </span><span style="color:#CE9178">"ok"</span><span style="color:#9CDCFE"> value</span><span style="color:#D4D4D4"> = </span><span style="color:#CE9178">"OK"</span><span style="color:#808080"> /></span></span>
<span class="line"><span style="color:#808080"> </</span><span style="color:#569CD6">body</span><span style="color:#808080">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#808080"></</span><span style="color:#569CD6">html</span><span style="color:#808080">></span></span></code></pre>
<p>Hope you enjoyed. Happy coding :)</p>
<p>Previous: <a href="https://www.codesnail.com/html-iframe/">#17 HTML iFrame</a></p>
<p>Next: <a href="https://www.codesnail.com/html-semantic-elements/">#19 HTML Semantic Elements</a></p>
</div></article></main><footer><div class="border-t-2 border-dashed border-skin-line py-4 mt-16"><nav class="footer-nav w-full flex justify-between items-start"><ul class="flex gap-4 text-sm mb-5 text-skin-base/70"><li><a href="/about" class="hover:text-skin-accent">About</a></li><li><a href="/contact" class="hover:text-skin-accent">Contact</a></li><li><a href="/privacy" class="hover:text-skin-accent">Privacy</a></li><li><a href="/disclaimer" class="hover:text-skin-accent">Disclaimer</a></li></ul><button id="theme-btn" class="focus-outline" title="Toggles light & dark" aria-label="auto" aria-live="polite"><svg xmlns="http://www.w3.org/2000/svg" id="moon-svg"><path d="M20.742 13.045a8.088 8.088 0 0 1-2.077.271c-2.135 0-4.14-.83-5.646-2.336a8.025 8.025 0 0 1-2.064-7.723A1 1 0 0 0 9.73 2.034a10.014 10.014 0 0 0-4.489 2.582c-3.898 3.898-3.898 10.243 0 14.143a9.937 9.937 0 0 0 7.072 2.93 9.93 9.93 0 0 0 7.07-2.929 10.007 10.007 0 0 0 2.583-4.491 1.001 1.001 0 0 0-1.224-1.224zm-2.772 4.301a7.947 7.947 0 0 1-5.656 2.343 7.953 7.953 0 0 1-5.658-2.344c-3.118-3.119-3.118-8.195 0-11.314a7.923 7.923 0 0 1 2.06-1.483 10.027 10.027 0 0 0 2.89 7.848 9.972 9.972 0 0 0 7.848 2.891 8.036 8.036 0 0 1-1.484 2.059z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" id="sun-svg"><path d="M6.993 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007S14.761 6.993 12 6.993 6.993 9.239 6.993 12zM12 8.993c1.658 0 3.007 1.349 3.007 3.007S13.658 15.007 12 15.007 8.993 13.658 8.993 12 10.342 8.993 12 8.993zM10.998 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2h-3zm17 0h3v2h-3zM4.219 18.363l2.12-2.122 1.415 1.414-2.12 2.122zM16.24 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.342 7.759 4.22 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path></svg></button></nav><div class="flex justify-between text-sm items-center text-skin-base/60"><span>© 2026 All rights reserved.</span></div></div></footer><script src="/scripts/toggle_theme.js"></script></body></html>