The “ section of an HTML document is often overlooked, treated as a mere container for metadata that sits quietly in the background. However, this seemingly unassuming section is a crucial element in web development, playing a pivotal role in search engine optimization (SEO), website performance, and user experience. Understanding how to effectively utilize the “ is not just about writing valid HTML; it’s about crafting a website that is discoverable, fast, and engaging. This tutorial will delve into the intricacies of the “ section, providing a comprehensive guide for beginners and intermediate developers alike. We’ll cover essential tags, best practices, common mistakes, and how to optimize your website for both users and search engines. Let’s begin by understanding its importance.
Why the “ Matters
The “ section contains information about the HTML document itself, rather than the content displayed on the page. This metadata is not directly visible to the user but profoundly impacts how search engines crawl, index, and rank your website. It also influences how browsers render your site, affecting loading times and overall performance. A well-structured “ ensures your website:
- Is easily discoverable by search engines.
- Loads quickly and efficiently.
- Provides a better user experience.
- Is accessible across different devices and browsers.
Ignoring the “ is like building a house without a solid foundation. It might look good on the surface, but it’s prone to collapse under the weight of poor SEO, slow loading times, and frustrated users. Let’s explore the key elements within the “ section and how to use them effectively.
Essential Tags in the “
Several tags are fundamental to the “ section. Each tag serves a specific purpose, contributing to the overall functionality and performance of your webpage. Let’s examine the most important ones:
``</h3>
<p>The `<title>` tag defines the title of your HTML document. This is the most crucial tag for SEO, as it’s the first thing users and search engines see. The title appears in the browser tab and is used as the title in search engine results pages (SERPs). A good title is concise, descriptive, and includes relevant keywords. Consider the following example:</p>
<pre><code class="language-html" data-line=""><head>
<title>Best Coffee Shops in Seattle - Cozy Cafes & Delicious Drinks</title>
</head>
</code></pre>
<p>In this example, the title clearly states the topic (coffee shops), the location (Seattle), and keywords (cozy cafes, delicious drinks). This helps both users and search engines understand the page’s content. Avoid generic titles like “Home” or “Page.” Instead, make each title unique and relevant to the specific page content. Keep titles under 60 characters to avoid truncation in search results.</p>
<h3>“ Tags</h3>
<p>`<meta>` tags provide metadata about the HTML document. These tags are essential for SEO, character encoding, and viewport configuration. Here are the most important `<meta>` tags:</p>
<h4>`<meta charset=”UTF-8″>`</h4>
<p>This tag specifies the character encoding for the HTML document. `UTF-8` is the standard encoding and supports a wide range of characters, including special characters and emojis. Always include this tag at the beginning of your “ section to ensure that your website displays text correctly across all browsers and devices.</p>
<pre><code class="language-html" data-line=""><head>
<meta charset="UTF-8">
</head>
</code></pre>
<h4>`<meta name=”description” content=”Your page description”>`</h4>
<p>The `description` meta tag provides a brief summary of the page’s content. This description often appears in search engine results pages (SERPs) below the title. A well-crafted description can significantly improve your click-through rate. Keep the description concise (around 150-160 characters) and include relevant keywords. Make sure the description accurately reflects the content of the page.</p>
<pre><code class="language-html" data-line=""><head>
<meta name="description" content="Discover the best coffee shops in Seattle! Find cozy cafes, delicious drinks, and the perfect spot for your next coffee break.">
</head>
</code></pre>
<h4>`<meta name=”keywords” content=”keyword1, keyword2, keyword3″>`</h4>
<p>While the `keywords` meta tag was once a significant factor in SEO, its importance has diminished. Search engines now rely more on content relevance and user experience. However, it can still be helpful to include relevant keywords, but avoid keyword stuffing (overusing keywords). Use a comma-separated list of keywords that accurately reflect your page’s content. Be thoughtful and selective when choosing these keywords.</p>
<pre><code class="language-html" data-line=""><head>
<meta name="keywords" content="coffee shops, Seattle, cafes, drinks, coffee">
</head>
</code></pre>
<h4>`<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>`</h4>
<p>This tag is crucial for responsive web design. It tells the browser how to scale the page to fit the device’s screen. The `width=device-width` sets the page width to the device’s screen width, and `initial-scale=1.0` sets the initial zoom level to 100%. Without this tag, your website might not display correctly on mobile devices.</p>
<pre><code class="language-html" data-line=""><head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
</code></pre>
<h3>“ Tags</h3>
<p>The `<link>` tag is used to link external resources to your HTML document, such as stylesheets (CSS), favicons, and other related files. It plays a critical role in styling and enhancing your website.</p>
<h4>Linking CSS Stylesheets</h4>
<p>The most common use of the `<link>` tag is to link to an external CSS stylesheet. This separates the styling from the HTML, making your code cleaner and easier to maintain. The `rel=”stylesheet”` attribute specifies the relationship between the HTML document and the linked resource. The `href` attribute specifies the path to the CSS file.</p>
<pre><code class="language-html" data-line=""><head>
<link rel="stylesheet" href="styles.css">
</head>
</code></pre>
<p>Place this tag within the “ section to ensure that the styles are loaded before the content is rendered. This prevents the </p>
<div class="wpzoom-social-sharing-buttons-bottom"><div class="wp-block-wpzoom-blocks-social-sharing align-left" style="text-align:left;"><ul class="social-sharing-icons"><li class="social-sharing-icon-li"><a class="social-sharing-icon social-sharing-icon-facebook" style="padding:5px 15px;margin:5px 5px;border-radius:50px;font-size:20px;color:#ffffff;background-color:#0866FF;" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwebdevfundamentals.com%2Fhtml-a-deep-dive-into-the-section-seo-performance-and-best-practices%2F&t=HTML%3A+A+Deep+Dive+into+the+%26%238220%3B+Section+%26%238211%3B+SEO%2C+Performance%2C+and+Best+Practices" title="Facebook" target="_blank" rel="noopener noreferrer" data-platform="facebook"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" style="fill:#ffffff;" aria-hidden="true" focusable="false"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" /></svg><span class="social-sharing-icon-label" style="font-size:16px;color:inherit;">Facebook</span></a></li><li class="social-sharing-icon-li"><a class="social-sharing-icon social-sharing-icon-x" style="padding:5px 15px;margin:5px 5px;border-radius:50px;font-size:20px;color:#ffffff;background-color:#000000;" href="https://x.com/intent/tweet?url=https%3A%2F%2Fwebdevfundamentals.com%2Fhtml-a-deep-dive-into-the-section-seo-performance-and-best-practices%2F&text=HTML%3A+A+Deep+Dive+into+the+%26%238220%3B+Section+%26%238211%3B+SEO%2C+Performance%2C+and+Best+Practices" title="Share on X" target="_blank" rel="noopener noreferrer" data-platform="x"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" style="fill:#ffffff;" aria-hidden="true" focusable="false"><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z" /></svg><span class="social-sharing-icon-label" style="font-size:16px;color:inherit;">Share on X</span></a></li><li class="social-sharing-icon-li"><a class="social-sharing-icon social-sharing-icon-threads" style="padding:5px 15px;margin:5px 5px;border-radius:50px;font-size:20px;color:#ffffff;background-color:#000000;" href="https://threads.net/intent/post?text=HTML%3A+A+Deep+Dive+into+the+%26%238220%3B+Section+%26%238211%3B+SEO%2C+Performance%2C+and+Best+Practices+https%3A%2F%2Fwebdevfundamentals.com%2Fhtml-a-deep-dive-into-the-section-seo-performance-and-best-practices%2F" title="Threads" target="_blank" rel="noopener noreferrer" data-platform="threads"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" style="fill:#ffffff;" aria-hidden="true" focusable="false"><path d="M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.845 1.205 8.6.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.783 3.631 2.698 6.54 2.717 2.623-.02 4.358-.631 5.8-2.045 1.647-1.613 1.618-3.593 1.09-4.798-.31-.71-.873-1.3-1.634-1.75-.192 1.352-.622 2.446-1.284 3.272-.886 1.102-2.14 1.704-3.73 1.79-1.202.065-2.361-.218-3.259-.801-1.063-.689-1.685-1.74-1.752-2.964-.065-1.19.408-2.285 1.33-3.082.88-.76 2.119-1.207 3.583-1.291a13.853 13.853 0 0 1 3.02.142c-.126-.742-.375-1.332-.75-1.757-.513-.586-1.308-.883-2.359-.89h-.029c-.844 0-1.992.232-2.721 1.32L7.734 7.847c.98-1.454 2.568-2.256 4.478-2.256h.044c3.194.02 5.097 1.975 5.287 5.388.108.046.216.094.321.142 1.49.7 2.58 1.761 3.154 3.07.797 1.82.871 4.79-1.548 7.158-1.85 1.81-4.094 2.628-7.277 2.65Zm1.003-11.69c-.242 0-.487.007-.739.021-1.836.103-2.98.946-2.916 2.143.067 1.256 1.452 1.839 2.784 1.767 1.224-.065 2.818-.543 3.086-3.71a10.5 10.5 0 0 0-2.215-.221z"/></svg><span class="social-sharing-icon-label" style="font-size:16px;color:inherit;">Threads</span></a></li><li class="social-sharing-icon-li"><a class="social-sharing-icon social-sharing-icon-linkedin" style="padding:5px 15px;margin:5px 5px;border-radius:50px;font-size:20px;color:#ffffff;background-color:#0966c2;" href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwebdevfundamentals.com%2Fhtml-a-deep-dive-into-the-section-seo-performance-and-best-practices%2F" title="LinkedIn" target="_blank" rel="noopener noreferrer" data-platform="linkedin"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" style="fill:#ffffff;" aria-hidden="true" focusable="false"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" /></svg><span class="social-sharing-icon-label" style="font-size:16px;color:inherit;">LinkedIn</span></a></li><li class="social-sharing-icon-li"><a class="social-sharing-icon social-sharing-icon-pinterest" style="padding:5px 15px;margin:5px 5px;border-radius:50px;font-size:20px;color:#ffffff;background-color:#E60023;" href="https://pinterest.com/pin/create/button/?url=https%3A%2F%2Fwebdevfundamentals.com%2Fhtml-a-deep-dive-into-the-section-seo-performance-and-best-practices%2F&media=&description=HTML%3A+A+Deep+Dive+into+the+%26%238220%3B+Section+%26%238211%3B+SEO%2C+Performance%2C+and+Best+Practices" title="Pinterest" target="_blank" rel="noopener noreferrer" data-platform="pinterest" data-pin-custom="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" style="fill:#ffffff;" aria-hidden="true" focusable="false"><path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z" /></svg><span class="social-sharing-icon-label" style="font-size:16px;color:inherit;">Pinterest</span></a></li><li class="social-sharing-icon-li"><a class="social-sharing-icon social-sharing-icon-reddit" style="padding:5px 15px;margin:5px 5px;border-radius:50px;font-size:20px;color:#ffffff;background-color:#FF4500;" href="https://www.reddit.com/submit?url=https%3A%2F%2Fwebdevfundamentals.com%2Fhtml-a-deep-dive-into-the-section-seo-performance-and-best-practices%2F&title=HTML%3A+A+Deep+Dive+into+the+%26%238220%3B+Section+%26%238211%3B+SEO%2C+Performance%2C+and+Best+Practices" title="Reddit" target="_blank" rel="noopener noreferrer" data-platform="reddit"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" style="fill:#ffffff;" aria-hidden="true" focusable="false"><path d="M22 12.068a2.184 2.184 0 0 0-2.186-2.186c-.592 0-1.13.233-1.524.609-1.505-1.075-3.566-1.774-5.86-1.864l1.004-4.695 3.261.699A1.56 1.56 0 1 0 18.255 3c-.61-.001-1.147.357-1.398.877l-3.638-.77a.382.382 0 0 0-.287.053.348.348 0 0 0-.161.251l-1.112 5.233c-2.33.072-4.426.77-5.95 1.864a2.201 2.201 0 0 0-1.523-.61 2.184 2.184 0 0 0-.896 4.176c-.036.215-.053.43-.053.663 0 3.37 3.924 6.111 8.763 6.111s8.763-2.724 8.763-6.11c0-.216-.017-.449-.053-.664A2.207 2.207 0 0 0 22 12.068Zm-15.018 1.56a1.56 1.56 0 0 1 3.118 0c0 .86-.699 1.558-1.559 1.558-.86.018-1.559-.699-1.559-1.559Zm8.728 4.139c-1.076 1.075-3.119 1.147-3.71 1.147-.61 0-2.652-.09-3.71-1.147a.4.4 0 0 1 0-.573.4.4 0 0 1 .574 0c.68.68 2.114.914 3.136.914 1.022 0 2.473-.233 3.136-.914a.4.4 0 0 1 .574 0 .436.436 0 0 1 0 .573Zm-.287-2.563a1.56 1.56 0 0 1 0-3.118c.86 0 1.56.699 1.56 1.56 0 .841-.7 1.558-1.56 1.558Z"></path></svg><span class="social-sharing-icon-label" style="font-size:16px;color:inherit;">Reddit</span></a></li><li class="social-sharing-icon-li"><a class="social-sharing-icon social-sharing-icon-telegram" style="padding:5px 15px;margin:5px 5px;border-radius:50px;font-size:20px;color:#ffffff;background-color:#0088cc;" href="https://t.me/share/url?url=https%3A%2F%2Fwebdevfundamentals.com%2Fhtml-a-deep-dive-into-the-section-seo-performance-and-best-practices%2F&text=HTML%3A+A+Deep+Dive+into+the+%26%238220%3B+Section+%26%238211%3B+SEO%2C+Performance%2C+and+Best+Practices" title="Telegram" target="_blank" rel="noopener noreferrer" data-platform="telegram"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" style="fill:#ffffff;" aria-hidden="true" focusable="false"><path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/></svg><span class="social-sharing-icon-label" style="font-size:16px;color:inherit;">Telegram</span></a></li><li class="social-sharing-icon-li"><a class="social-sharing-icon social-sharing-icon-whatsapp" style="padding:5px 15px;margin:5px 5px;border-radius:50px;font-size:20px;color:#ffffff;background-color:#25D366;" href="https://api.whatsapp.com/send?text=HTML%3A+A+Deep+Dive+into+the+%26%238220%3B+Section+%26%238211%3B+SEO%2C+Performance%2C+and+Best+Practices+https%3A%2F%2Fwebdevfundamentals.com%2Fhtml-a-deep-dive-into-the-section-seo-performance-and-best-practices%2F" title="WhatsApp" target="_blank" rel="noopener noreferrer" data-platform="whatsapp"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" style="fill:#ffffff;" aria-hidden="true" focusable="false"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" /></svg><span class="social-sharing-icon-label" style="font-size:16px;color:inherit;">WhatsApp</span></a></li><li class="social-sharing-icon-li"><a class="social-sharing-icon social-sharing-icon-bluesky" style="padding:5px 15px;margin:5px 5px;border-radius:50px;font-size:20px;color:#ffffff;background-color:#1DA1F2;" href="https://bsky.app/intent/compose?text=HTML%3A+A+Deep+Dive+into+the+%26%238220%3B+Section+%26%238211%3B+SEO%2C+Performance%2C+and+Best+Practices+https%3A%2F%2Fwebdevfundamentals.com%2Fhtml-a-deep-dive-into-the-section-seo-performance-and-best-practices%2F" title="Bluesky" target="_blank" rel="noopener noreferrer" data-platform="bluesky"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" style="fill:#ffffff;" aria-hidden="true" focusable="false"><path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z"/></svg><span class="social-sharing-icon-label" style="font-size:16px;color:inherit;">Bluesky</span></a></li><li class="social-sharing-icon-li"><a class="social-sharing-icon social-sharing-icon-email" style="padding:5px 15px;margin:5px 5px;border-radius:50px;font-size:20px;color:#ffffff;background-color:#333333;" href="mailto:?subject=HTML%3A+A+Deep+Dive+into+the+%26%238220%3B+Section+%26%238211%3B+SEO%2C+Performance%2C+and+Best+Practices&body=https%3A%2F%2Fwebdevfundamentals.com%2Fhtml-a-deep-dive-into-the-section-seo-performance-and-best-practices%2F" title="Email" target="_blank" rel="noopener noreferrer" data-platform="email"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" style="fill:#ffffff;" aria-hidden="true" focusable="false"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-.4 4.25l-7.07 4.42c-.32.2-.74.2-1.06 0L4.4 8.25c-.25-.16-.4-.43-.4-.72 0-.67.73-1.07 1.3-.72L12 11l6.7-4.19c.57-.35 1.3.05 1.3.72 0 .29-.15.56-.4.72z" /></svg><span class="social-sharing-icon-label" style="font-size:16px;color:inherit;">Email</span></a></li><li class="social-sharing-icon-li"><a class="social-sharing-icon social-sharing-icon-copy-link" style="padding:5px 15px;margin:5px 5px;border-radius:50px;font-size:20px;color:#ffffff;background-color:#333333;" href="#copy-link" title="Copy Link" data-platform="copy-link"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" style="fill:#ffffff;" aria-hidden="true" focusable="false"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" /></svg><span class="social-sharing-icon-label" style="font-size:16px;color:inherit;">Copy Link</span></a></li><li class="social-sharing-icon-li"><a class="social-sharing-icon social-sharing-icon-print" style="padding:5px 15px;margin:5px 5px;border-radius:50px;font-size:20px;color:#ffffff;background-color:#333333;" href="#print" title="Print" data-platform="print"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" style="fill:#ffffff;" aria-hidden="true" focusable="false"><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z" /></svg><span class="social-sharing-icon-label" style="font-size:16px;color:inherit;">Print</span></a></li></ul><script>
document.addEventListener("DOMContentLoaded", function() {
var copyLinks = document.querySelectorAll("a[data-platform='copy-link']");
copyLinks.forEach(function(link) {
if (link.hasAttribute("data-listener-added")) return;
link.setAttribute("data-listener-added", "true");
link.addEventListener("click", function(e) {
e.preventDefault();
var tempInput = document.createElement("input");
tempInput.value = window.location.href;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand("copy");
document.body.removeChild(tempInput);
var originalText = this.querySelector(".social-sharing-icon-label")?.textContent || "";
var originalTitle = this.getAttribute("title");
var originalIcon = this.querySelector("svg").outerHTML;
// Show success feedback
this.setAttribute("title", "Copied!");
this.classList.add("copied");
if (this.querySelector(".social-sharing-icon-label")) {
this.querySelector(".social-sharing-icon-label").textContent = "Copied!";
} else {
this.querySelector("svg").outerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" style="fill:#ffffff;" aria-hidden="true" focusable="false"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" /></svg>';
}
var self = this;
setTimeout(function() {
self.setAttribute("title", originalTitle);
self.classList.remove("copied");
if (self.querySelector(".social-sharing-icon-label")) {
self.querySelector(".social-sharing-icon-label").textContent = originalText;
} else {
self.querySelector("svg").outerHTML = originalIcon;
}
}, 2000);
});
});
});
</script><script>
document.addEventListener("DOMContentLoaded", function() {
var printLinks = document.querySelectorAll("a[data-platform='print']");
printLinks.forEach(function(link) {
if (link.hasAttribute("data-listener-added")) return;
link.setAttribute("data-listener-added", "true");
link.addEventListener("click", function(e) {
e.preventDefault();
window.print();
});
});
});
</script></div></div></div>
<div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)">
<div class="taxonomy-post_tag is-style-post-terms-1 is-style-post-terms-1--2 wp-block-post-terms"><a href="https://webdevfundamentals.com/tag/best-practices/" rel="tag">best practices</a><span class="wp-block-post-terms__separator"> </span><a href="https://webdevfundamentals.com/tag/head/" rel="tag">head</a><span class="wp-block-post-terms__separator"> </span><a href="https://webdevfundamentals.com/tag/html/" rel="tag">HTML</a><span class="wp-block-post-terms__separator"> </span><a href="https://webdevfundamentals.com/tag/meta-description/" rel="tag">meta description</a><span class="wp-block-post-terms__separator"> </span><a href="https://webdevfundamentals.com/tag/metadata/" rel="tag">metadata</a><span class="wp-block-post-terms__separator"> </span><a href="https://webdevfundamentals.com/tag/seo/" rel="tag">SEO</a><span class="wp-block-post-terms__separator"> </span><a href="https://webdevfundamentals.com/tag/title-tag/" rel="tag">title tag</a><span class="wp-block-post-terms__separator"> </span><a href="https://webdevfundamentals.com/tag/tutorial/" rel="tag">Tutorial</a><span class="wp-block-post-terms__separator"> </span><a href="https://webdevfundamentals.com/tag/viewport/" rel="tag">viewport</a><span class="wp-block-post-terms__separator"> </span><a href="https://webdevfundamentals.com/tag/web-design/" rel="tag">web design</a><span class="wp-block-post-terms__separator"> </span><a href="https://webdevfundamentals.com/tag/web-development/" rel="tag">web development</a></div>
</div>
<div class="wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow" style="margin-top:var(--wp--preset--spacing--60);margin-bottom:var(--wp--preset--spacing--60);">
<nav class="wp-block-group alignwide is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-9b36172e wp-block-group-is-layout-flex" aria-label="Post navigation" style="border-top-color:var(--wp--preset--color--accent-6);border-top-width:1px;padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40)">
<div class="post-navigation-link-previous wp-block-post-navigation-link"><span class="wp-block-post-navigation-link__arrow-previous is-arrow-arrow" aria-hidden="true">←</span><a href="https://webdevfundamentals.com/html-tables-a-comprehensive-guide-for-data-presentation-and-web-design/" rel="prev">HTML Tables: A Comprehensive Guide for Data Presentation and Web Design</a></div>
<div class="post-navigation-link-next wp-block-post-navigation-link"><a href="https://webdevfundamentals.com/html-forms-advanced-techniques-for-enhanced-user-experience-and-validation/" rel="next">HTML Forms: Advanced Techniques for Enhanced User Experience and Validation</a><span class="wp-block-post-navigation-link__arrow-next is-arrow-arrow" aria-hidden="true">→</span></div>
</nav>
</div>
</div>
<div class="wp-block-group alignwide has-global-padding is-layout-constrained wp-block-group-is-layout-constrained" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)">
<h2 class="wp-block-heading alignwide has-small-font-size" style="font-style:normal;font-weight:700;letter-spacing:1.4px;text-transform:uppercase">More posts</h2>
<div class="wp-block-query alignwide is-layout-flow wp-block-query-is-layout-flow">
<ul class="alignfull wp-block-post-template is-layout-flow wp-container-core-post-template-is-layout-3ee800f6 wp-block-post-template-is-layout-flow"><li class="wp-block-post post-1403 post type-post status-publish format-standard hentry category-web-development">
<div class="wp-block-group alignfull is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-154222c2 wp-block-group-is-layout-flex" style="border-bottom-color:var(--wp--preset--color--accent-6);border-bottom-width:1px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)">
<h3 class="wp-block-post-title has-large-font-size"><a href="https://webdevfundamentals.com/svelte-5-runes-the-definitive-guide-to-modern-reactivity/" target="_self" >Svelte 5 Runes: The Definitive Guide to Modern Reactivity</a></h3>
<div class="has-text-align-right wp-block-post-date"><time datetime="2026-04-04T11:47:59+00:00"><a href="https://webdevfundamentals.com/svelte-5-runes-the-definitive-guide-to-modern-reactivity/">April 4, 2026</a></time></div>
</div>
</li><li class="wp-block-post post-1402 post type-post status-publish format-standard hentry category-web-development">
<div class="wp-block-group alignfull is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-154222c2 wp-block-group-is-layout-flex" style="border-bottom-color:var(--wp--preset--color--accent-6);border-bottom-width:1px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)">
<h3 class="wp-block-post-title has-large-font-size"><a href="https://webdevfundamentals.com/mastering-svelte-actions-the-ultimate-guide-to-custom-dom-logic/" target="_self" >Mastering Svelte Actions: The Ultimate Guide to Custom DOM Logic</a></h3>
<div class="has-text-align-right wp-block-post-date"><time datetime="2026-04-04T11:42:58+00:00"><a href="https://webdevfundamentals.com/mastering-svelte-actions-the-ultimate-guide-to-custom-dom-logic/">April 4, 2026</a></time></div>
</div>
</li><li class="wp-block-post post-1401 post type-post status-publish format-standard hentry category-web-development">
<div class="wp-block-group alignfull is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-154222c2 wp-block-group-is-layout-flex" style="border-bottom-color:var(--wp--preset--color--accent-6);border-bottom-width:1px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)">
<h3 class="wp-block-post-title has-large-font-size"><a href="https://webdevfundamentals.com/mastering-svelte-5-runes-the-future-of-reactive-state-management/" target="_self" >Mastering Svelte 5 Runes: The Future of Reactive State Management</a></h3>
<div class="has-text-align-right wp-block-post-date"><time datetime="2026-04-04T11:38:03+00:00"><a href="https://webdevfundamentals.com/mastering-svelte-5-runes-the-future-of-reactive-state-management/">April 4, 2026</a></time></div>
</div>
</li><li class="wp-block-post post-1398 post type-post status-publish format-standard hentry category-web-development">
<div class="wp-block-group alignfull is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-154222c2 wp-block-group-is-layout-flex" style="border-bottom-color:var(--wp--preset--color--accent-6);border-bottom-width:1px;padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)">
<h3 class="wp-block-post-title has-large-font-size"><a href="https://webdevfundamentals.com/mastering-svelte-stores-the-ultimate-guide-to-state-management/" target="_self" >Mastering Svelte Stores: The Ultimate Guide to State Management</a></h3>
<div class="has-text-align-right wp-block-post-date"><time datetime="2026-04-04T11:28:00+00:00"><a href="https://webdevfundamentals.com/mastering-svelte-stores-the-ultimate-guide-to-state-management/">April 4, 2026</a></time></div>
</div>
</li></ul>
</div>
</div>
</main>
<footer class="wp-block-template-part">
<div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--50)">
<div class="wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow"><div class="is-default-size wp-block-site-logo"><a href="https://webdevfundamentals.com/" class="custom-logo-link" rel="home"><img width="390" height="260" src="https://webdevfundamentals.com/wp-content/uploads/2026/02/ChatGPT_Image_Feb_12__2026__08_35_12_PM-removebg-preview-edited.png" class="custom-logo" alt="WebDevFundamentals Site Logo" decoding="async" fetchpriority="high" srcset="https://webdevfundamentals.com/wp-content/uploads/2026/02/ChatGPT_Image_Feb_12__2026__08_35_12_PM-removebg-preview-edited.png 390w, https://webdevfundamentals.com/wp-content/uploads/2026/02/ChatGPT_Image_Feb_12__2026__08_35_12_PM-removebg-preview-edited-300x200.png 300w" sizes="(max-width: 390px) 100vw, 390px" /></a></div>
<div class="wp-block-group alignfull is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-e5edad21 wp-block-group-is-layout-flex">
<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow" style="flex-basis:100%"><p class="wp-block-site-tagline">From Fundamentals to Real-World Web Apps.</p></div>
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<div style="height:var(--wp--preset--spacing--40);width:0px" aria-hidden="true" class="wp-block-spacer"></div>
</div>
</div>
</div>
<div class="wp-block-group alignfull is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-91e87306 wp-block-group-is-layout-flex">
<p class="has-small-font-size">© 2026 • WebDevFundamentals</p>
<p class="has-small-font-size">Inquiries: <strong><a href="mailto:admin@codingeasypeasy.com">admin@webdevfundamentals.com</a></strong></p>
</div>
</div>
</div>
</footer>
</div>
<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/twentytwentyfive/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<div class="wp-dark-mode-floating-switch wp-dark-mode-ignore wp-dark-mode-animation wp-dark-mode-animation-bounce " style="right: 10px; bottom: 10px;">
<!-- call to action -->
<div class="wp-dark-mode-switch wp-dark-mode-ignore " tabindex="0" role="switch" aria-label="Dark Mode Toggle" aria-checked="false" data-style="1" data-size="1" data-text-light="" data-text-dark="" data-icon-light="" data-icon-dark=""></div></div><script type="module" src="https://webdevfundamentals.com/wp-includes/js/dist/script-modules/block-library/navigation/view.min.js?ver=b0f909c3ec791c383210" id="@wordpress/block-library/navigation/view-js-module" fetchpriority="low" data-wp-router-options="{"loadOnClientNavigation":true}"></script>
<!-- Koko Analytics v2.3.4 - https://www.kokoanalytics.com/ -->
<script>
(()=>{var e=window.koko_analytics;e.trackPageview=function(i,o){if(/bot|crawl|spider|seo|lighthouse|facebookexternalhit|preview/i.test(navigator.userAgent)||window._phantom||window.__nightmare||window.navigator.webdriver||window.Cypress){console.debug("Koko Analytics: Ignoring call to trackPageview because user agent is a bot or this is a headless browser.");return}navigator.sendBeacon(e.url,new URLSearchParams({action:"koko_analytics_collect",pa:i,po:o,r:document.referrer.indexOf(e.site_url)==0?"":document.referrer,m:e.use_cookie?"c":e.method[0]}))};var t=!1,a=()=>{!t&&document.visibilityState==="visible"&&(e.trackPageview(e.path,e.post_id),t=!0)};document.addEventListener("visibilitychange",a);window.addEventListener("load",a);})();
</script>
<script>document.addEventListener("DOMContentLoaded", function() {
// ---------- CONFIG ----------
const MONETAG_URL = "https://omg10.com/4/10781348";
const STORAGE_KEY = "monetagLastShown";
const COOLDOWN = 24*60*60*1000; // 24 hours
// ---------- CREATE MODAL HTML ----------
const modalHTML = `
<div id="monetagModal" style="
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
visibility:hidden;
opacity:0;
transition: opacity 0.3s ease;
">
<div style="
background:#fff;
padding:25px;
border-radius:10px;
max-width:400px;
text-align:center;
box-shadow:0 4px 15px rgba(0,0,0,0.3);
">
<h2>Welcome! 👋</h2>
<p>Thanks for visiting! Before you continue, click the button below to unlock exclusive content and surprises just for you.</p>
<button class="monetagBtn" style="
padding:10px 20px;
background:#dc3545;
color:#fff;
border:none;
border-radius:5px;
cursor:pointer;
margin-top:15px;
">Not Now</button>
<button class="monetagBtn" style="
padding:10px 20px;
background:#ff5722;
color:#fff;
border:none;
border-radius:5px;
cursor:pointer;
margin-top:15px;
">Continue</button>
</div>
</div>
`;
document.body.insertAdjacentHTML("beforeend", modalHTML);
// ---------- GET ELEMENTS ----------
const modal = document.getElementById("monetagModal");
const buttons = document.querySelectorAll(".monetagBtn");
// ---------- SHOW MODAL ON PAGE LOAD ----------
window.addEventListener("load", function(){
modal.style.visibility = "visible";
modal.style.opacity = "1";
});
// ---------- CHECK 24H COOLDOWN ----------
function canShow() {
const last = localStorage.getItem(STORAGE_KEY);
return !last || (Date.now() - parseInt(last)) > COOLDOWN;
}
// ---------- TRIGGER MONETAG ----------
buttons.forEach(btn => {
btn.addEventListener("click", function(){
if(canShow()){
localStorage.setItem(STORAGE_KEY, Date.now());
window.open(MONETAG_URL,"_blank");
}
// hide modal after click
modal.style.opacity = "0";
setTimeout(()=>{ modal.style.visibility="hidden"; },300);
});
});
});</script><script id="wp-block-template-skip-link-js-after">
( function() {
var skipLinkTarget = document.querySelector( 'main' ),
sibling,
skipLinkTargetID,
skipLink;
// Early exit if a skip-link target can't be located.
if ( ! skipLinkTarget ) {
return;
}
/*
* Get the site wrapper.
* The skip-link will be injected in the beginning of it.
*/
sibling = document.querySelector( '.wp-site-blocks' );
// Early exit if the root element was not found.
if ( ! sibling ) {
return;
}
// Get the skip-link target's ID, and generate one if it doesn't exist.
skipLinkTargetID = skipLinkTarget.id;
if ( ! skipLinkTargetID ) {
skipLinkTargetID = 'wp--skip-link--target';
skipLinkTarget.id = skipLinkTargetID;
}
// Create the skip link.
skipLink = document.createElement( 'a' );
skipLink.classList.add( 'skip-link', 'screen-reader-text' );
skipLink.id = 'wp-skip-link';
skipLink.href = '#' + skipLinkTargetID;
skipLink.innerText = 'Skip to content';
// Inject the skip link.
sibling.parentElement.insertBefore( skipLink, sibling );
}() );
//# sourceURL=wp-block-template-skip-link-js-after
</script>
<script src="https://webdevfundamentals.com/wp-content/plugins/prismatic/lib/prism/js/prism-core.js?ver=3.7.5" id="prismatic-prism-js"></script>
<script src="https://webdevfundamentals.com/wp-content/plugins/prismatic/lib/prism/js/plugin-toolbar.js?ver=3.7.5" id="prismatic-prism-toolbar-js"></script>
<script src="https://webdevfundamentals.com/wp-content/plugins/prismatic/lib/prism/js/plugin-line-highlight.js?ver=3.7.5" id="prismatic-prism-line-highlight-js"></script>
<script src="https://webdevfundamentals.com/wp-content/plugins/prismatic/lib/prism/js/plugin-line-numbers.js?ver=3.7.5" id="prismatic-prism-line-numbers-js"></script>
<script src="https://webdevfundamentals.com/wp-content/plugins/prismatic/lib/prism/js/plugin-copy-clipboard.js?ver=3.7.5" id="prismatic-copy-clipboard-js"></script>
<script src="https://webdevfundamentals.com/wp-content/plugins/prismatic/lib/prism/js/plugin-command-line.js?ver=3.7.5" id="prismatic-command-line-js"></script>
<script src="https://webdevfundamentals.com/wp-content/plugins/social-icons-widget-by-wpzoom/assets/js/social-icons-widget-frontend.js?ver=1775977816" id="zoom-social-icons-widget-frontend-js"></script>
<script id="wp-emoji-settings" type="application/json">
{"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://webdevfundamentals.com/wp-includes/js/wp-emoji-release.min.js?ver=6.9.4"}}
</script>
<script type="module">
/*! This file is auto-generated */
const a=JSON.parse(document.getElementById("wp-emoji-settings").textContent),o=(window._wpemojiSettings=a,"wpEmojiSettingsSupports"),s=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const a=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===a[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,a){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!a(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,a){let r;const o=(r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),s=(o.textBaseline="top",o.font="600 32px Arial",{});return e.forEach(e=>{s[e]=t(o,e,n,a)}),s}function r(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}a.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),c.toString(),p.toString()].join(",")+"));",a=new Blob([e],{type:"text/javascript"});const r=new Worker(URL.createObjectURL(a),{name:"wpTestEmojiSupports"});return void(r.onmessage=e=>{i(n=e.data),r.terminate(),t(n)})}catch(e){}i(n=f(s,u,c,p))}t(n)}).then(e=>{for(const n in e)a.supports[n]=e[n],a.supports.everything=a.supports.everything&&a.supports[n],"flag"!==n&&(a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&a.supports[n]);var t;a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&!a.supports.flag,a.supports.everything||((t=a.source||{}).concatemoji?r(t.concatemoji):t.wpemoji&&t.twemoji&&(r(t.twemoji),r(t.wpemoji)))});
//# sourceURL=https://webdevfundamentals.com/wp-includes/js/wp-emoji-loader.min.js
</script>
<script>
(function() {
function applyScrollbarStyles() {
if (!document.documentElement.hasAttribute('data-wp-dark-mode-active')) {
document.documentElement.style.removeProperty('scrollbar-color');
return;
}
document.documentElement.style.setProperty('scrollbar-color', '#2E334D #1D2033', 'important');
// Find and remove dark mode engine scrollbar styles.
var styles = document.querySelectorAll('style');
styles.forEach(function(style) {
if (style.id === 'wp-dark-mode-scrollbar-custom') return;
if (style.textContent && style.textContent.indexOf('::-webkit-scrollbar') !== -1 && style.textContent.indexOf('#1D2033') === -1) {
style.textContent = style.textContent.replace(/::-webkit-scrollbar[^}]*\{[^}]*\}/g, '');
style.textContent = style.textContent.replace(/::-webkit-scrollbar-track[^}]*\{[^}]*\}/g, '');
style.textContent = style.textContent.replace(/::-webkit-scrollbar-thumb[^{]*\{[^}]*\}/g, '');
style.textContent = style.textContent.replace(/::-webkit-scrollbar-corner[^}]*\{[^}]*\}/g, '');
}
});
// Inject our styles.
var existing = document.getElementById('wp-dark-mode-scrollbar-custom');
if (!existing) {
var customStyle = document.createElement('style');
customStyle.id = 'wp-dark-mode-scrollbar-custom';
customStyle.textContent =
'::-webkit-scrollbar { width: 12px !important; height: 12px !important; background: #1D2033 !important; }' +
'::-webkit-scrollbar-track { background: #1D2033 !important; }' +
'::-webkit-scrollbar-thumb { background: #2E334D !important; border-radius: 6px; }' +
'::-webkit-scrollbar-thumb:hover { filter: brightness(1.2); }' +
'::-webkit-scrollbar-corner { background: #1D2033 !important; }';
document.body.appendChild(customStyle);
}
}
// Listen for dark mode changes.
document.addEventListener('wp_dark_mode', function(e) {
setTimeout(applyScrollbarStyles, 100);
setTimeout(applyScrollbarStyles, 500);
setTimeout(applyScrollbarStyles, 1000);
});
// Observe attribute changes.
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.attributeName === 'data-wp-dark-mode-active') {
var existing = document.getElementById('wp-dark-mode-scrollbar-custom');
if (existing && !document.documentElement.hasAttribute('data-wp-dark-mode-active')) {
existing.remove();
}
setTimeout(applyScrollbarStyles, 100);
setTimeout(applyScrollbarStyles, 500);
}
});
});
observer.observe(document.documentElement, { attributes: true });
// Initial apply.
setTimeout(applyScrollbarStyles, 100);
setTimeout(applyScrollbarStyles, 500);
setTimeout(applyScrollbarStyles, 1000);
})();
</script>
</body>
</html>
