HTML Images - 8 Tags and its Attributes (Reference)

Tech:
Html
Since:
2 years ago
Views:
5

The HTML image tags are used to create images. It is mainly used to create images. The image tags can have attributes like src, alt, width, height, and usemap.

Image tags:

<img>

Defines an image. Basically to load image. Attributes - alt, crossorigin, height, ismap, longdesc, referrerpolicy, sizes, src, srcset, usemap, width

<img src="img_path" alt="Some text" width="500" height="600" />

<svg>

Defines a container for SVG graphics.

<svg width="100" height="100">
  <circle
    cx="50"
    cy="50"
    r="40"
    stroke="green"
    stroke-width="4"
    fill="yellow"
  />
</svg>

// Circle
<svg width="100" height="100">
  <circle
    cx="50"
    cy="50"
    r="40"
    stroke="green"
    stroke-width="4"
    fill="yellow"
  />
  Sorry, your browser does not support inline SVG.
</svg>

// Rectangle
<svg width="400" height="100">
  <rect
    width="400"
    height="100"
    style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)"
  />
</svg>

// Star
<svg width="300" height="200">
  <polygon
    points="100,10 40,198 190,78 10,78 160,198"
    style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"
  />
</svg>

<map>

Defines a client-side image map. Custom clickable areas inside an image. Contains a number of area tags.

<img src="img_path" alt="Some text" width="500" height="600" usemap="#map_id" />

<map name="map_id">
  <area
    shape="rect"
    coords="34,44,270,350"
    alt="Some text"
    href="#some_path1"
  />
  <area
    shape="rect"
    coords="290,172,333,250"
    alt="Some text"
    href="#some_path2"
  />
</map>

<area>

Defines an area inside an image map. Used with map tag. Attributes - alt, coords, download, href, hreflang, media, rel, shape, target, type.

<img src="img_path" alt="Some text" width="500" height="600" usemap="#map_id" />

<map name="map_id">
  <area
    shape="rect"
    coords="34,44,270,350"
    alt="Some text"
    href="#some_path1"
  />
  <area
    shape="rect"
    coords="290,172,333,250"
    alt="Some text"
    href="#some_path2"
  />
</map>

<canvas>

Used to draw graphics, on the fly, via JavaScript. Attributes - height, width.

<canvas id="some_id">
  Your browser does not support
</canvas>

<script>
  var canvas = document.getElementById("some_id");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0, 0, 80, 80);
</script>

// Examples
<script>
  var canvas = document.querySelector("canvas");
  var ctx = canvas.getContext("2d");
  canvas.height = window.innerHeight - 100;
  canvas.width = window.innerWidth - 20;
  ctx.strokeStyle = 'red';
  ctx.lineWidth = 1;
  // Line
  lineTo(x, y)

  ctx.moveTo(100,100);
  ctx.lineTo(0,100);
  ctx.stroke();

  // Box
  ctx.fillStyle ='red';
  ctx.fillRect(10,10,150,80);
  ctx.strokeRect(10,10,150,80);
  ctx.clearRect(26, 26, 98, 98);

  // Circle
  arc(x, y, radius, startAngle, endAngle, anticlockwise)
  arcTo(x1, y1, x2, y2, radius) ctx.beginPath();

  ctx.arc(30,30,30,0,2 * Math.PI);
  ctx.stroke();

  // Text
  ctx.font = '30px arial';
  ctx.fillText('Hello ooo ooooo',100,100);
  ctx.strokeText('Hello oooooooo',100,100);

  // Filling gradient
  var grd = ctx.createLinearGradient(0, 0, 200, 0);
  grd.addColorStop(0, "red");
  grd.addColorStop(1, "white");
  ctx.fillStyle = grd;
  ctx.fillRect(10, 10, 150, 80);

  // Image
  var img = document.getElementById("id_name");
  ctx.drawImage(img,10,10);
</script>

<picture>

Defines a container for multiple image resources. Change whole image when resize.

<picture>
  <source media="(min-width:650px)" srcset="some_path_3" />
  <source media="(min-width:465px)" srcset="some_path_2" />
  <img src="some_path_1" alt="Flowers" style="width:auto;" />
</picture>

<figure>

Specifies self-contained content like images, illustrations.

<figure>
  <img src="some_path" />
</figure>

<figcaption>

Defines a caption for a figure element. Used inside figure tag.

<figure>
  <img src="some_path" />
  <figcaption>Some text</figcaption>
</figure>
More Articles
HTML Table - 10 Tags and its Attributes (Reference)
1 year ago
2
HTML Basic tags - 12 Tags and its Attributes (Reference)
1 year ago
8
HTML Iframe - 11 Attributes (Reference)
1 year ago
5
HTML Global attributes - 12 Attributes (Reference)
1 year ago
9
HTML Script - 2 Tags and its Attributes (Reference)
1 year ago
2