{"id":9262,"date":"2022-10-06T03:55:14","date_gmt":"2022-10-06T03:55:14","guid":{"rendered":"https:\/\/mdr.foobrdigital.com\/?p=9262"},"modified":"2022-10-06T03:55:14","modified_gmt":"2022-10-06T03:55:14","slug":"html-tag-2","status":"publish","type":"post","link":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/2022\/10\/06\/html-tag-2\/","title":{"rendered":"HTML Tag"},"content":{"rendered":"\n

The <a> tag is used to insert hyperlinks to other pages, or files, locations within the same page, email addresses, or any different URL. You can use both text and image as a hyperlink.<\/p>\n\n\n\n

In the browser, hyperlinks differ in their appearance and color. By default,\u00a0HTML links\u00a0appear as underlined blue text. When you hover your mouse over a link, it turns red (active link). Links that are already clicked (visited links) become purple.<\/p>\n\n\n\n

You can change the color of links,\u00a0remove underline\u00a0or\u00a0change the color of the links\u00a0using\u00a0CSS\u00a0styles.<\/p>\n\n\n\n

The “download”, “media”, “hreflang”, “target”, “rel”, and “type” attributes will be present only if the “href” attribute is present.<\/p>\n\n\n\n

Until you define another target, a linked page is shown in the current browser window.<\/p>\n\n\n\n

Syntax<\/h2>\n\n\n\n

The <a> tag comes in pairs. The content is written between the opening (<a>) and closing (<\/a>) tags.<\/p>\n\n\n\n

Attributes<\/h2>\n\n\n\n

The <a> tag can have attributes that provide additional information about it.<\/p>\n\n\n\n

The href attribute<\/h3>\n\n\n\n

The href is a required attribute of the <a> tag. It defines a link on the web page or a place on the same web page, where the user navigates after having clicked on the link. The value of the attribute is either an anchor or a URL. The anchor points to the ID (unique identifier) of the part of the web page referenced. Before the ID we put a hash (#).<\/p>\n\n\n\n

It looks like this:<\/p>\n\n\n\n

<a href=\"url\">the link text<\/a>\n\n<a href=\"#a\">the link text<\/a><\/code><\/pre>\n\n\n\n
Example of the HTML <a> tag with the href attribute:<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html>\n  <head>\n    <title>Title of the document<\/title>\n  <\/head>\n  <body>\n    <a href=\"https:\/\/www.w3docs.com\/\">W3docs.com<\/a>\n  <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Click on the link, and you will be redirected to the home page of our website.<\/p>\n\n\n\n
Using the\u00a0href\u00a0attribute of the\u00a0<a>\u00a0tag with the\u00a0<img>\u00a0tag you can make a linked image.<\/p>\n\n\n\n
Example of the HTML <a> tag for creating a linked image:<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html>\n  <head>\n    <title>Title of the document<\/title>\n    <style>\n      img {\n        height: 90vh;\n      }\n    <\/style>\n  <\/head>\n  <body>\n    <a href=\"https:\/\/en.wikipedia.org\/wiki\/France\">\n      <img src=\"https:\/\/images.unsplash.com\/photo-1549144511-f099e773c147?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80\" alt=\"France\">\n    <\/a>\n  <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
The target attribute<\/h2>\n\n\n\n
The target attribute is used to tell the browser where to open the document (by default, links open in the current window).<\/p>\n\n\n\n
The target attribute can have the following values:<\/p>\n\n\n\n
  • _blank<\/strong>\u2013 opens the link in a new window.<\/li>
  • _self<\/strong>-opens the link in a current window.<\/li>
  • _parent<\/strong> – opens the document in the parent frame.<\/li>
  • _top<\/strong> – opens the document in full width of the window.<\/li><\/ul>\n\n\n\n
    Example of the HTML <a> tag with the target attribute:<\/h3>\n\n\n\n
    <!DOCTYPE html>\n<html>\n  <head>\n    <title>Title of the document<\/title>\n  <\/head>\n  <body>\n    <a href=\"https:\/\/www.w3docs.com\/\" target=\"_blank\">W3docs.com<\/a>\n  <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
    The rel attribute<\/h2>\n\n\n\n
    This attribute sets the relationship of the current document to the linked one. The attribute values can be as follows:<\/p>\n\n\n\n
    • alternate <\/strong>– an alternative version of the document.<\/li>
    • author<\/strong>– reference to the author of the document or article.<\/li>
    • bookmark <\/strong>– a permanent link to be used for bookmarks.<\/li>
    • nofollow<\/strong> – links to an unendorsed document (this instructs the search engines that the crawler should not follow that link).<\/li><\/ul>\n\n\n\n
      No follow value<\/h3>\n\n\n\n
      If you want to create a nofollow link, use rel=”nofollow”. This informs search engines that you don’t support the content at the other end of the link. The nofollow attribute value is generally used on paid links and advertising. Sometimes the unfollow is considered to be a tag or attribute, but in fact, it\u2019s a value of the rel attribute.<\/p>\n\n\n\n
      Example of the rel attribute with the “nofollow” value:<\/h3>\n\n\n\n
      <!DOCTYPE html>\n<html>\n  <head>\n    <title>Title of the document<\/title>\n  <\/head>\n  <body>\n    <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.<\/p>\n    <p>This text is from <a href=\"https:\/\/www.lipsum.com\/\" rel=\"nofollow\" target=\"_blank\">Lorem Ipsum<\/a>.<\/p>\n  <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
      Attributes<\/h2>\n\n\n\n
      Attribute<\/th>Value<\/th>Description<\/th><\/tr><\/thead>
      charset<\/td>char_encoding<\/td>Defines the character-set of a linked document.
      Not used in HTML5.<\/strong><\/td><\/tr>
      coords<\/td>coordinates<\/td>Defines the coordinates of a link.
      Not used in HTML5.<\/strong><\/td><\/tr>
      download<\/td>filename<\/td>Defines that the target will be downloaded when a hyperlink is clicked.<\/td><\/tr>
      href<\/td>URL<\/td>Defines the URL of the linked document.<\/td><\/tr>
      hreflang<\/td>language_code<\/td>Defines the language of the linked document.<\/td><\/tr>
      media<\/td>media_query<\/td>Defines what media\/device the linked document is optimized for.<\/td><\/tr>
      name<\/td>section_name<\/td>Defines the name of an anchor.
      Not used in HTML5.<\/strong><\/td><\/tr>
      ping<\/td>list_of_URLs<\/td>Defines a space-separated list of URLs to which, when the link is followed, post requests with the body ping will be sent by the browser (in the background). Typically used for tracking.<\/td><\/tr>
      rel<\/td>alternate
      author
      bookmark
      external
      help
      license
      next
      nofollow
      noreferrer
      noopener
      prev
      search
      tag<\/td>      		Defines the relationship between the target object and the linked document.<\/td><\/tr>
      rev<\/td>text<\/td>Defines a reverse link, the inverse relationship of the “rel” attribute.
      Not used in HTML5.<\/strong><\/td><\/tr>
      shape<\/td>default
      rect
      circle
      poly<\/td>      		Defines the shape of the hyperlink.
      Not used in HTML5.<\/strong><\/td><\/tr>
      target<\/td>_blank
      _parent
      _self
      _top<\/td>      		Defines where to open the linked document.<\/td><\/tr>
      type<\/td>media_type<\/td>Defines the media type in the form of a\u00a0MIME- type\u00a0for the linked URL.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
      The\u00a0<a>\u00a0tag also supports the\u00a0Global Attributes\u00a0and the\u00a0Event Attributes.<\/p>\n\n\n\n
      How to style <a> tag?<\/h2>\n\n\n\n
      Common properties to alter the visual weight\/emphasis\/size of text in <a> tag:<\/h3>\n\n\n\n
      • CSS font-style\u00a0property sets the style of the font. normal | italic | oblique | initial | inherit.<\/li>
      • CSS font-family\u00a0property specifies a prioritized list of one or more font family names and\/or generic family names for the selected element.<\/li>
      • CSS font-size\u00a0property sets the size of the font.<\/li>
      • CSS font-weight\u00a0property defines whether the font should be bold or thick.<\/li>
      • CSS text-transform\u00a0property controls text case and capitalization.<\/li>
      • CSS text-decoration\u00a0property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style.<\/li><\/ul>\n\n\n\n
        Coloring text in <a> tag:<\/h3>\n\n\n\n
        • CSS color\u00a0property describes the color of the text content and text decorations.<\/li>
        • CSS background-color\u00a0property sets the background color of an element.<\/li><\/ul>\n\n\n\n
          Text layout styles for <a> tag:<\/h3>\n\n\n\n
          • CSS text-indent\u00a0property specifies the indentation of the first line in a text block.<\/li>
          • CSS text-overflow\u00a0property specifies how overflowed content that is not displayed should be signalled to the user.<\/li>
          • CSS white-space\u00a0property specifies how white-space inside an element is handled.<\/li>
          • CSS word-break\u00a0property specifies where the lines should be broken.<\/li><\/ul>\n\n\n\n
            Other properties worth looking at for <a> tag:<\/h3>\n\n\n\n
            • CSS text-shadow\u00a0property adds shadow to text.<\/li>
            • CSS text-align-last\u00a0property sets the alignment of the last line of the text.<\/li>
            • CSS line-height\u00a0property specifies the height of a line.<\/li>
            • CSS letter-spacing\u00a0property defines the spaces between letters\/characters in a text.<\/li>
            • CSS word-spacing\u00a0property sets the spacing between words.<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"
              The <a> tag is used to insert hyperlinks to other pages, or files, locations within the same page, email addresses, or any different URL. You can use both text and image as a hyperlink. In the browser, hyperlinks differ in their appearance and color. By default,\u00a0HTML links\u00a0appear as underlined blue text. When you hover your mouse over […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[529],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/9262"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=9262"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/9262\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=9262"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=9262"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=9262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}