[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"blog-categories":6,"course-tree":24,"blog:post:how-to-add-an-image-in-html":26,"blog:page:1":387},{"data":4},{"google_site_verification":5,"ga4_measurement_id":5,"site_name":5,"default_og_image":5,"twitter_handle":5},null,{"data":7},[8,14,19],{"name":9,"slug":10,"description":11,"post_count":12,"subcategories":13},"CSS","css","Learn CSS with practical tutorials and examples covering layouts, Flexbox, Grid, responsive design, typography, positioning, animations, and more.",1,[],{"name":15,"slug":16,"description":17,"post_count":12,"subcategories":18},"HTML","html","Learn HTML with practical tutorials and examples for beginners. Explore HTML tags, elements, attributes, links, images, forms, semantic HTML, and more with clear explanations and real code examples.",[],{"name":20,"slug":21,"description":22,"post_count":12,"subcategories":23},"WPF","wpf","Learn WPF with practical tutorials and examples covering XAML, windows, controls, layouts, data binding, MVVM, commands, styles, templates, debugging, and modern WPF UI development.",[],{"data":25},[],{"data":27},{"id":28,"title":29,"slug":30,"excerpt":5,"author":31,"categories":37,"featured_image":39,"reading_time_minutes":42,"meta_title":43,"meta_description":44,"og_image":5,"meta_robots":45,"schema_type":46,"faq_json":5,"video_url":5,"toc_json":47,"published_at":96,"updated_at":97,"content":98,"related":99},2,"How to Add an Image in HTML: The Complete img Tag Guide","how-to-add-an-image-in-html",{"slug":32,"display_name":33,"job_title":5,"short_bio":5,"expertise_tags":34,"headshot":5,"long_bio":5,"credentials":5,"twitter_url":5,"linkedin_url":5,"github_url":5,"personal_website_url":5,"other_sameas_urls":5,"topics":35,"posts":36},"badar-khalil","Badar Khalil",[],[],[],[38],{"name":15,"slug":16},{"url":40,"alt_text":41,"width":5,"height":5},"\u002Fstorage\u002Fmedia\u002F01M20TNJ8K254FH80P5N6V87PR.webp","How to add an image in HTML using the img tag, responsive images, and alt text",6,"How to Add Image in HTML","Learn how to add image in HTML with the img tag, alt text, relative paths, srcset, and the picture element — plus common mistakes to avoid.",[],"Article",[48,52,56,60,64,68,72,76,80,84,88,92],{"id":49,"text":50,"level":28,"children":51},"the-basic-syntax-for-how-to-add-image-in-html","The Basic Syntax for How to Add Image in HTML",[],{"id":53,"text":54,"level":28,"children":55},"understanding-the-img-tags-core-attributes","Understanding the img Tag's Core Attributes",[],{"id":57,"text":58,"level":28,"children":59},"relative-root-relative-and-absolute-urls-for-images","Relative, Root-Relative, and Absolute URLs for Images",[],{"id":61,"text":62,"level":28,"children":63},"making-images-responsive-with-srcset-and-sizes","Making Images Responsive with srcset and sizes",[],{"id":65,"text":66,"level":28,"children":67},"using-the-picture-element-for-format-fallbacks","Using the picture Element for Format Fallbacks",[],{"id":69,"text":70,"level":28,"children":71},"wrapping-images-with-figure-and-figcaption","Wrapping Images with figure and figcaption",[],{"id":73,"text":74,"level":28,"children":75},"making-an-image-clickable","Making an Image Clickable",[],{"id":77,"text":78,"level":28,"children":79},"lazy-loading-images-for-performance","Lazy Loading Images for Performance",[],{"id":81,"text":82,"level":28,"children":83},"common-mistakes-when-adding-images-in-html","Common Mistakes When Adding Images in HTML",[],{"id":85,"text":86,"level":28,"children":87},"quick-reference-which-approach-fits-your-situation","Quick Reference: Which Approach Fits Your Situation",[],{"id":89,"text":90,"level":28,"children":91},"faq-about-adding-images-in-html","FAQ About Adding Images in HTML",[],{"id":93,"text":94,"level":28,"children":95},"the-short-version","The Short Version",[],"2026-09-08T15:41:06+00:00","2026-09-08T15:41:07+00:00","\u003Cp>Every developer's first HTML image ends up broken at least once, usually because of a typo in the file path rather than the tag itself. The good news is that adding an image in HTML takes only a few lines. Once the attributes make sense, the rest is just picking the right variant: a plain photo, a responsive image that swaps sizes, or a clickable thumbnail.\u003C\u002Fp>\u003Cp>This guide covers the tag itself, the attributes that actually matter, file paths, responsive images, and the mistakes that trip up most beginners.\u003C\u002Fp>\u003Ch2 id=\"the-basic-syntax-for-how-to-add-image-in-html\">The Basic Syntax for How to Add Image in HTML\u003C\u002Fh2>\u003Cp>The \u003Ccode><img>\u003C\u002Fcode> element is a void element. It has no closing tag and no content between tags, since the image itself is the content.\u003C\u002Fp>\u003Cp>html\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><img src=\"images\u002Fsunset.jpg\" alt=\"Orange sunset over a calm ocean\" width=\"800\" height=\"533\">\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>The \u003Ccode>src\u003C\u002Fcode> attribute provides the image URL, while \u003Ccode>srcset\u003C\u002Fcode> can provide alternative image sources for responsive images. At least one of \u003Ccode>src\u003C\u002Fcode> or \u003Ccode>srcset\u003C\u002Fcode> must be present. \u003Ccode>alt\u003C\u002Fcode> isn't enforced by browsers the same way, but the \u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Fimg\">MDN documentation on the img element\u003C\u002Fa> treats it as mandatory in practice. It's what screen readers announce, and it's also the text shown if the image fails to load from a broken link, a network error, or content blocking.\u003C\u002Fp>\u003Ch2 id=\"understanding-the-img-tags-core-attributes\">Understanding the img Tag's Core Attributes\u003C\u002Fh2>\u003Cp>Beyond \u003Ccode>src\u003C\u002Fcode> and \u003Ccode>alt\u003C\u002Fcode>, a handful of attributes cover most real-world cases:\u003C\u002Fp>\u003Ctable>\u003Ctbody>\u003Ctr>\u003Cth rowspan=\"1\" colspan=\"1\">\u003Cp>Attribute\u003C\u002Fp>\u003C\u002Fth>\u003Cth rowspan=\"1\" colspan=\"1\">\u003Cp>Purpose\u003C\u002Fp>\u003C\u002Fth>\u003C\u002Ftr>\u003Ctr>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>\u003Ccode>src\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Path or URL to the image file\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>\u003Ccode>alt\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Text description for accessibility and fallback display\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>\u003Ccode>width\u003C\u002Fcode> \u002F \u003Ccode>height\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Intrinsic dimensions that help reserve layout space before the file loads\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>\u003Ccode>title\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Tooltip text on hover; don't rely on it for important information\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>\u003Ccode>loading\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Controls when the browser fetches the image (\u003Ccode>lazy\u003C\u002Fcode> or \u003Ccode>eager\u003C\u002Fcode>)\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>\u003Ccode>srcset\u003C\u002Fcode> \u002F \u003Ccode>sizes\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Offers multiple image sizes for responsive layouts\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Cp>Setting \u003Ccode>width\u003C\u002Fcode> and \u003Ccode>height\u003C\u002Fcode> does more than control display size. According to MDN, giving both values lets the browser reserve the image's space in the layout before the file finishes loading, which cuts down on the content jumping around as the page renders. Skipping them is one of the more common causes of that jarring layout shift beginners notice on slow connections.\u003C\u002Fp>\u003Ch2 id=\"relative-root-relative-and-absolute-urls-for-images\">Relative, Root-Relative, and Absolute URLs for Images\u003C\u002Fh2>\u003Cp>This is where most broken images actually come from, not the tag syntax.\u003C\u002Fp>\u003Cp>A relative URL points to a file based on the current document's location:\u003C\u002Fp>\u003Cp>html\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><img src=\"images\u002Flogo.png\" alt=\"Company logo\">\n<img src=\"..\u002Fassets\u002Ficons\u002Fstar.svg\" alt=\"Star icon\">\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>A root-relative URL starts from the site's root with a leading slash, and an absolute URL points to a full external address:\u003C\u002Fp>\u003Cp>html\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><img src=\"\u002Fassets\u002Flogo.png\" alt=\"Company logo\">\n<img src=\"https:\u002F\u002Fexample.com\u002Fmedia\u002Flogo.png\" alt=\"Company logo\">\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>A relative URL breaks the moment the folder structure changes or the page referencing it moves to a different directory, since the browser recalculates it against the new location. A root-relative URL (starting with \u003Ccode>\u002F\u003C\u002Fcode>) survives that kind of move because it's anchored to the domain, not to the current file.\u003C\u002Fp>\u003Ch2 id=\"making-images-responsive-with-srcset-and-sizes\">Making Images Responsive with srcset and sizes\u003C\u002Fh2>\u003Cp>A single \u003Ccode><img>\u003C\u002Fcode> tag can offer several file sizes and let the browser pick the right one for the viewport, rather than forcing every device to download a desktop-sized file.\u003C\u002Fp>\u003Cp>html\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><img\n  src=\"hero-800.jpg\"\n  srcset=\"hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w\"\n  sizes=\"(max-width: 600px) 100vw, 800px\"\n  alt=\"Team working around a conference table\"\n  width=\"800\"\n  height=\"450\">\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Each entry in \u003Ccode>srcset\u003C\u002Fcode> pairs a file with its actual pixel width using the \u003Ccode>w\u003C\u002Fcode> descriptor. The \u003Ccode>sizes\u003C\u002Fcode> attribute then tells the browser how wide the image will actually render at different viewport widths, so it can pick the smallest file that still looks sharp. This is genuinely different from a plain \u003Ccode><img>\u003C\u002Fcode> tag with one \u003Ccode>src\u003C\u002Fcode>, since the browser is choosing between real alternatives instead of scaling one file up or down.\u003C\u002Fp>\u003Ch2 id=\"using-the-picture-element-for-format-fallbacks\">Using the picture Element for Format Fallbacks\u003C\u002Fh2>\u003Cp>\u003Ccode>srcset\u003C\u002Fcode> handles resolution switching. When the goal is offering a modern file format with a fallback, \u003Ccode><picture>\u003C\u002Fcode> is the better fit:\u003C\u002Fp>\u003Cp>html\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><picture>\n  <source srcset=\"photo.avif\" type=\"image\u002Favif\">\n  <source srcset=\"photo.webp\" type=\"image\u002Fwebp\">\n  <img src=\"photo.jpg\" alt=\"Mountain trail at sunrise\">\n<\u002Fpicture>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>The browser checks each \u003Ccode><source>\u003C\u002Fcode> in order and uses the first format it supports, falling back to the \u003Ccode><img>\u003C\u002Fcode> tag's \u003Ccode>src\u003C\u002Fcode> if none of the listed types work. This is the standard way to serve AVIF or WebP to browsers that support them while still supporting older ones.\u003C\u002Fp>\u003Ch2 id=\"wrapping-images-with-figure-and-figcaption\">Wrapping Images with figure and figcaption\u003C\u002Fh2>\u003Cp>When an image needs a visible caption, \u003Ccode><figure>\u003C\u002Fcode> and \u003Ccode><figcaption>\u003C\u002Fcode> group the image and its caption as a single semantic unit. That's a stronger connection than a nearby paragraph, which has no actual link to the image in the markup.\u003C\u002Fp>\u003Cp>html\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><figure>\n  <img src=\"chart.png\" alt=\"Bar chart showing quarterly signups\" width=\"600\" height=\"360\">\n  <figcaption>Signups grew steadily through Q3 before leveling off in Q4.<\u002Ffigcaption>\n<\u002Ffigure>\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2 id=\"making-an-image-clickable\">Making an Image Clickable\u003C\u002Fh2>\u003Cp>Wrapping an \u003Ccode><img>\u003C\u002Fcode> in an anchor tag turns the whole image into a link:\u003C\u002Fp>\u003Cp>html\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><a href=\"https:\u002F\u002Fexample.com\u002Fgallery\">\n  <img src=\"thumbnail.jpg\" alt=\"View the full photo gallery\" width=\"300\" height=\"200\">\n<\u002Fa>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>The \u003Ccode>alt\u003C\u002Fcode> text should describe where the link goes in this case, not just describe the picture, since a screen reader user hears the alt text as the content of the link itself.\u003C\u002Fp>\u003Ch2 id=\"lazy-loading-images-for-performance\">Lazy Loading Images for Performance\u003C\u002Fh2>\u003Cp>The \u003Ccode>loading=\"lazy\"\u003C\u002Fcode> attribute tells the browser to defer loading an image until it's about to scroll into view:\u003C\u002Fp>\u003Cp>html\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><img src=\"offscreen-photo.jpg\" alt=\"Product detail shot\" loading=\"lazy\" width=\"500\" height=\"500\">\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>The \u003Ccode>loading\u003C\u002Fcode> attribute is widely supported in current browsers, so it can be used without a JavaScript fallback in modern projects. It's worth skipping on images near the top of the page, like a hero banner. Those need to load immediately, not wait on a scroll event before the user expects to see them.\u003C\u002Fp>\u003Ch2 id=\"common-mistakes-when-adding-images-in-html\">Common Mistakes When Adding Images in HTML\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Leaving out \u003C\u002Fstrong>\u003Ccode>alt\u003C\u002Fcode>\u003Cstrong> entirely.\u003C\u002Fstrong> An empty \u003Ccode>alt=\"\"\u003C\u002Fcode> is valid for purely decorative images, but a missing attribute altogether is different, and screen readers handle the two cases differently.\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>Setting width and height in CSS without preserving the image's aspect ratio can distort the image.\u003C\u002Fstrong> Use dimensions that match the image's proportions, or let CSS scale it proportionally.\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>Using an absolute local file path\u003C\u002Fstrong> like \u003Ccode>C:\\Users\\name\\Pictures\\photo.jpg\u003C\u002Fcode>. That path exists only on the machine that wrote it and will 404 for anyone else.\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>Forgetting the file extension case matters\u003C\u002Fstrong> on servers with case-sensitive file systems (most Linux-based hosting). \u003Ccode>Photo.JPG\u003C\u002Fcode> and \u003Ccode>photo.jpg\u003C\u002Fcode> are different files there, even though Windows treats them as the same.\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>Applying \u003C\u002Fstrong>\u003Ccode>loading=\"lazy\"\u003C\u002Fcode>\u003Cstrong> to an above-the-fold hero image\u003C\u002Fstrong>, which delays the exact image users see first.\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"quick-reference-which-approach-fits-your-situation\">Quick Reference: Which Approach Fits Your Situation\u003C\u002Fh2>\u003Ctable>\u003Ctbody>\u003Ctr>\u003Cth rowspan=\"1\" colspan=\"1\">\u003Cp>Situation\u003C\u002Fp>\u003C\u002Fth>\u003Cth rowspan=\"1\" colspan=\"1\">\u003Cp>Recommended Approach\u003C\u002Fp>\u003C\u002Fth>\u003C\u002Ftr>\u003Ctr>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>A single static image\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Plain \u003Ccode><img>\u003C\u002Fcode> with \u003Ccode>src\u003C\u002Fcode> and \u003Ccode>alt\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Same image, multiple sizes for different screens\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>\u003Ccode>srcset\u003C\u002Fcode> and \u003Ccode>sizes\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Modern format with an older fallback\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>\u003Ccode><picture>\u003C\u002Fcode> with \u003Ccode><source>\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Image needs a visible caption\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>\u003Ccode><figure>\u003C\u002Fcode> and \u003Ccode><figcaption>\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Image should link elsewhere\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>\u003Ccode><img>\u003C\u002Fcode> wrapped in \u003Ccode><a>\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>Offscreen images on a long page\u003C\u002Fp>\u003C\u002Ftd>\u003Ctd rowspan=\"1\" colspan=\"1\">\u003Cp>\u003Ccode>loading=\"lazy\"\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Ch2 id=\"faq-about-adding-images-in-html\">FAQ About Adding Images in HTML\u003C\u002Fh2>\u003Cp>\u003Cstrong>What is the correct HTML tag for an image?\u003C\u002Fstrong> The \u003Ccode><img>\u003C\u002Fcode> tag, with \u003Ccode>src\u003C\u002Fcode> pointing to the file and \u003Ccode>alt\u003C\u002Fcode> describing it for accessibility.\u003C\u002Fp>\u003Cp>\u003Cstrong>Do I need both width and height on every image?\u003C\u002Fstrong> Not strictly, but including both helps the browser reserve layout space before the image loads, which reduces content shifting as the page renders.\u003C\u002Fp>\u003Cp>\u003Cstrong>Why isn't my image showing up?\u003C\u002Fstrong> The most frequent cause is an incorrect file path, either a typo, a wrong relative path, or a case mismatch between the file name and the \u003Ccode>src\u003C\u002Fcode> value.\u003C\u002Fp>\u003Cp>\u003Cstrong>Can I use a URL from another website as the src?\u003C\u002Fstrong> Yes, \u003Ccode>src\u003C\u002Fcode> accepts any valid absolute URL, though the image will only display as long as that external file stays online and the host allows outside embedding.\u003C\u002Fp>\u003Cp>\u003Cstrong>What's the difference between img and picture?\u003C\u002Fstrong> \u003Ccode><img>\u003C\u002Fcode> displays an image and can use \u003Ccode>srcset\u003C\u002Fcode> for different resolutions. \u003Ccode><picture>\u003C\u002Fcode> lets you provide different image formats or art-directed versions, with a fallback \u003Ccode><img>\u003C\u002Fcode>.\u003C\u002Fp>\u003Cp>\u003Cstrong>How do I make an image clickable?\u003C\u002Fstrong> Wrap the \u003Ccode><img>\u003C\u002Fcode> tag inside an \u003Ccode><a href=\"...\">\u003C\u002Fcode> element.\u003C\u002Fp>\u003Ch2 id=\"the-short-version\">The Short Version\u003C\u002Fh2>\u003Cp>Once you know the basic \u003Ccode><img>\u003C\u002Fcode> syntax, the rest is about choosing the right technique for the situation: \u003Ccode>width\u003C\u002Fcode> and \u003Ccode>height\u003C\u002Fcode> to stop layout shift, \u003Ccode>srcset\u003C\u002Fcode> and \u003Ccode>sizes\u003C\u002Fcode> for responsive files, \u003Ccode><picture>\u003C\u002Fcode> for format fallbacks, and \u003Ccode><figure>\u003C\u002Fcode> when a caption belongs with the image. Get the file path right first, since that's where most broken images actually come from.\u003C\u002Fp>",[100,322],{"id":101,"title":102,"slug":103,"excerpt":104,"author":105,"categories":109,"featured_image":111,"reading_time_minutes":114,"meta_title":115,"meta_description":104,"og_image":5,"meta_robots":116,"schema_type":46,"faq_json":5,"video_url":5,"toc_json":117,"published_at":321,"updated_at":321},3,"What Is WPF in C#? A Complete Guide to Windows Presentation Foundation","what-is-wpf-in-csharp","What is WPF in C#? A clear guide to Windows Presentation Foundation, how it works with C# and XAML, and whether it's worth learning in 2026.",{"slug":32,"display_name":33,"job_title":5,"short_bio":5,"expertise_tags":106,"headshot":5,"long_bio":5,"credentials":5,"twitter_url":5,"linkedin_url":5,"github_url":5,"personal_website_url":5,"other_sameas_urls":5,"topics":107,"posts":108},[],[],[],[110],{"name":20,"slug":21},{"url":112,"alt_text":113,"width":5,"height":5},"\u002Fstorage\u002Fmedia\u002F01M20ZGFAW00NYSYC5YMV0SG53.webp","WPF in C# complete guide infographic featuring Visual Studio XAML designer, data binding architecture, MVVM pattern icons, and C# code logic on a laptop screen.",13,"What Is WPF in C#?",[],[118,129,141,157,165,197,213,237,253,261,277,297,309,313,317],{"id":119,"text":115,"level":28,"children":120},"what-is-wpf-in-c",[121,125],{"id":122,"text":123,"level":101,"children":124},"is-wpf-part-of-c-or-net","Is WPF Part of C# or .NET?",[],{"id":126,"text":127,"level":101,"children":128},"what-does-wpf-stand-for","What Does WPF Stand For?",[],{"id":130,"text":131,"level":28,"children":132},"what-is-wpf-used-for","What Is WPF Used For?",[133,137],{"id":134,"text":135,"level":101,"children":136},"what-can-you-build-with-wpf","What Can You Build With WPF?",[],{"id":138,"text":139,"level":101,"children":140},"what-cant-wpf-be-used-for","What Can't WPF Be Used For?",[],{"id":142,"text":143,"level":28,"children":144},"how-does-wpf-work-with-c","How Does WPF Work With C#?",[145,149,153],{"id":146,"text":147,"level":101,"children":148},"what-is-xaml-in-wpf","What Is XAML in WPF?",[],{"id":150,"text":151,"level":101,"children":152},"what-is-code-behind-in-wpf","What Is Code-Behind in WPF?",[],{"id":154,"text":155,"level":101,"children":156},"simple-wpf-xaml-and-c-example","Simple WPF XAML and C# Example",[],{"id":158,"text":159,"level":28,"children":160},"how-is-a-wpf-application-structured","How Is a WPF Application Structured?",[161],{"id":162,"text":163,"level":101,"children":164},"how-xaml-c-and-wpf-work-together","How XAML, C#, and WPF Work Together",[],{"id":166,"text":167,"level":28,"children":168},"key-features-of-wpf","Key Features of WPF",[169,173,177,181,185,189,193],{"id":170,"text":171,"level":101,"children":172},"xaml-based-ui","XAML-Based UI",[],{"id":174,"text":175,"level":101,"children":176},"data-binding","Data Binding",[],{"id":178,"text":179,"level":101,"children":180},"dependency-properties","Dependency Properties",[],{"id":182,"text":183,"level":101,"children":184},"routed-events","Routed Events",[],{"id":186,"text":187,"level":101,"children":188},"styles-and-control-templates","Styles and Control Templates",[],{"id":190,"text":191,"level":101,"children":192},"wpf-layout-system","WPF Layout System",[],{"id":194,"text":195,"level":101,"children":196},"graphics-and-animation","Graphics and Animation",[],{"id":198,"text":199,"level":28,"children":200},"what-is-data-binding-in-wpf","What Is Data Binding in WPF?",[201,205,209],{"id":202,"text":203,"level":101,"children":204},"how-wpf-data-binding-works","How WPF Data Binding Works",[],{"id":206,"text":207,"level":101,"children":208},"simple-data-binding-example","Simple Data Binding Example",[],{"id":210,"text":211,"level":101,"children":212},"why-data-binding-matters-in-wpf","Why Data Binding Matters in WPF",[],{"id":214,"text":215,"level":28,"children":216},"what-is-mvvm-in-wpf","What Is MVVM in WPF?",[217,221,225,229,233],{"id":218,"text":219,"level":101,"children":220},"model","Model",[],{"id":222,"text":223,"level":101,"children":224},"view","View",[],{"id":226,"text":227,"level":101,"children":228},"viewmodel","ViewModel",[],{"id":230,"text":231,"level":101,"children":232},"why-is-mvvm-commonly-used-with-wpf","Why Is MVVM Commonly Used With WPF?",[],{"id":234,"text":235,"level":101,"children":236},"is-mvvm-required-for-wpf","Is MVVM Required for WPF?",[],{"id":238,"text":239,"level":28,"children":240},"how-to-create-a-wpf-application-in-c","How to Create a WPF Application in C#",[241,245,249],{"id":242,"text":243,"level":101,"children":244},"what-you-need","What You Need",[],{"id":246,"text":247,"level":101,"children":248},"create-a-wpf-project","Create a WPF Project",[],{"id":250,"text":251,"level":101,"children":252},"build-and-run-your-first-wpf-app","Build and Run Your First WPF App",[],{"id":254,"text":255,"level":28,"children":256},"wpf-vs-windows-forms","WPF vs Windows Forms",[257],{"id":258,"text":259,"level":101,"children":260},"which-is-better-wpf-or-winforms","Which Is Better: WPF or WinForms?",[],{"id":262,"text":263,"level":28,"children":264},"wpf-vs-winui-3","WPF vs WinUI 3",[265,269,273],{"id":266,"text":267,"level":101,"children":268},"what-is-winui-3","What Is WinUI 3?",[],{"id":270,"text":271,"level":101,"children":272},"wpf-vs-winui-3-main-differences","WPF vs WinUI 3: Main Differences",[],{"id":274,"text":275,"level":101,"children":276},"should-you-learn-wpf-or-winui","Should You Learn WPF or WinUI?",[],{"id":278,"text":279,"level":28,"children":280},"is-wpf-still-relevant-in-2026","Is WPF Still Relevant in 2026?",[281,285,289,293],{"id":282,"text":283,"level":101,"children":284},"is-wpf-still-supported","Is WPF Still Supported?",[],{"id":286,"text":287,"level":101,"children":288},"does-wpf-work-with-modern-net","Does WPF Work With Modern .NET?",[],{"id":290,"text":291,"level":101,"children":292},"is-wpf-still-used-for-business-applications","Is WPF Still Used for Business Applications?",[],{"id":294,"text":295,"level":101,"children":296},"should-you-learn-wpf-today","Should You Learn WPF Today?",[],{"id":298,"text":299,"level":28,"children":300},"advantages-and-disadvantages-of-wpf","Advantages and Disadvantages of WPF",[301,305],{"id":302,"text":303,"level":101,"children":304},"advantages-of-wpf","Advantages of WPF",[],{"id":306,"text":307,"level":101,"children":308},"disadvantages-of-wpf","Disadvantages of WPF",[],{"id":310,"text":311,"level":28,"children":312},"common-wpf-terms-beginners-should-know","Common WPF Terms Beginners Should Know",[],{"id":314,"text":315,"level":28,"children":316},"frequently-asked-questions-about-wpf-in-c","Frequently Asked Questions About WPF in C#",[],{"id":318,"text":319,"level":28,"children":320},"final-answer-what-is-wpf-in-c","Final Answer: What Is WPF in C#?",[],"2026-09-08T17:04:51+00:00",{"id":12,"title":323,"slug":324,"excerpt":5,"author":325,"categories":329,"featured_image":331,"reading_time_minutes":335,"meta_title":336,"meta_description":337,"og_image":5,"meta_robots":338,"schema_type":46,"faq_json":5,"video_url":5,"toc_json":339,"published_at":386,"updated_at":386},"How to Center a Div in CSS","how-to-center-a-div-in-css",{"slug":32,"display_name":33,"job_title":5,"short_bio":5,"expertise_tags":326,"headshot":5,"long_bio":5,"credentials":5,"twitter_url":5,"linkedin_url":5,"github_url":5,"personal_website_url":5,"other_sameas_urls":5,"topics":327,"posts":328},[],[],[],[330],{"name":9,"slug":10},{"url":332,"alt_text":5,"width":333,"height":334},"https:\u002F\u002Fwpfsharp.com\u002Fstorage\u002Fblog\u002Ffeatured\u002Fhow-to-center-a-div-in-css-v1.webp",1200,628,8,"CSS Tutorials & Guides for Beginners | WPFSharp","A practical guide to how to center a div in CSS across real scenarios, from full-page layouts to modals, plus fixes for when it won't work.",[],[340,344,348,352,356,360,364,368,372,376,380,384],{"id":341,"text":342,"level":28,"children":343},"why-center-a-div-actually-means-four-different-things","Why \"Center a Div\" Actually Means Four Different Things",[],{"id":345,"text":346,"level":28,"children":347},"how-to-center-a-div-in-css-on-a-full-page-or-hero-section","How to Center a Div in CSS on a Full Page or Hero Section",[],{"id":349,"text":350,"level":28,"children":351},"keeping-an-element-centered-inside-an-existing-layout","Keeping an Element Centered Inside an Existing Layout",[],{"id":353,"text":354,"level":28,"children":355},"centering-with-css-grid-instead-of-flexbox","Centering With CSS Grid Instead of Flexbox",[],{"id":357,"text":358,"level":28,"children":359},"centering-a-modal-tooltip-or-overlay","Centering a Modal, Tooltip, or Overlay",[],{"id":361,"text":362,"level":28,"children":363},"the-text-align-trap-beginners-fall-into","The text-align Trap Beginners Fall Into",[],{"id":365,"text":366,"level":28,"children":367},"making-centered-layouts-actually-responsive","Making Centered Layouts Actually Responsive",[],{"id":369,"text":370,"level":28,"children":371},"troubleshooting-why-your-div-wont-center","Troubleshooting: Why Your Div Won't Center",[],{"id":373,"text":374,"level":28,"children":375},"quick-reference-which-method-fits-your-situation","Quick Reference: Which Method Fits Your Situation",[],{"id":377,"text":378,"level":28,"children":379},"mistakes-worth-avoiding","Mistakes Worth Avoiding",[],{"id":381,"text":382,"level":28,"children":383},"faq-about-centering-a-div-in-css","FAQ About Centering a Div in CSS",[],{"id":93,"text":94,"level":28,"children":385},[],"2026-09-07T16:53:48+00:00",{"data":388,"links":569,"meta":571},[389,501,535],{"id":101,"title":102,"slug":103,"excerpt":104,"author":390,"categories":394,"featured_image":396,"reading_time_minutes":114,"meta_title":115,"meta_description":104,"og_image":5,"meta_robots":397,"schema_type":46,"faq_json":5,"video_url":5,"toc_json":398,"published_at":321,"updated_at":321},{"slug":32,"display_name":33,"job_title":5,"short_bio":5,"expertise_tags":391,"headshot":5,"long_bio":5,"credentials":5,"twitter_url":5,"linkedin_url":5,"github_url":5,"personal_website_url":5,"other_sameas_urls":5,"topics":392,"posts":393},[],[],[],[395],{"name":20,"slug":21},{"url":112,"alt_text":113,"width":5,"height":5},[],[399,405,411,419,423,439,447,459,467,471,479,489,495,497,499],{"id":119,"text":115,"level":28,"children":400},[401,403],{"id":122,"text":123,"level":101,"children":402},[],{"id":126,"text":127,"level":101,"children":404},[],{"id":130,"text":131,"level":28,"children":406},[407,409],{"id":134,"text":135,"level":101,"children":408},[],{"id":138,"text":139,"level":101,"children":410},[],{"id":142,"text":143,"level":28,"children":412},[413,415,417],{"id":146,"text":147,"level":101,"children":414},[],{"id":150,"text":151,"level":101,"children":416},[],{"id":154,"text":155,"level":101,"children":418},[],{"id":158,"text":159,"level":28,"children":420},[421],{"id":162,"text":163,"level":101,"children":422},[],{"id":166,"text":167,"level":28,"children":424},[425,427,429,431,433,435,437],{"id":170,"text":171,"level":101,"children":426},[],{"id":174,"text":175,"level":101,"children":428},[],{"id":178,"text":179,"level":101,"children":430},[],{"id":182,"text":183,"level":101,"children":432},[],{"id":186,"text":187,"level":101,"children":434},[],{"id":190,"text":191,"level":101,"children":436},[],{"id":194,"text":195,"level":101,"children":438},[],{"id":198,"text":199,"level":28,"children":440},[441,443,445],{"id":202,"text":203,"level":101,"children":442},[],{"id":206,"text":207,"level":101,"children":444},[],{"id":210,"text":211,"level":101,"children":446},[],{"id":214,"text":215,"level":28,"children":448},[449,451,453,455,457],{"id":218,"text":219,"level":101,"children":450},[],{"id":222,"text":223,"level":101,"children":452},[],{"id":226,"text":227,"level":101,"children":454},[],{"id":230,"text":231,"level":101,"children":456},[],{"id":234,"text":235,"level":101,"children":458},[],{"id":238,"text":239,"level":28,"children":460},[461,463,465],{"id":242,"text":243,"level":101,"children":462},[],{"id":246,"text":247,"level":101,"children":464},[],{"id":250,"text":251,"level":101,"children":466},[],{"id":254,"text":255,"level":28,"children":468},[469],{"id":258,"text":259,"level":101,"children":470},[],{"id":262,"text":263,"level":28,"children":472},[473,475,477],{"id":266,"text":267,"level":101,"children":474},[],{"id":270,"text":271,"level":101,"children":476},[],{"id":274,"text":275,"level":101,"children":478},[],{"id":278,"text":279,"level":28,"children":480},[481,483,485,487],{"id":282,"text":283,"level":101,"children":482},[],{"id":286,"text":287,"level":101,"children":484},[],{"id":290,"text":291,"level":101,"children":486},[],{"id":294,"text":295,"level":101,"children":488},[],{"id":298,"text":299,"level":28,"children":490},[491,493],{"id":302,"text":303,"level":101,"children":492},[],{"id":306,"text":307,"level":101,"children":494},[],{"id":310,"text":311,"level":28,"children":496},[],{"id":314,"text":315,"level":28,"children":498},[],{"id":318,"text":319,"level":28,"children":500},[],{"id":28,"title":29,"slug":30,"excerpt":5,"author":502,"categories":506,"featured_image":508,"reading_time_minutes":42,"meta_title":43,"meta_description":44,"og_image":5,"meta_robots":509,"schema_type":46,"faq_json":5,"video_url":5,"toc_json":510,"published_at":96,"updated_at":97},{"slug":32,"display_name":33,"job_title":5,"short_bio":5,"expertise_tags":503,"headshot":5,"long_bio":5,"credentials":5,"twitter_url":5,"linkedin_url":5,"github_url":5,"personal_website_url":5,"other_sameas_urls":5,"topics":504,"posts":505},[],[],[],[507],{"name":15,"slug":16},{"url":40,"alt_text":41,"width":5,"height":5},[],[511,513,515,517,519,521,523,525,527,529,531,533],{"id":49,"text":50,"level":28,"children":512},[],{"id":53,"text":54,"level":28,"children":514},[],{"id":57,"text":58,"level":28,"children":516},[],{"id":61,"text":62,"level":28,"children":518},[],{"id":65,"text":66,"level":28,"children":520},[],{"id":69,"text":70,"level":28,"children":522},[],{"id":73,"text":74,"level":28,"children":524},[],{"id":77,"text":78,"level":28,"children":526},[],{"id":81,"text":82,"level":28,"children":528},[],{"id":85,"text":86,"level":28,"children":530},[],{"id":89,"text":90,"level":28,"children":532},[],{"id":93,"text":94,"level":28,"children":534},[],{"id":12,"title":323,"slug":324,"excerpt":5,"author":536,"categories":540,"featured_image":542,"reading_time_minutes":335,"meta_title":336,"meta_description":337,"og_image":5,"meta_robots":543,"schema_type":46,"faq_json":5,"video_url":5,"toc_json":544,"published_at":386,"updated_at":386},{"slug":32,"display_name":33,"job_title":5,"short_bio":5,"expertise_tags":537,"headshot":5,"long_bio":5,"credentials":5,"twitter_url":5,"linkedin_url":5,"github_url":5,"personal_website_url":5,"other_sameas_urls":5,"topics":538,"posts":539},[],[],[],[541],{"name":9,"slug":10},{"url":332,"alt_text":5,"width":333,"height":334},[],[545,547,549,551,553,555,557,559,561,563,565,567],{"id":341,"text":342,"level":28,"children":546},[],{"id":345,"text":346,"level":28,"children":548},[],{"id":349,"text":350,"level":28,"children":550},[],{"id":353,"text":354,"level":28,"children":552},[],{"id":357,"text":358,"level":28,"children":554},[],{"id":361,"text":362,"level":28,"children":556},[],{"id":365,"text":366,"level":28,"children":558},[],{"id":369,"text":370,"level":28,"children":560},[],{"id":373,"text":374,"level":28,"children":562},[],{"id":377,"text":378,"level":28,"children":564},[],{"id":381,"text":382,"level":28,"children":566},[],{"id":93,"text":94,"level":28,"children":568},[],{"first":570,"last":570,"prev":5,"next":5},"http:\u002F\u002Fapp\u002Fapi\u002Fblog?page=1",{"current_page":12,"from":12,"last_page":12,"links":572,"path":581,"per_page":582,"to":101,"total":101},[573,576,579],{"url":5,"label":574,"page":5,"active":575},"« Previous",false,{"url":570,"label":577,"page":12,"active":578},"1",true,{"url":5,"label":580,"page":5,"active":575},"Next »","http:\u002F\u002Fapp\u002Fapi\u002Fblog",9]