The document describes several HTML tags used for embedding images and links in web pages including the <a> tag for defining hyperlinks, the <img> tag for embedding images, the <picture> tag for responsive images, and the <map> tag for defining image maps with clickable areas. Each tag is explained and their common attributes are listed. The document provides information on the basic usage and attributes of these important HTML tags for adding images and links to web pages.
The document describes several HTML tags used for embedding images and links in web pages including the <a> tag for defining hyperlinks, the <img> tag for embedding images, the <picture> tag for responsive images, and the <map> tag for defining image maps with clickable areas. Each tag is explained and their common attributes are listed. The document provides information on the basic usage and attributes of these important HTML tags for adding images and links to web pages.
The document describes several HTML tags used for embedding images and links in web pages including the <a> tag for defining hyperlinks, the <img> tag for embedding images, the <picture> tag for responsive images, and the <map> tag for defining image maps with clickable areas. Each tag is explained and their common attributes are listed. The document provides information on the basic usage and attributes of these important HTML tags for adding images and links to web pages.
The document describes several HTML tags used for embedding images and links in web pages including the <a> tag for defining hyperlinks, the <img> tag for embedding images, the <picture> tag for responsive images, and the <map> tag for defining image maps with clickable areas. Each tag is explained and their common attributes are listed. The document provides information on the basic usage and attributes of these important HTML tags for adding images and links to web pages.
The <a> tag defines a hyperlink, which is used to link from one page to another. The most important attribute of the <a> element is the href attribute, which indicates the link's destination.
By default, links will appear as follows in all browsers:
•An unvisited link is underlined and blue •A visited link is underlined and purple •An active link is underlined and red Attributes download filename (target will download) href URL (specify the URL the link goes) hreflang language_code (specify the language of the linked document) media media_query (specify what device the linked document optimized for) ping list_of_URLs ( List of URLs useful for tracking .) target _blank_parent_self_top (specify where the link open) type media_type (specify the media type of linked document) <img> Tag The <img> tag is used to embed an image in an HTML page. Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image.
The <img> tag has two required attributes:
•src - Specifies the path to the image •alt - Specifies an alternate text for the image, if the image for some reason cannot be displayed
Note: Also, always specify the width and height of an image. If width and height are not specified, the page might flicker while the image loads. Attributes alt text ( Alternate text for image) crossorigin anonymous use-credentials (allow image from third party web sites) height pixels (heigh of the image) ismap ismap (Specifies an image as a server-side image map) usemap #mapname (an image as a client-side image map) loading eager lazy (should load an image immediately or to defer loading of images until some conditions are met) longdesc URL (a URL to a detailed description of an image) sizes sizes (image sizes for different page layouts) src URL (Specifies the path to the image) srcset URL-list (a list of image files to use in different situations(browsers)) width pixels (Specifies the width of an image) <picture> Tag
The <picture> tag gives web developers more flexibility in specifying image resources.
The most common use of the <picture> element will be for art direction in responsive designs. Instead of having one image that is scaled up or down based on the viewport width, multiple images can be designed to more nicely fill the browser viewport.
The <picture> element contains two tags: one or more <source> tags and one <img> tag <map> Tag
The <map> tag is used to define an image map. An image map is an image with clickable areas.
The required name attribute of the <map> element is associated with the <img>'s usemap attribute and creates a relationship between the image and the map.
The <map> element contains a number of <area> elements, that defines the clickable areas in the image map. Attribute Name mapname Required. Specifies the name of the image map END
