Tricks and Tips in HTML that can help you enhance your web development skills and create more efficient and visually appealing websites:
90 days Became a Front-end developer
- Semantic HTML: Use appropriate HTML5 semantic elements (e.g.,
<header>
,<nav>
,<main>
,<footer>
) for better accessibility and SEO. - Meta Tags: Optimize meta tags (e.g.,
<title>
,<meta charset="utf-8">
,<meta name="description" content="...">
) for SEO and social media sharing. - Favicons: Add a favicon to your website for branding and better user experience.
- Mobile Meta Tags: Include viewport and other mobile meta tags for responsive design on mobile devices.
- Meta Refresh: Use
<meta http-equiv="refresh" content="5; url=https://example.com/">
to redirect users after a certain time. - Custom Data Attributes: Use
data-*
attributes to store custom data on HTML elements. - HTML Entities: Use HTML entities for special characters (e.g.,
,—
) to ensure proper rendering. - Symbol Icons: Use symbol icons (e.g., Font Awesome, Material Icons) instead of image icons for better performance and scalability.
- Picture Element: Use the
<picture>
element with multiple sources to serve different images based on screen size and resolution. - Video and Audio: Embed video and audio elements for multimedia content.
- Lazy Loading: Implement lazy loading for images and iframes to improve page load times.
- Preloading: Use
<link rel="preload" href="..." as="...">
to preload important assets like fonts and CSS. - Form Validation: Use HTML5 form validation attributes (
required
,pattern
,min
,max
, etc.) to validate user input. - Autocomplete: Utilize the
autocomplete
attribute to suggest values for form inputs. - Hidden Content: Use
aria-hidden="true"
for decorative elements or content not meant for screen readers. - Progress Element: Employ the
<progress>
element to indicate the progress of a task. - Abbreviations: Use
<abbr>
for abbreviations with tooltips. - Responsive Images: Implement responsive images using
srcset
andsizes
attributes. - Anchor Links: Add
rel="noopener"
to external anchor links to prevent security risks. - Role Attribute: Use
role
attributes to specify the semantic meaning of elements. - ARIA Landmarks: Apply ARIA landmarks (e.g.,
role="banner"
,role="main"
,role="navigation"
) for better accessibility. - Subscript and Superscript: Use
<sub>
and<sup>
for subscript and superscript text. - Horizontal Rule: Customize the horizontal rule with
<hr>
using CSS. - Details Element: Create collapsible content using the
<details>
and<summary>
elements. - Geolocation API: Utilize the Geolocation API to get the user’s location.
- Content Editable: Make elements editable using the
contenteditable
attribute. - Web Storage: Use
localStorage
andsessionStorage
to store data locally in the browser. - Canvas Element: Create graphics and animations using the
<canvas>
element and JavaScript. - SVG Graphics: Use SVG for scalable vector graphics.
- Data Table: Create accessible and responsive data tables using
<table>
,<thead>
,<tbody>
, and<tfoot>
. - Header Bidding Tags: Implement header bidding tags for ad optimization.
- Microdata: Add microdata (e.g., Schema.org) for better search engine understanding of page content.
- iFrame Attributes: Use
allow
andsandbox
attributes to control iframe behavior. - Long Content Truncation: Truncate long content with CSS ellipsis (
text-overflow: ellipsis;
) or JavaScript. - No-JS Fallback: Provide a no-JavaScript fallback for essential features.
- External CSS and JavaScript: Use external CSS and JavaScript files for better maintainability.
- HTML Imports (Deprecated): Consider HTML imports (deprecated) for reusable components.
- Disable Right-Click: Avoid using
event.preventDefault()
to disable right-click as it can frustrate users. - Clearfix: Use clearfix techniques to clear floats.
- Base Element: Set a base URL using the
<base>
element. - Image Maps: Create clickable image maps using
<map>
and<area>
elements. - Autoplay Videos: Use
autoplay
sparingly for videos to avoid frustrating users. - Drag-and-Drop: Enable drag-and-drop functionality using HTML5
draggable
attribute. - Print Stylesheets: Create print stylesheets to optimize page printing.
- Tabindex: Use
tabindex
attribute to customize the tab order of elements. - Inline SVG Optimization: Optimize inline SVG for performance.
- Geometric Shapes: Create geometric shapes using CSS (e.g., circles, triangles).
- Responsive Typography: Use responsive typography techniques like
vw
,vh
,em
, andrem
. - CSS Transitions: Apply smooth CSS transitions for animations.
- Web Accessibility: Ensure your HTML code adheres to web accessibility guidelines (WCAG) for an inclusive web experience.
Remember to always consider best practices, browser compatibility, and performance when implementing these HTML tricks and tips.
Learn React.js in 30 days
Html cheetsheet
Tricks and Tips in HTML HTML cheat sheet with commonly used HTML elements and attributes:
<!-- HTML Document Structure -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- Headings -->
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<!-- Paragraph -->
<p>This is a paragraph.</p>
<!-- Links -->
<a href="https://www.example.com">Link</a>
<!-- Images -->
<img src="image.jpg" alt="Description">
<!-- Lists -->
<ul>
<li>Unordered List Item 1</li>
<li>Unordered List Item 2</li>
</ul>
<ol>
<li>Ordered List Item 1</li>
<li>Ordered List Item 2</li>
</ol>
<!-- Tables -->
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
<!-- Forms -->
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="Submit">
</form>
<!-- Divisions (Containers) -->
<div>This is a division.</div>
<!-- Spans -->
<span>This is a span.</span>
<!-- Comments -->
<!-- This is a comment -->
<!-- Audio and Video -->
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
<!-- Bold, Italic, Underline -->
<p><strong>Bold</strong>, <em>Italic</em>, <u>Underline</u></p>
<!-- Line Break -->
<br>
<!-- Horizontal Rule -->
<hr>
<!-- Symbols -->
© ™ ® × ÷
<!-- Special Characters -->
< > & " '
<!-- HTML Entities -->
— “ ” ‹ ›
<!-- Comments -->
<!-- This is a comment -->
</body>
</html>