Tips and Tricks of HTML (Fun !!)

Interesting tips and tricks about HTML that can help you become more familiar.

Lesson #1

Takes about 7.25 minutes to read.

1. Hidden Easter Eggs with `title` Attribute:

You can add secret messages or tips using the title attribute on any HTML element. When users hover over the element, the message appears as a tooltip.

<p title="You're awesome!">Hover over this text to reveal a secret.</p>

2. Marquee Madness (deprecated but fun!):

The <marquee> tag, though deprecated, is a nostalgic way to create scrolling text across the screen. It’s a fun trick to know, even if you shouldn’t use it in modern web development.

<marquee>Look at me scrolling!</marquee>

3. Using Emojis as HTML Elements:

You can use emojis directly in HTML to add a playful touch to your content. Just copy and paste them into your HTML code.

<h1>Welcome to my blog! 🚀</h1>

4. Self-Closing Tags:

HTML tags like <img>, <br>, and <hr> are self-closing, meaning they don’t need a closing tag. Just remember to include the slash / at the end if you're working with XHTML.

<img src="image.jpg" alt="Cool Image" />

5. Invisible Commenting:

You can use HTML comments to hide content or notes within your code that won’t show up on the page but are visible in the source code.

<!-- This is a comment. It won't appear on the webpage. -->

6. Making Text Blink (deprecated but amusing):

The <blink> tag was once used to make text blink. It’s deprecated now, but it’s a quirky piece of HTML history.

<blink>This text will blink (in old browsers)!</blink>

7. The Power of ` `:

The   entity is a non-breaking space. It’s handy when you want to insert extra spaces between words or elements without collapsing them.

<p>This sentence has&nbsp;&nbsp;&nbsp;extra spaces.</p>

8. Create a Favicon:

Adding a favicon to your website is easy with a simple <link> tag in the <head> section. It’s a small icon that appears in the browser tab.

<link rel="icon" href="favicon.ico" type="image/x-icon">

9. Clickable Whole Element (Using `a` and `div`):

You can wrap an entire div inside an <a> tag to make the whole section clickable, not just the text.

<a href="https://ucode-blog.vercel.app">
  <div className="clickable-section">
    <h2>Visit UCodeBlog</h2>
  </div>
</a>

10. CSS Inside HTML:

While CSS is best kept separate, you can style elements directly in HTML using the style attribute.

<p style="color:blue; font-size:20px;">This text is blue and large!</p>

11. Add Accessibility with `alt` Text:

Always include alt attributes for images. It’s crucial for accessibility and helps search engines understand the content of your images.

<img src="code.jpg" alt="Coding on a laptop">

12. Centering Elements (Old School):

The <center> tag was used to center text and elements, though it’s no longer recommended. Today, use CSS like text-align: center;.

<center>This text is centered!</center>

13. The `meta` Refresh Trick:

You can automatically refresh a page using the meta refresh tag. It's not common, but an interesting trick to know.

<meta http-equiv="refresh" content="5">

14. Using `<` and `>`:

Use < and > to display literal < and > symbols in your HTML without them being interpreted as tags.

<p>Use &lt;html&gt; to start your HTML document.</p>

15. Responsive Images with `srcset`:

Use srcset in the <img> tag to load different images based on the screen size, making your site more responsive.

<img src="small.jpg" srcset="medium.jpg 768w, large.jpg 1200w" alt="Responsive Image">

16. Fun with `blockquote`:

The <blockquote> tag indents text for quotes, often making it look fancier by default in browsers.

<blockquote>
  "Coding is the closest thing we have to a superpower."
</blockquote>

17. `<dialog>` Element for Modals:

The <dialog> element is a native HTML tag for creating modals or dialog boxes. It can be shown or hidden using JavaScript.

<dialog id="myDialog">
  <p>This is a dialog box!</p>
  <button onclick="document.getElementById('myDialog').close()">Close</button>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">Open Dialog</button>

18. Native Lazy Loading with `loading` Attribute:

The loading attribute for images allows you to specify lazy loading, which defers off-screen images from loading until the user scrolls near them.

<img src="large-image.jpg" loading="lazy" alt="A large image that loads only when needed">

19. Input Types for Enhanced Forms:

HTML5 introduced new input types such as date, email, tel, url, and range, providing better form validation and user experience.

<input type="date" name="birthday">
<input type="email" name="email">
<input type="tel" name="phone">

20. **Custom Data Attributes (`data-*`):**

Use data-* attributes to store extra information on HTML elements without impacting layout or performance. These attributes are easily accessible via JavaScript.

<div data-user-id="12345">User Info</div>

21. Content Security with `rel="noopener"`:

When using <a> tags with target="_blank", always include rel="noopener" to prevent the new page from gaining access to the original page’s window object.

<a href="https://example.com" target="_blank" rel="noopener">Visit Example</a>

22. HTML Imports with `<link rel="import">` (Deprecated but Interesting):

Though deprecated, HTML imports were once used to include external HTML documents in a page. Modern alternatives include <iframe> or JavaScript-based solutions like fetch or import.

<!-- Deprecated: <link rel="import" href="component.html"> -->

23. The `<picture>` Element for Art Direction:

Use the <picture> element to serve different images based on device characteristics like screen width or resolution.

<picture>
  <source srcset="image-wide.jpg" media="(min-width: 800px)">
  <source srcset="image-small.jpg" media="(max-width: 799px)">
  <img src="fallback.jpg" alt="Art direction for different screens">
</picture>

24. Using `autocomplete` Attribute:

The autocomplete attribute on form fields helps users by providing suggestions based on previously entered values. You can also use it to optimize for specific types of data.

<input type="text" name="name" autocomplete="name">
<input type="email" name="email" autocomplete="email">

25. Native HTML Drag-and-Drop:

HTML5 allows elements to be draggable using the draggable attribute, combined with JavaScript to handle the drag-and-drop events.

<div draggable="true" ondragstart="event.dataTransfer.setData('text', 'This text is dragged')">Drag me!</div>

26. The `<template>` Element:

The <template> element is used to define reusable HTML fragments that are not rendered to the DOM until called by JavaScript.

<template id="my-template">
  <div class="template-content">This content is in a template!</div>
</template>

27. Native Custom Elements with Web Components:

HTML now supports creating custom elements using Web Components. Define custom tags with JavaScript to encapsulate reusable code.

<my-custom-element></my-custom-element>
<script>
  class MyCustomElement extends HTMLElement {
    constructor() {
      super();
      this.innerHTML = '<p>Hello from a custom element!</p>';
    }
  }
  customElements.define('my-custom-element', MyCustomElement);
</script>

28. Use of `inputmode` for Enhanced Input UX:

The inputmode attribute helps to specify the type of input that should be used for different fields on mobile devices, improving the user experience.

<input type="text" inputmode="numeric" pattern="[0-9]*" placeholder="Enter a number">

29. Fullscreen API with `requestFullscreen`:

The Fullscreen API allows you to make an element go full-screen programmatically, enhancing user engagement for media or presentations.

<video id="myVideo" src="movie.mp4"></video>
<button onclick="document.getElementById('myVideo').requestFullscreen()">Go Fullscreen</button>

30. Semantic HTML for Better Accessibility:

Using semantic HTML elements like <header>, <footer>, <article>, <nav>, and <aside> improves both SEO and accessibility.

<header>
  <nav>Navigation bar content</nav>
</header>
<article>
  <h1>Article Title</h1>
  <p>Article content goes here.</p>
</article>
<footer>Footer content here</footer>