[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"blog-categories":6,"course-tree":35,"topic:html-elements-tags-explained":320},{"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,25,30],{"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.",2,[],{"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":23,"subcategories":24},"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.",1,[],{"name":26,"slug":27,"description":28,"post_count":23,"subcategories":29},"Python","python","Learn Python with practical tutorials covering strings, lists, functions, exceptions, files, packages, virtual environments, modules, classes, and beginner programming concepts.",[],{"name":31,"slug":32,"description":33,"post_count":23,"subcategories":34},"Java","java","Learn Java with practical tutorials and examples for beginners. Explore Java syntax, variables, data types, classes, objects, methods, inheritance, exceptions, collections, and more with clear explanations and real code examples.",[],{"data":36},[37],{"id":23,"name":15,"slug":38,"icon":5,"icon_url":5,"short_description":39,"meta_title":40,"meta_description":41,"og_image":42,"locale":43,"subcategories":44},"html-tutorial","Welcome to our HTML Tutorial for Beginners, a complete guide designed to help you learn HTML from the ground up.\n\nHTML, which stands for HyperText Markup Language, is the standard language used to structure content on the web. Whether you want to become a web developer, build your own website, or continue learning CSS and JavaScript, understanding HTML is an essential first step.\n\nThis HTML course takes you through the fundamentals step by step, using simple explanations and practical examples. ","HTML Tutorial for Beginners - Learn HTML Step by Step","Learn HTML from scratch with our beginner-friendly HTML tutorial. Understand HTML tags, elements, forms, tables, links, images, semantic HTML and more with practical examples.","https:\u002F\u002Fwpfsharp.com\u002Fstorage\u002Fcourses\u002Fog\u002F01M2GK0XN45C0B937NF9XFAD4S.webp","en",[45,72,108,132,192,226,240,268,292,308],{"id":23,"name":46,"slug":47,"order_index":23,"topics":48},"HTML Fundamentals & Setup","html-fundamentals-setup",[49,53,56,60,64,68],{"id":12,"title":50,"slug":51,"order_index":23,"cornerstone":52,"reading_time_minutes":12},"HTML Editors & Environment Setup","html-editors-and-environment-setup",false,{"id":23,"title":54,"slug":55,"order_index":23,"cornerstone":52,"reading_time_minutes":23},"HTML Introduction & History","html-introduction-and-history",{"id":57,"title":58,"slug":59,"order_index":57,"cornerstone":52,"reading_time_minutes":12},3,"HTML Basic Syntax & Document Structure","html-basic-syntax-document-structure",{"id":61,"title":62,"slug":63,"order_index":61,"cornerstone":52,"reading_time_minutes":12},4,"HTML Elements & Tags Explained","html-elements-tags-explained",{"id":65,"title":66,"slug":67,"order_index":65,"cornerstone":52,"reading_time_minutes":12},5,"HTML Attributes (Global & Standard)","html-attributes-global-standard",{"id":69,"title":70,"slug":71,"order_index":69,"cornerstone":52,"reading_time_minutes":12},6,"Understanding the DOCTYPE & HTML5 Boilerplate","understanding-doctype-html5-boilerplate",{"id":12,"name":73,"slug":74,"order_index":12,"topics":75},"Text & Content Basics","text-content-basics",[76,80,84,88,92,96,100,104],{"id":77,"title":78,"slug":79,"order_index":77,"cornerstone":52,"reading_time_minutes":12},7,"HTML Headings (H1–H6) & SEO Best Practices","html-headings-h1-h6-seo-best-practices",{"id":81,"title":82,"slug":83,"order_index":81,"cornerstone":52,"reading_time_minutes":12},8,"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":85,"title":86,"slug":87,"order_index":85,"cornerstone":52,"reading_time_minutes":23},9,"HTML Text Formatting (Bold, Italic, Mark, etc.)","html-text-formatting-bold-italic-mark",{"id":89,"title":90,"slug":91,"order_index":89,"cornerstone":52,"reading_time_minutes":12},10,"HTML Styles (Inline CSS Basics)","html-styles-inline-css-basics",{"id":93,"title":94,"slug":95,"order_index":93,"cornerstone":52,"reading_time_minutes":12},11,"HTML Quotations & Citations (blockquote, q, cite)","html-quotations-citations-blockquote-q-cite",{"id":97,"title":98,"slug":99,"order_index":97,"cornerstone":52,"reading_time_minutes":12},12,"HTML Comments (Best Practices)","html-comments-best-practices",{"id":101,"title":102,"slug":103,"order_index":101,"cornerstone":52,"reading_time_minutes":12},13,"HTML Colors (Names, HEX, RGB, HSL)","html-colors-names-hex-rgb-hsl",{"id":105,"title":106,"slug":107,"order_index":105,"cornerstone":52,"reading_time_minutes":12},14,"HTML & CSS Integration (Inline, Internal, External)","html-css-integration-inline-internal-external",{"id":57,"name":109,"slug":110,"order_index":57,"topics":111},"Links, Media & Navigation","links-media-navigation",[112,116,120,124,128],{"id":113,"title":114,"slug":115,"order_index":113,"cornerstone":52,"reading_time_minutes":12},15,"HTML Links (Anchor Tags & Hyperlinks)","html-links-anchor-tags-hyperlinks",{"id":117,"title":118,"slug":119,"order_index":117,"cornerstone":52,"reading_time_minutes":12},16,"HTML Images (Alt Text, Lazy Loading, Formats)","html-images-alt-text-lazy-loading-formats",{"id":121,"title":122,"slug":123,"order_index":121,"cornerstone":52,"reading_time_minutes":23},17,"HTML Favicon Setup","html-favicon-setup",{"id":125,"title":126,"slug":127,"order_index":125,"cornerstone":52,"reading_time_minutes":12},18,"HTML Page Title & Meta Tags (SEO Essentials)","html-page-title-meta-tags-seo-essentials",{"id":129,"title":130,"slug":131,"order_index":129,"cornerstone":52,"reading_time_minutes":12},19,"HTML File Paths (Absolute vs Relative)","html-file-paths-absolute-vs-relative",{"id":61,"name":133,"slug":134,"order_index":61,"topics":135},"Structuring Content","structuring-content",[136,141,146,151,156,160,164,168,172,176,180,184,188],{"id":137,"title":138,"slug":139,"order_index":140,"cornerstone":52,"reading_time_minutes":12},24,"HTML Tables Explained: Rows, Columns & Merging Cells","html-tables-rows-columns-merging-cells",20,{"id":142,"title":143,"slug":144,"order_index":145,"cornerstone":52,"reading_time_minutes":12},25,"HTML Lists: Ordered, Unordered & Description Lists","html-lists-ordered-unordered-description",21,{"id":147,"title":148,"slug":149,"order_index":150,"cornerstone":52,"reading_time_minutes":12},26,"HTML Block vs Inline Elements Explained","html-block-vs-inline-elements",22,{"id":152,"title":153,"slug":154,"order_index":155,"cornerstone":52,"reading_time_minutes":23},27,"HTML Div & Span: Generic Containers Explained","html-div-and-span-containers",23,{"id":157,"title":158,"slug":159,"order_index":137,"cornerstone":52,"reading_time_minutes":12},28,"HTML Classes vs ID: Selectors Explained","html-classes-vs-id-selectors-explained",{"id":161,"title":162,"slug":163,"order_index":142,"cornerstone":52,"reading_time_minutes":23},29,"HTML Iframes: Embedding External Content","html-iframes-embedding-content",{"id":165,"title":166,"slug":167,"order_index":147,"cornerstone":52,"reading_time_minutes":12},30,"HTML Head Element Deep Dive","html-head-element-deep-dive",{"id":169,"title":170,"slug":171,"order_index":152,"cornerstone":52,"reading_time_minutes":12},31,"HTML Layout Techniques: Header, Nav & Footer","html-layout-techniques-header-nav-footer",{"id":173,"title":174,"slug":175,"order_index":157,"cornerstone":52,"reading_time_minutes":12},32,"Responsive HTML Design: Mobile-First Approach","responsive-html-design-mobile-first-approach",{"id":177,"title":178,"slug":179,"order_index":177,"cornerstone":52,"reading_time_minutes":23},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":181,"title":182,"slug":183,"order_index":181,"cornerstone":52,"reading_time_minutes":12},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":185,"title":186,"slug":187,"order_index":185,"cornerstone":52,"reading_time_minutes":23},35,"HTML URL Encoding Explained","html-url-encoding-explained",{"id":189,"title":190,"slug":191,"order_index":189,"cornerstone":52,"reading_time_minutes":23},36,"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":77,"name":193,"slug":194,"order_index":65,"topics":195},"Forms & User Input","forms-user-input",[196,201,206,211,216,221],{"id":197,"title":198,"slug":199,"order_index":200,"cornerstone":52,"reading_time_minutes":12},49,"HTML Forms Introduction","html-forms-introduction",37,{"id":202,"title":203,"slug":204,"order_index":205,"cornerstone":52,"reading_time_minutes":23},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",38,{"id":207,"title":208,"slug":209,"order_index":210,"cornerstone":52,"reading_time_minutes":23},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":212,"title":213,"slug":214,"order_index":215,"cornerstone":52,"reading_time_minutes":12},52,"HTML Input Types (Modern Types: email, date, color, range)","html-input-types-modern-email-date-color-range",40,{"id":217,"title":218,"slug":219,"order_index":220,"cornerstone":52,"reading_time_minutes":12},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":222,"title":223,"slug":224,"order_index":225,"cornerstone":52,"reading_time_minutes":12},54,"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":81,"name":227,"slug":228,"order_index":69,"topics":229},"Graphics & Visuals","graphics-visuals",[230,235],{"id":231,"title":232,"slug":233,"order_index":234,"cornerstone":52,"reading_time_minutes":57},55,"HTML Canvas (2D Drawing API) 🔥","html-canvas-2d-drawing-api",43,{"id":236,"title":237,"slug":238,"order_index":239,"cornerstone":52,"reading_time_minutes":57},56,"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics",44,{"id":85,"name":241,"slug":242,"order_index":77,"topics":243},"Multimedia","multimedia",[244,249,254,259,264],{"id":245,"title":246,"slug":247,"order_index":248,"cornerstone":52,"reading_time_minutes":12},57,"HTML Media Overview","html-media-overview",45,{"id":250,"title":251,"slug":252,"order_index":253,"cornerstone":52,"reading_time_minutes":12},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player",46,{"id":255,"title":256,"slug":257,"order_index":258,"cornerstone":52,"reading_time_minutes":12},59,"HTML Audio Embedding","html-audio-embedding",47,{"id":260,"title":261,"slug":262,"order_index":263,"cornerstone":52,"reading_time_minutes":12},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":265,"title":266,"slug":267,"order_index":197,"cornerstone":52,"reading_time_minutes":12},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":89,"name":269,"slug":270,"order_index":81,"topics":271},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[272,276,280,284,288],{"id":273,"title":274,"slug":275,"order_index":202,"cornerstone":52,"reading_time_minutes":12},62,"HTML Geolocation API","html-geolocation-api",{"id":277,"title":278,"slug":279,"order_index":207,"cornerstone":52,"reading_time_minutes":12},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":281,"title":282,"slug":283,"order_index":212,"cornerstone":52,"reading_time_minutes":12},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":285,"title":286,"slug":287,"order_index":217,"cornerstone":52,"reading_time_minutes":12},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":289,"title":290,"slug":291,"order_index":222,"cornerstone":52,"reading_time_minutes":12},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":93,"name":293,"slug":294,"order_index":85,"topics":295},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[296,300,304],{"id":297,"title":298,"slug":299,"order_index":231,"cornerstone":52,"reading_time_minutes":12},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":301,"title":302,"slug":303,"order_index":236,"cornerstone":52,"reading_time_minutes":12},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":305,"title":306,"slug":307,"order_index":245,"cornerstone":52,"reading_time_minutes":12},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":97,"name":309,"slug":310,"order_index":89,"topics":311},"Reference & Practice","reference-practice",[312,316],{"id":313,"title":314,"slug":315,"order_index":23,"cornerstone":52,"reading_time_minutes":12},70,"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":317,"title":318,"slug":319,"order_index":12,"cornerstone":52,"reading_time_minutes":12},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"data":321},{"id":61,"title":62,"slug":63,"content":322,"course":323,"subcategory":324,"author":325,"reading_time_minutes":12,"cornerstone":52,"schema_type":331,"faq_json":5,"video_url":5,"canonical_url":332,"meta_title":333,"meta_description":334,"og_image":5,"toc_json":335,"code_examples":358,"quiz":5,"exercises":364,"published_at":5,"updated_at":371,"prev":372,"next":373},"\u003Ch2 id=\"html-elements-tags-explained\">HTML Elements & Tags Explained\u003C\u002Fh2>\u003Cp>\u003Cstrong>HTML elements\u003C\u002Fstrong> are the building blocks of every webpage. An element is made up of a start tag, content, and an end tag, and understanding how elements work is essential before moving on to CSS, JavaScript, or any modern frontend framework like React or Vue.\u003C\u002Fp>\u003Ch3 id=\"what-is-the-difference-between-a-tag-and-an-element\">What Is the Difference Between a Tag and an Element?\u003C\u002Fh3>\u003Cp>This is one of the most searched beginner questions, so let's clear it up:\u003C\u002Fp>\u003Cul>\u003Cli>A \u003Cstrong>tag\u003C\u002Fstrong> is the markup itself, e.g. \u003Ccode><p>\u003C\u002Fcode> or \u003Ccode><\u002Fp>\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>An \u003Cstrong>element\u003C\u002Fstrong> is the tag PLUS its content, e.g. \u003Ccode><p>Hello<\u002Fp>\u003C\u002Fcode>.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3 id=\"types-of-html-elements\">Types of HTML Elements\u003C\u002Fh3>\u003Ch4 id=\"1-block-level-elements\">1. Block-Level Elements\u003C\u002Fh4>\u003Cp>Block-level elements always start on a new line and take up the full width available. Examples include \u003Ccode><div>\u003C\u002Fcode>, \u003Ccode><p>\u003C\u002Fcode>, \u003Ccode><h1>\u003C\u002Fcode>–\u003Ccode><h6>\u003C\u002Fcode>, \u003Ccode><ul>\u003C\u002Fcode>, and \u003Ccode><section>\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch4 id=\"2-inline-elements\">2. Inline Elements\u003C\u002Fh4>\u003Cp>Inline elements only take up as much width as necessary and do not force a line break. Examples include \u003Ccode><span>\u003C\u002Fcode>, \u003Ccode><a>\u003C\u002Fcode>, \u003Ccode><strong>\u003C\u002Fcode>, and \u003Ccode><em>\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch4 id=\"3-semantic-elements-trending-in-modern-html5\">3. Semantic Elements (Trending in Modern HTML5)\u003C\u002Fh4>\u003Cp>\u003Cstrong>Semantic HTML\u003C\u002Fstrong> is one of the biggest trending topics in modern web development because it improves SEO, accessibility, and code readability. Semantic elements clearly describe their meaning to both the browser and the developer:\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ccode><header>\u003C\u002Fcode> — introductory content or navigation\u003C\u002Fli>\u003Cli>\u003Ccode><nav>\u003C\u002Fcode> — navigation links\u003C\u002Fli>\u003Cli>\u003Ccode><main>\u003C\u002Fcode> — the primary content of the page\u003C\u002Fli>\u003Cli>\u003Ccode><section>\u003C\u002Fcode> — a thematic grouping of content\u003C\u002Fli>\u003Cli>\u003Ccode><article>\u003C\u002Fcode> — self-contained, reusable content\u003C\u002Fli>\u003Cli>\u003Ccode><aside>\u003C\u002Fcode> — content tangentially related to the main content\u003C\u002Fli>\u003Cli>\u003Ccode><footer>\u003C\u002Fcode> — footer information\u003C\u002Fli>\u003C\u002Ful>\u003Cpre>\u003Ccode><header>\n  <h1>My Blog<\u002Fh1>\n  <nav>...<\u002Fnav>\n<\u002Fheader>\n<main>\n  <article>\n    <h2>Post Title<\u002Fh2>\n    <p>Post content...<\u002Fp>\n  <\u002Farticle>\n<\u002Fmain>\n<footer>© 2026<\u002Ffooter>\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch4 id=\"4-void-elements\">4. Void Elements\u003C\u002Fh4>\u003Cp>As covered previously, void elements like \u003Ccode><img>\u003C\u002Fcode>, \u003Ccode><br>\u003C\u002Fcode>, and \u003Ccode><input>\u003C\u002Fcode> do not wrap content and don't need a closing tag.\u003C\u002Fp>\u003Ch3 id=\"nesting-elements-correctly\">Nesting Elements Correctly\u003C\u002Fh3>\u003Cp>Elements can (and usually do) contain other elements. This is called the \u003Cstrong>DOM tree\u003C\u002Fstrong> or \u003Cstrong>element hierarchy\u003C\u002Fstrong>, and understanding it is critical for CSS styling and JavaScript DOM manipulation later on.\u003C\u002Fp>\u003Cpre>\u003Ccode><div class='card'>\n  <h3>Card Title<\u002Fh3>\n  <p>Card description text.<\u002Fp>\n  <button>Learn More<\u002Fbutton>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch3 id=\"why-semantic-elements-matter-more-than-ever\">Why Semantic Elements Matter More Than Ever\u003C\u002Fh3>\u003Cp>With the rise of voice search, screen readers, and AI-driven search engines (like AI Overviews), using semantic HTML elements instead of generic \u003Ccode><div>\u003C\u002Fcode> soup has become a major ranking and accessibility factor in 2026 web development standards.\u003C\u002Fp>\u003Ch3 id=\"key-takeaways\">Key Takeaways\u003C\u002Fh3>\u003Cul>\u003Cli>An element = opening tag + content + closing tag.\u003C\u002Fli>\u003Cli>Block-level elements stack vertically; inline elements flow within text.\u003C\u002Fli>\u003Cli>Semantic HTML5 elements improve SEO, accessibility, and code clarity.\u003C\u002Fli>\u003Cli>Elements nest inside each other to form the DOM tree.\u003C\u002Fli>\u003C\u002Ful>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><header>\n  <h1>My Website<\u002Fh1>\n  <nav>\n    <a href='#'>Home<\u002Fa>\n    <a href='#'>About<\u002Fa>\n  <\u002Fnav>\n<\u002Fheader>\n<main>\n  <section>\n    <h2>Welcome<\u002Fh2>\n    <p>This uses semantic HTML5 elements.<\u002Fp>\n  <\u002Fsection>\n<\u002Fmain>\n<footer>\n  <p>© 2026 My Website<\u002Fp>\n<\u002Ffooter>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><!-- Block vs Inline comparison -->\n<div style='background:#eee; padding:10px;'>\n  <p>This paragraph is block-level.<\u002Fp>\n  <span style='background:yellow;'>This span is inline.<\u002Fspan>\n  <span style='background:orange;'>So is this one.<\u002Fspan>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":15,"slug":38},{"name":46,"slug":47},{"slug":326,"display_name":327,"job_title":5,"short_bio":5,"expertise_tags":328,"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":329,"posts":330},"badar-khalil","Badar Khalil",[],[],[],"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Fhtml-elements-tags-explained","HTML Elements & Tags Explained (With Examples)","Master HTML elements and tags with a complete guide covering block-level, inline, semantic, and void elements, plus modern HTML5 best practices.",[336],{"id":63,"text":62,"level":12,"children":337},[338,342,346,350,354],{"id":339,"text":340,"level":57,"children":341},"what-is-the-difference-between-a-tag-and-an-element","What Is the Difference Between a Tag and an Element?",[],{"id":343,"text":344,"level":57,"children":345},"types-of-html-elements","Types of HTML Elements",[],{"id":347,"text":348,"level":57,"children":349},"nesting-elements-correctly","Nesting Elements Correctly",[],{"id":351,"text":352,"level":57,"children":353},"why-semantic-elements-matter-more-than-ever","Why Semantic Elements Matter More Than Ever",[],{"id":355,"text":356,"level":57,"children":357},"key-takeaways","Key Takeaways",[],[359,362],{"id":89,"language":16,"code":360,"is_editable":361},"\u003Cheader>\n  \u003Ch1>My Website\u003C\u002Fh1>\n  \u003Cnav>\n    \u003Ca href='#'>Home\u003C\u002Fa>\n    \u003Ca href='#'>About\u003C\u002Fa>\n  \u003C\u002Fnav>\n\u003C\u002Fheader>\n\u003Cmain>\n  \u003Csection>\n    \u003Ch2>Welcome\u003C\u002Fh2>\n    \u003Cp>This uses semantic HTML5 elements.\u003C\u002Fp>\n  \u003C\u002Fsection>\n\u003C\u002Fmain>\n\u003Cfooter>\n  \u003Cp>© 2026 My Website\u003C\u002Fp>\n\u003C\u002Ffooter>",true,{"id":93,"language":16,"code":363,"is_editable":361},"\u003C!-- Block vs Inline comparison -->\n\u003Cdiv style='background:#eee; padding:10px;'>\n  \u003Cp>This paragraph is block-level.\u003C\u002Fp>\n  \u003Cspan style='background:yellow;'>This span is inline.\u003C\u002Fspan>\n  \u003Cspan style='background:orange;'>So is this one.\u003C\u002Fspan>\n\u003C\u002Fdiv>",[365],{"id":12,"title":366,"slug":367,"prompt":368,"starter_code":369,"expected_output":370,"language":16,"order_index":23},"Rebuild a Page Using Semantic Elements","rebuild-page-semantic-elements","Convert the following div-based layout into semantic HTML5 using header, nav, main, section, and footer tags.","\u003Cdiv class='header'>\n  \u003Cdiv class='title'>My Site\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cdiv class='content'>\n  \u003Cdiv class='post'>Hello World\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cdiv class='footer'>Copyright 2026\u003C\u002Fdiv>","","2026-09-27T16:49:46+00:00",{"id":57,"slug":59,"title":58},{"id":65,"slug":67,"title":66}]