10 HTML Examples to Show the Current Year Dynamically

10 HTML Examples to Show the Current Year Dynamically

Discover 10 practical ways to display the current year dynamically using HTML and JavaScript. These techniques are perfect for websites, footers, and copyright notices.

Displaying the current year dynamically on a website is a simple but powerful trick. It helps keep your content updated automatically especially useful for copyright lines, footers, or timestamps without needing manual edits each year.

Here are 10 different examples using HTML, JavaScript, and even WordPress/PHP to show the current year.

1. Basic HTML + JavaScript Span

<span id="current-year"></span>
<script>
  document.getElementById("current-year").textContent = new Date().getFullYear();
</script>

✅ Simple and works anywhere in the body of an HTML page.

2. In a Footer Tag

<footer>
  &copy; <span id="current-year"></span> YourSite.com
  <script>
    document.getElementById("current-year").textContent = new Date().getFullYear();
  </script>
</footer>

✅ Perfect for dynamic copyright notices.

3. Using document.write()

&copy; <script>document.write(new Date().getFullYear());</script> YourBrand

⚠️ Quick and dirty, but not recommended for modern SEO or analytics-driven pages.

4. JavaScript with innerHTML

<div id="year-display"></div>
<script>
  document.getElementById("year-display").innerHTML = new Date().getFullYear();
</script>

✅ Similar to .textContent, but more flexible for injecting HTML around the year.

5. Automatically Updating Meta Description (Advanced SEO Use)

<script>
  document.querySelector('meta[name="description"]').setAttribute("content", "Updated for " + new Date().getFullYear());
</script>

✅ Advanced use for dynamic metadata, useful in some dynamic rendering environments.

6. Inline PHP for WordPress Themes

&copy; <?php echo date('Y'); ?> YourSiteName

✅ Recommended for WordPress themes and custom templates.

7. WordPress Shortcode in functions.php

function show_current_year() {
    return date('Y');
}
add_shortcode('year', 'show_current_year');

Then use in any post/page:

© [year] YourSite.com

✅ Elegant way for WordPress users to insert dynamic years sitewide.

8. ES6 Template Literal (Modern JS)

<script>
  const year = `${new Date().getFullYear()}`;
  document.body.insertAdjacentHTML('beforeend', `<footer>&copy; ${year} DynamicBrand</footer>`);
</script>

✅ Useful in apps or SPAs where DOM manipulation is required.

9. jQuery Version

<div id="year-jq"></div>
<script>
  $('#year-jq').text(new Date().getFullYear());
</script>

⚠️ Only use if your project already loads jQuery.

10. React JSX Snippet

<footer>&copy; {new Date().getFullYear()} MyReactApp</footer>

✅ Use this in React-based projects or headless WordPress frontends.

Why This Matters

• SEO-Friendly: Keeps your site appearing fresh.
• Maintenance-Free: No need to update the year manually.
• Professional: Visitors expect up-to-date footers and copyright lines.

Whether you’re a developer, blogger, or agency owner, these snippets are essential tools in your web development toolbox.

📩 Do you have questions or suggestions? Leave a comment or contact us!

🏷️ Tags: html, javascript, wordpress, php, shortcode, web development, seo, footer, react, jquery