Hyperlinks (Links):
- `<a href="url">text</a>`: Creates clickable links.
- `href="#section"`: Links to sections in the same page.
- `target="_blank"`: Opens link in a new tab.
Images:
- `<img src="image.jpg" alt="description">`: Embeds images.
- `alt`: Provides text for images (accessibility).
- `width`, `height`: Sets image dimensions.
- `<figure>`, `<figcaption>`: Image with caption.
Image Maps:
- `<map>`: Defines clickable map.
- `<area>`: Clickable areas (rect, circle, poly).
Responsive Images:
- `srcset`: Multiple sources for screen sizes.
- `sizes`: Display hints for responsive images.
Background Images:
- `background-image`: Sets background image.
- `background-size`: Controls image size.
Image Lazy Loading:
- `<img loading="lazy" src="image.jpg">`: Lazy loading.
SVG Images:
- `<svg>`: Scalable vector graphics.
- `<path>`: Shapes in SVG.
Best Practives:
- Descriptive `alt` text for images.
- Use relative paths.
- Optimize image sizes.
- Responsive design for images.
- Check for broken links/images.
Remember to apply good practices for accessibility, performance, and usability when using links and images in your HTML content.
