{"id":13,"date":"2024-01-18T20:32:43","date_gmt":"2024-01-18T20:32:43","guid":{"rendered":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/?p=13"},"modified":"2024-03-27T14:49:56","modified_gmt":"2024-03-27T14:49:56","slug":"vertical-nosidebar","status":"publish","type":"post","link":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/vertical-nosidebar\/","title":{"rendered":"Displaying Images in HTML: The img tag a masterclass"},"content":{"rendered":"\n<p>Images play a crucial role in enhancing the visual appeal of a website, and in HTML, the <code>img<\/code> tag is the key to incorporating images into your web pages. This tag is straightforward yet powerful, allowing you to seamlessly integrate images into your content.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"the-img-tag-basics\">The <code>&lt;img&gt;<\/code> Tag Basics<\/h3>\n\n\n\n<p>The <code>&lt;img&gt;<\/code> tag is a self-closing tag, which means it ends with <code>\/&gt;<\/code>. It does not contain any content but rather serves as a self-sustaining element. Here&#8217;s a simple example:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;img src=\"image.png\" \/&gt;\n<\/code><\/pre>\n\n\n\n<p>In this example, the <code>src<\/code> attribute specifies the image source. You can replace <code>\"image.png\"<\/code> with the actual file path or URL of your image.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"image-formats-and-alt-attribute\">Image Formats and Alt Attribute<\/h3>\n\n\n\n<p>On the web, a diverse range of image formats is used, including PNG, JPEG, GIF, SVG, and the more recent WebP. When using the <code>&lt;img&gt;<\/code> tag, it&#8217;s important to include the <code>alt<\/code> attribute, as per HTML standards. The <code>alt<\/code> attribute provides a descriptive text for the image, aiding screen readers and search engine bots:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;img src=\"dog.png\" alt=\"A picture of a dog\" \/&gt;\n<\/code><\/pre>\n\n\n\n<p>Ensure that the <code>alt<\/code> attribute provides a meaningful description of the image, contributing to accessibility and search engine optimization.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"controlling-image-size-with-width-and-height-attributes\">Controlling Image Size with Width and Height Attributes<\/h3>\n\n\n\n<p>You can control the dimensions of the displayed image using the <code>width<\/code> and <code>height<\/code> attributes. These attributes take numeric values expressed in pixels. This is particularly useful to reserve space for the image, preventing layout changes when the image is fully loaded:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;img src=\"dog.png\" alt=\"A picture of a dog\" width=\"300\" height=\"200\" \/&gt;<\/code><\/pre>\n\n\n\n<p>In this example, the <code>width<\/code> is set to 300 pixels, and the <code>height<\/code> is set to 200 pixels. Adjust these values according to your design preferences and layout requirements.<\/p>\n\n\n\n<p>Integrating images with the <code>&lt;img&gt;<\/code> tag is a fundamental skill in web development. As you continue to explore HTML and enhance your web pages, mastering the art of incorporating images will contribute significantly to the overall user experience of your website.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Images play a crucial role in enhancing the visual appeal of a website, and in HTML, the img tag is the key to incorporating images&#8230;<\/p>\n","protected":false},"author":1,"featured_media":41,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,22],"tags":[],"class_list":["post-13","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code","category-2-html"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Displaying Images in HTML: The img tag a masterclass - Zento<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/vertical-nosidebar\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Displaying Images in HTML: The img tag a masterclass - Zento\" \/>\n<meta property=\"og:description\" content=\"Images play a crucial role in enhancing the visual appeal of a website, and in HTML, the img tag is the key to incorporating images...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/vertical-nosidebar\/\" \/>\n<meta property=\"og:site_name\" content=\"Zento\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-18T20:32:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-27T14:49:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/wp-content\/uploads\/2024\/01\/lorenzo-herrera-VFiQvZPlm2k-unsplash-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"660\" \/>\n\t<meta property=\"og:image:height\" content=\"660\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jonathan Doe\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jonathan Doe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/vertical-nosidebar\/\",\"url\":\"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/vertical-nosidebar\/\",\"name\":\"Displaying Images in HTML: The img tag a masterclass - Zento\",\"isPartOf\":{\"@id\":\"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/vertical-nosidebar\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/vertical-nosidebar\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/wp-content\/uploads\/2024\/01\/lorenzo-herrera-VFiQvZPlm2k-unsplash-1.jpg\",\"datePublished\":\"2024-01-18T20:32:43+00:00\",\"dateModified\":\"2024-03-27T14:49:56+00:00\",\"author\":{\"@id\":\"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/#\/schema\/person\/73c40f6ccae14171f66e46de64b7ba55\"},\"breadcrumb\":{\"@id\":\"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/vertical-nosidebar\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/vertical-nosidebar\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/vertical-nosidebar\/#primaryimage\",\"url\":\"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/wp-content\/uploads\/2024\/01\/lorenzo-herrera-VFiQvZPlm2k-unsplash-1.jpg\",\"contentUrl\":\"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/wp-content\/uploads\/2024\/01\/lorenzo-herrera-VFiQvZPlm2k-unsplash-1.jpg\",\"width\":660,\"height\":660},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/vertical-nosidebar\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Displaying Images in HTML: The img tag a masterclass\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/#website\",\"url\":\"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/\",\"name\":\"Zento\",\"description\":\"Thoughts, stories and ideas.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/#\/schema\/person\/73c40f6ccae14171f66e46de64b7ba55\",\"name\":\"Jonathan Doe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a726515546b3cba9511994084a492b5a58cf40acd8faff68586319f1844de21a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a726515546b3cba9511994084a492b5a58cf40acd8faff68586319f1844de21a?s=96&d=mm&r=g\",\"caption\":\"Jonathan Doe\"},\"description\":\"Actively writing articles for this website. I really like traveling and photography, follow me on @Twitter i share content there everyday.\",\"sameAs\":[\"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\"],\"url\":\"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Displaying Images in HTML: The img tag a masterclass - Zento","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/vertical-nosidebar\/","og_locale":"en_US","og_type":"article","og_title":"Displaying Images in HTML: The img tag a masterclass - Zento","og_description":"Images play a crucial role in enhancing the visual appeal of a website, and in HTML, the img tag is the key to incorporating images...","og_url":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/vertical-nosidebar\/","og_site_name":"Zento","article_published_time":"2024-01-18T20:32:43+00:00","article_modified_time":"2024-03-27T14:49:56+00:00","og_image":[{"width":660,"height":660,"url":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/wp-content\/uploads\/2024\/01\/lorenzo-herrera-VFiQvZPlm2k-unsplash-1.jpg","type":"image\/jpeg"}],"author":"Jonathan Doe","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Jonathan Doe","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/vertical-nosidebar\/","url":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/vertical-nosidebar\/","name":"Displaying Images in HTML: The img tag a masterclass - Zento","isPartOf":{"@id":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/#website"},"primaryImageOfPage":{"@id":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/vertical-nosidebar\/#primaryimage"},"image":{"@id":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/vertical-nosidebar\/#primaryimage"},"thumbnailUrl":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/wp-content\/uploads\/2024\/01\/lorenzo-herrera-VFiQvZPlm2k-unsplash-1.jpg","datePublished":"2024-01-18T20:32:43+00:00","dateModified":"2024-03-27T14:49:56+00:00","author":{"@id":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/#\/schema\/person\/73c40f6ccae14171f66e46de64b7ba55"},"breadcrumb":{"@id":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/vertical-nosidebar\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/vertical-nosidebar\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/vertical-nosidebar\/#primaryimage","url":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/wp-content\/uploads\/2024\/01\/lorenzo-herrera-VFiQvZPlm2k-unsplash-1.jpg","contentUrl":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/wp-content\/uploads\/2024\/01\/lorenzo-herrera-VFiQvZPlm2k-unsplash-1.jpg","width":660,"height":660},{"@type":"BreadcrumbList","@id":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/vertical-nosidebar\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/"},{"@type":"ListItem","position":2,"name":"Displaying Images in HTML: The img tag a masterclass"}]},{"@type":"WebSite","@id":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/#website","url":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/","name":"Zento","description":"Thoughts, stories and ideas.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/#\/schema\/person\/73c40f6ccae14171f66e46de64b7ba55","name":"Jonathan Doe","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a726515546b3cba9511994084a492b5a58cf40acd8faff68586319f1844de21a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a726515546b3cba9511994084a492b5a58cf40acd8faff68586319f1844de21a?s=96&d=mm&r=g","caption":"Jonathan Doe"},"description":"Actively writing articles for this website. I really like traveling and photography, follow me on @Twitter i share content there everyday.","sameAs":["https:\/\/themes.estudiopatagon.com\/wordpress\/zento"],"url":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/author\/admin\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/wp-json\/wp\/v2\/posts\/13","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/wp-json\/wp\/v2\/comments?post=13"}],"version-history":[{"count":2,"href":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/wp-json\/wp\/v2\/posts\/13\/revisions"}],"predecessor-version":[{"id":57,"href":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/wp-json\/wp\/v2\/posts\/13\/revisions\/57"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/wp-json\/wp\/v2\/media\/41"}],"wp:attachment":[{"href":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/wp-json\/wp\/v2\/media?parent=13"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/wp-json\/wp\/v2\/categories?post=13"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themes.estudiopatagon.com\/wordpress\/zento\/wp-json\/wp\/v2\/tags?post=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}