{"id":24741,"date":"2022-10-05T12:00:31","date_gmt":"2022-10-05T12:00:31","guid":{"rendered":"https:\/\/kb.hostatom.com\/?p=24741"},"modified":"2025-11-07T06:31:29","modified_gmt":"2025-11-07T06:31:29","slug":"html-layout-elements-and-techniques","status":"publish","type":"post","link":"https:\/\/kb.hostatom.com\/lesson\/24741\/","title":{"rendered":"HTML\u00a0Layout and Techniques"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"24741\" class=\"elementor elementor-24741\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-34625a0d e-flex e-con-boxed e-con e-parent\" data-id=\"34625a0d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-838d070 elementor-widget elementor-widget-text-editor\" data-id=\"838d070\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>HTML Layout \u0e04\u0e37\u0e2d <strong>\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e27\u0e32\u0e07\u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e40\u0e1e\u0e08 (Web Page Structure)<\/strong> \u0e42\u0e14\u0e22\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e41\u0e1a\u0e48\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e2d\u0e2d\u0e01\u0e40\u0e1b\u0e47\u0e19\u0e2b\u0e25\u0e32\u0e22\u0e04\u0e2d\u0e25\u0e31\u0e21\u0e19\u0e4c \u0e40\u0e2b\u0e21\u0e37\u0e2d\u0e19\u0e19\u0e34\u0e15\u0e22\u0e2a\u0e32\u0e23\u0e2b\u0e23\u0e37\u0e2d\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e1e\u0e34\u0e21\u0e1e\u0e4c \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e14\u0e39\u0e40\u0e1b\u0e47\u0e19\u0e23\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e1a\u0e41\u0e25\u0e30\u0e40\u0e02\u0e49\u0e32\u0e43\u0e08\u0e07\u0e48\u0e32\u0e22\u0e02\u0e36\u0e49\u0e19<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8d99a63 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"8d99a63\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-914ea7d elementor-widget elementor-widget-heading\" data-id=\"914ea7d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">HTML Layout Elements<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ef04428 elementor-widget elementor-widget-text-editor\" data-id=\"ef04428\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\tHTML \u0e21\u0e35\u0e41\u0e17\u0e47\u0e01\u0e2b\u0e25\u0e32\u0e22\u0e15\u0e31\u0e27\u0e17\u0e35\u0e48\u0e43\u0e0a\u0e49\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e2a\u0e48\u0e27\u0e19\u0e15\u0e48\u0e32\u0e07 \u0e46 \u0e02\u0e2d\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a \u0e40\u0e0a\u0e48\u0e19\t\t\t\t\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b4c53e8 e-con-full e-flex e-con e-child\" data-id=\"b4c53e8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5b6b452 elementor-widget elementor-widget-image\" data-id=\"5b6b452\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"237\" height=\"301\" src=\"https:\/\/kb.hostatom.com\/lesson\/wp-content\/uploads\/2022\/10\/24741-003.webp\" class=\"attachment-large size-large wp-image-34651\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0e19f5c elementor-widget elementor-widget-text-editor\" data-id=\"0e19f5c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<ul><li><code>&lt;header&gt;<\/code> \u0e2a\u0e48\u0e27\u0e19\u0e2b\u0e31\u0e27\u0e02\u0e2d\u0e07\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e2b\u0e23\u0e37\u0e2d\u0e02\u0e2d\u0e07\u0e2b\u0e19\u0e49\u0e32<\/li><li><code>&lt;nav&gt;<\/code>\u00a0\u0e2a\u0e48\u0e27\u0e19\u0e02\u0e2d\u0e07\u0e25\u0e34\u0e07\u0e01\u0e4c\u0e19\u0e33\u0e17\u0e32\u0e07 (Navigation Bar)<\/li><li><code>&lt;section&gt;<\/code>\u00a0\u0e2a\u0e48\u0e27\u0e19\u0e02\u0e2d\u0e07\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e2b\u0e25\u0e31\u0e01\u0e43\u0e19\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23<\/li><li><code>&lt;article&gt;<\/code>\u00a0\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e22\u0e48\u0e2d\u0e22 \u0e40\u0e0a\u0e48\u0e19 \u0e02\u0e48\u0e32\u0e27\u0e2b\u0e23\u0e37\u0e2d\u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21<\/li><li><code>&lt;aside&gt;<\/code>\u00a0\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e17\u0e35\u0e48\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e02\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e1a\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e2b\u0e25\u0e31\u0e01 \u0e40\u0e0a\u0e48\u0e19 Sidebar<\/li><li><code>&lt;footer&gt;<\/code>\u00a0\u0e2a\u0e48\u0e27\u0e19\u0e17\u0e49\u0e32\u0e22\u0e02\u0e2d\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a<\/li><li><code>&lt;details&gt;<\/code>\u00a0\u0e43\u0e0a\u0e49\u0e41\u0e2a\u0e14\u0e07\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 \u0e40\u0e1b\u0e34\u0e14\/\u0e1b\u0e34\u0e14\u0e44\u0e14\u0e49<\/li><li><code>&lt;summary&gt;<\/code>\u00a0\u0e2b\u0e31\u0e27\u0e02\u0e49\u0e2d\u0e22\u0e48\u0e2d\u0e02\u0e2d\u0e07 <code>&lt;details&gt;<\/code><\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0614a8f elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"0614a8f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f3fc2e2 elementor-widget elementor-widget-heading\" data-id=\"f3fc2e2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\u0e40\u0e17\u0e04\u0e19\u0e34\u0e04\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49 HTML Layout<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bbf349c elementor-widget elementor-widget-text-editor\" data-id=\"bbf349c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t\u0e21\u0e35\u0e2d\u0e22\u0e39\u0e48\u0e2b\u0e25\u0e32\u0e22\u0e27\u0e34\u0e18\u0e35\u0e43\u0e19\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e27\u0e32\u0e07\u0e04\u0e2d\u0e25\u0e31\u0e21\u0e19\u0e4c\u0e41\u0e25\u0e30\u0e2d\u0e07\u0e04\u0e4c\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e43\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a \u0e42\u0e14\u0e22\u0e2b\u0e25\u0e31\u0e01 \u0e46 \u0e21\u0e35 4 \u0e27\u0e34\u0e18\u0e35\u0e04\u0e37\u0e2d\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b19d67b elementor-widget elementor-widget-text-editor\" data-id=\"b19d67b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<ul>\n<li>CSS Framework<\/li>\n<li>CSS Float Property<\/li>\n<li>CSS Flexbox<\/li>\n<li>CSS Grid<\/li>\n<\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ab8a794 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"ab8a794\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bfbef22 elementor-widget elementor-widget-heading\" data-id=\"bfbef22\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">CSS Framework<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-81f830e elementor-widget elementor-widget-text-editor\" data-id=\"81f830e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t\u0e2b\u0e32\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07 Layout \u0e2d\u0e22\u0e48\u0e32\u0e07\u0e23\u0e27\u0e14\u0e40\u0e23\u0e47\u0e27 \u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e43\u0e0a\u0e49 \u0e40\u0e1f\u0e23\u0e21\u0e40\u0e27\u0e34\u0e23\u0e4c\u0e01 CSS \u0e40\u0e0a\u0e48\u0e19  Bootstrap, Bulma, Tailwind CSS \u0e2b\u0e23\u0e37\u0e2d Semantic UI\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d6dca13 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"d6dca13\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a8a840f elementor-widget elementor-widget-heading\" data-id=\"a8a840f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">CSS Float Layout\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b19a84f elementor-widget elementor-widget-text-editor\" data-id=\"b19a84f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49 property <code>float<\/code> \u0e43\u0e19 CSS \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e08\u0e31\u0e14\u0e40\u0e25\u0e22\u0e4c\u0e40\u0e2d\u0e32\u0e15\u0e4c\u0e02\u0e2d\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a \u0e21\u0e31\u0e01\u0e17\u0e33\u0e07\u0e32\u0e19\u0e23\u0e48\u0e27\u0e21\u0e01\u0e31\u0e1a <code>clear<\/code> \u0e0b\u0e36\u0e48\u0e07\u0e43\u0e0a\u0e49\u0e43\u0e19\u0e01\u0e32\u0e23\u0e25\u0e49\u0e32\u0e07\u0e04\u0e48\u0e32\u0e01\u0e32\u0e23\u0e25\u0e2d\u0e22\u0e02\u0e2d\u0e07\u0e2d\u0e07\u0e04\u0e4c\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a <strong>\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e23\u0e23\u0e30\u0e27\u0e31\u0e07:<\/strong> \u0e2d\u0e07\u0e04\u0e4c\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e17\u0e35\u0e48\u0e16\u0e39\u0e01\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e43\u0e2b\u0e49 float \u0e08\u0e30\u0e22\u0e31\u0e07\u0e04\u0e07\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e42\u0e22\u0e07\u0e2d\u0e22\u0e39\u0e48\u0e01\u0e31\u0e1a\u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e2b\u0e25\u0e31\u0e01\u0e02\u0e2d\u0e07\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 (document flow) \u0e17\u0e33\u0e43\u0e2b\u0e49\u0e40\u0e25\u0e22\u0e4c\u0e40\u0e2d\u0e32\u0e15\u0e4c\u0e2d\u0e32\u0e08\u0e02\u0e32\u0e14\u0e04\u0e27\u0e32\u0e21\u0e22\u0e37\u0e14\u0e2b\u0e22\u0e38\u0e48\u0e19\u0e43\u0e19\u0e1a\u0e32\u0e07\u0e01\u0e23\u0e13\u0e35<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7337587 elementor-widget elementor-widget-image\" data-id=\"7337587\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"729\" height=\"666\" src=\"https:\/\/kb.hostatom.com\/lesson\/wp-content\/uploads\/2022\/10\/24741-001.webp\" class=\"attachment-large size-large wp-image-33068\" alt=\"\" srcset=\"https:\/\/kb.hostatom.com\/lesson\/wp-content\/uploads\/2022\/10\/24741-001.webp 729w, https:\/\/kb.hostatom.com\/lesson\/wp-content\/uploads\/2022\/10\/24741-001-300x274.webp 300w\" sizes=\"auto, (max-width: 729px) 100vw, 729px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-db247c6 elementor-widget elementor-widget-button\" data-id=\"db247c6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/kb.hostatom.com\/lesson\/html\/tryhtml?filename=layout_float\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-external-link-alt\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z\"><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">\u0e25\u0e2d\u0e07\u0e14\u0e39\u0e2a\u0e34<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-df60a19 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"df60a19\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ac49665 elementor-widget elementor-widget-heading\" data-id=\"ac49665\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">CSS Flexbox Layout\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b3eeec0 elementor-widget elementor-widget-text-editor\" data-id=\"b3eeec0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49 Flexbox \u0e0a\u0e48\u0e27\u0e22\u0e43\u0e2b\u0e49\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e27\u0e32\u0e07\u0e2d\u0e07\u0e04\u0e4c\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e1a\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e17\u0e33\u0e07\u0e32\u0e19\u0e44\u0e14\u0e49\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e22\u0e37\u0e14\u0e2b\u0e22\u0e38\u0e48\u0e19\u0e41\u0e25\u0e30\u0e40\u0e1b\u0e47\u0e19\u0e23\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e1a\n\u0e42\u0e14\u0e22\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e15\u0e49\u0e2d\u0e07\u0e1b\u0e23\u0e31\u0e1a\u0e43\u0e2b\u0e49\u0e40\u0e2b\u0e21\u0e32\u0e30\u0e01\u0e31\u0e1a\u0e02\u0e19\u0e32\u0e14\u0e2b\u0e19\u0e49\u0e32\u0e08\u0e2d\u0e41\u0e25\u0e30\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25\u0e17\u0e35\u0e48\u0e41\u0e15\u0e01\u0e15\u0e48\u0e32\u0e07\u0e01\u0e31\u0e19 Flexbox \u0e08\u0e30\u0e0a\u0e48\u0e27\u0e22\u0e43\u0e2b\u0e49\u0e2d\u0e07\u0e04\u0e4c\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e08\u0e31\u0e14\u0e40\u0e23\u0e35\u0e22\u0e07\u0e41\u0e25\u0e30\u0e1b\u0e23\u0e31\u0e1a\u0e02\u0e19\u0e32\u0e14\u0e44\u0e14\u0e49\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e15\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fc90f36 elementor-widget elementor-widget-image\" data-id=\"fc90f36\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"740\" height=\"622\" src=\"https:\/\/kb.hostatom.com\/lesson\/wp-content\/uploads\/2022\/10\/24741-002.webp\" class=\"attachment-large size-large wp-image-33067\" alt=\"\" srcset=\"https:\/\/kb.hostatom.com\/lesson\/wp-content\/uploads\/2022\/10\/24741-002.webp 740w, https:\/\/kb.hostatom.com\/lesson\/wp-content\/uploads\/2022\/10\/24741-002-300x252.webp 300w\" sizes=\"auto, (max-width: 740px) 100vw, 740px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ab20a53 elementor-widget elementor-widget-button\" data-id=\"ab20a53\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/kb.hostatom.com\/lesson\/html\/tryhtml?filename=layout_flexbox\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-external-link-alt\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z\"><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">\u0e25\u0e2d\u0e07\u0e14\u0e39\u0e2a\u0e34<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bed36d5 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"bed36d5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a430bc0 elementor-widget elementor-widget-heading\" data-id=\"a430bc0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">CSS Grid Layout<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fea8946 elementor-widget elementor-widget-text-editor\" data-id=\"fea8946\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\tCSS Grid Layout \u0e40\u0e1b\u0e47\u0e19\u0e23\u0e30\u0e1a\u0e1a\u0e08\u0e31\u0e14\u0e27\u0e32\u0e07\u0e40\u0e25\u0e22\u0e4c\u0e40\u0e2d\u0e32\u0e15\u0e4c\u0e41\u0e1a\u0e1a\u0e15\u0e32\u0e23\u0e32\u0e07 (Grid) \u0e17\u0e35\u0e48\u0e41\u0e1a\u0e48\u0e07\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e2d\u0e2d\u0e01\u0e40\u0e1b\u0e47\u0e19\u0e41\u0e16\u0e27 (rows) \u0e41\u0e25\u0e30\u0e04\u0e2d\u0e25\u0e31\u0e21\u0e19\u0e4c (columns) \u0e17\u0e33\u0e43\u0e2b\u0e49\u0e01\u0e32\u0e23\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e17\u0e33\u0e44\u0e14\u0e49\u0e07\u0e48\u0e32\u0e22\u0e02\u0e36\u0e49\u0e19 \u0e42\u0e14\u0e22\u0e44\u0e21\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e1e\u0e36\u0e48\u0e07\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e27\u0e32\u0e07\u0e41\u0e1a\u0e1a float \u0e2b\u0e23\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07 (positioning) \u0e41\u0e1a\u0e1a\u0e40\u0e14\u0e34\u0e21\u0e2d\u0e35\u0e01\u0e15\u0e48\u0e2d\u0e44\u0e1b\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>HTML Layout \u0e04\u0e37\u0e2d \u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e27\u0e32\u0e07\u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e40\u0e1e\u0e08 (Web Page Structure) \u0e42\u0e14\u0e22\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e41\u0e1a\u0e48\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e2d\u0e2d\u0e01\u0e40\u0e1b\u0e47\u0e19\u0e2b\u0e25\u0e32\u0e22\u0e04\u0e2d\u0e25\u0e31\u0e21\u0e19\u0e4c \u0e40\u0e2b\u0e21\u0e37\u0e2d\u0e19\u0e19\u0e34\u0e15\u0e22\u0e2a\u0e32\u0e23\u0e2b\u0e23\u0e37\u0e2d\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e1e\u0e34\u0e21\u0e1e\u0e4c \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e14\u0e39\u0e40\u0e1b\u0e47\u0e19\u0e23\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e1a\u0e41\u0e25\u0e30\u0e40\u0e02\u0e49\u0e32\u0e43\u0e08\u0e07\u0e48\u0e32\u0e22\u0e02\u0e36\u0e49\u0e19 HTML Layout Elements HTML \u0e21\u0e35\u0e41\u0e17\u0e47\u0e01\u0e2b\u0e25\u0e32\u0e22\u0e15\u0e31\u0e27\u0e17\u0e35\u0e48\u0e43\u0e0a\u0e49\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e2a\u0e48\u0e27\u0e19\u0e15\u0e48\u0e32\u0e07 \u0e46 \u0e02\u0e2d\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a \u0e40\u0e0a\u0e48\u0e19 &lt;header&gt; \u0e2a\u0e48\u0e27\u0e19\u0e2b\u0e31\u0e27\u0e02\u0e2d\u0e07\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e2b\u0e23\u0e37\u0e2d\u0e02\u0e2d\u0e07\u0e2b\u0e19\u0e49\u0e32 &lt;nav&gt;\u00a0\u0e2a\u0e48\u0e27\u0e19\u0e02\u0e2d\u0e07\u0e25\u0e34\u0e07\u0e01\u0e4c\u0e19\u0e33\u0e17\u0e32\u0e07 (Navigation Bar) &lt;section&gt;\u00a0\u0e2a\u0e48\u0e27\u0e19\u0e02\u0e2d\u0e07\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e2b\u0e25\u0e31\u0e01\u0e43\u0e19\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 &lt;article&gt;\u00a0\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e22\u0e48\u0e2d\u0e22 \u0e40\u0e0a\u0e48\u0e19 \u0e02\u0e48\u0e32\u0e27\u0e2b\u0e23\u0e37\u0e2d\u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21 &lt;aside&gt;\u00a0\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e17\u0e35\u0e48\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e02\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e1a\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e2b\u0e25\u0e31\u0e01 \u0e40\u0e0a\u0e48\u0e19 Sidebar &lt;footer&gt;\u00a0\u0e2a\u0e48\u0e27\u0e19\u0e17\u0e49\u0e32\u0e22\u0e02\u0e2d\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a &lt;details&gt;\u00a0\u0e43\u0e0a\u0e49\u0e41\u0e2a\u0e14\u0e07\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 \u0e40\u0e1b\u0e34\u0e14\/\u0e1b\u0e34\u0e14\u0e44\u0e14\u0e49 &lt;summary&gt;\u00a0\u0e2b\u0e31\u0e27\u0e02\u0e49\u0e2d\u0e22\u0e48\u0e2d\u0e02\u0e2d\u0e07 &lt;details&gt; \u0e40\u0e17\u0e04\u0e19\u0e34\u0e04\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49 HTML Layout \u0e21\u0e35\u0e2d\u0e22\u0e39\u0e48\u0e2b\u0e25\u0e32\u0e22\u0e27\u0e34\u0e18\u0e35\u0e43\u0e19\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e27\u0e32\u0e07\u0e04\u0e2d\u0e25\u0e31\u0e21\u0e19\u0e4c\u0e41\u0e25\u0e30\u0e2d\u0e07\u0e04\u0e4c\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e43\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a \u0e42\u0e14\u0e22\u0e2b\u0e25\u0e31\u0e01 \u0e46 \u0e21\u0e35 4 \u0e27\u0e34\u0e18\u0e35\u0e04\u0e37\u0e2d CSS Framework CSS Float Property CSS Flexbox CSS Grid CSS Framework [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-24741","post","type-post","status-publish","format-standard","hentry","category-html"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO Pro 5.0.2 - aioseo.com -->\n\t<meta name=\"description\" content=\"HTML Layout \u0e04\u0e37\u0e2d \u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e27\u0e32\u0e07\u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e40\u0e1e\u0e08 (Web Page Structure) \u0e42\u0e14\u0e22\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e41\u0e1a\u0e48\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e2d\u0e2d\u0e01\u0e40\u0e1b\u0e47\u0e19\u0e2b\u0e25\u0e32\u0e22\u0e04\u0e2d\u0e25\u0e31\u0e21\u0e19\u0e4c \u0e40\u0e2b\u0e21\u0e37\u0e2d\u0e19\u0e19\u0e34\u0e15\u0e22\u0e2a\u0e32\u0e23\u0e2b\u0e23\u0e37\u0e2d\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e1e\u0e34\u0e21\u0e1e\u0e4c \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e14\u0e39\u0e40\u0e1b\u0e47\u0e19\u0e23\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e1a\u0e41\u0e25\u0e30\u0e40\u0e02\u0e49\u0e32\u0e43\u0e08\u0e07\u0e48\u0e32\u0e22\u0e02\u0e36\u0e49\u0e19 HTML Layout Elements HTML \u0e21\u0e35\u0e41\u0e17\u0e47\u0e01\u0e2b\u0e25\u0e32\u0e22\u0e15\u0e31\u0e27\u0e17\u0e35\u0e48\u0e43\u0e0a\u0e49\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e2a\u0e48\u0e27\u0e19\u0e15\u0e48\u0e32\u0e07 \u0e46 \u0e02\u0e2d\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a \u0e40\u0e0a\u0e48\u0e19 \u0e2a\u0e48\u0e27\u0e19\u0e2b\u0e31\u0e27\u0e02\u0e2d\u0e07\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e2b\u0e23\u0e37\u0e2d\u0e02\u0e2d\u0e07\u0e2b\u0e19\u0e49\u0e32 \u0e2a\u0e48\u0e27\u0e19\u0e02\u0e2d\u0e07\u0e25\u0e34\u0e07\u0e01\u0e4c\u0e19\u0e33\u0e17\u0e32\u0e07 (Navigation Bar) \u0e2a\u0e48\u0e27\u0e19\u0e02\u0e2d\u0e07\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e2b\u0e25\u0e31\u0e01\u0e43\u0e19\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 \u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e22\u0e48\u0e2d\u0e22 \u0e40\u0e0a\u0e48\u0e19 \u0e02\u0e48\u0e32\u0e27\u0e2b\u0e23\u0e37\u0e2d\u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21 \u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e17\u0e35\u0e48\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e02\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e1a\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e2b\u0e25\u0e31\u0e01 \u0e40\u0e0a\u0e48\u0e19 Sidebar \u0e2a\u0e48\u0e27\u0e19\u0e17\u0e49\u0e32\u0e22\u0e02\u0e2d\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a \u0e43\u0e0a\u0e49\u0e41\u0e2a\u0e14\u0e07\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 \u0e40\u0e1b\u0e34\u0e14\/\u0e1b\u0e34\u0e14\u0e44\u0e14\u0e49 \u0e2b\u0e31\u0e27\u0e02\u0e49\u0e2d\u0e22\u0e48\u0e2d\u0e02\u0e2d\u0e07 \u0e40\u0e17\u0e04\u0e19\u0e34\u0e04\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49 HTML Layout \u0e21\u0e35\u0e2d\u0e22\u0e39\u0e48\u0e2b\u0e25\u0e32\u0e22\u0e27\u0e34\u0e18\u0e35\u0e43\u0e19\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e27\u0e32\u0e07\u0e04\u0e2d\u0e25\u0e31\u0e21\u0e19\u0e4c\u0e41\u0e25\u0e30\u0e2d\u0e07\u0e04\u0e4c\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e43\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a \u0e42\u0e14\u0e22\u0e2b\u0e25\u0e31\u0e01 \u0e46 \u0e21\u0e35 4 \u0e27\u0e34\u0e18\u0e35\u0e04\u0e37\u0e2d CSS Framework CSS Float Property CSS Flexbox CSS Grid CSS Framework \u0e2b\u0e32\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07 Layout \u0e2d\u0e22\u0e48\u0e32\u0e07\u0e23\u0e27\u0e14\u0e40\u0e23\u0e47\u0e27 \u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e43\u0e0a\u0e49 \u0e40\u0e1f\u0e23\u0e21\u0e40\u0e27\u0e34\u0e23\u0e4c\u0e01 CSS \u0e40\u0e0a\u0e48\u0e19\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"petcharin\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/kb.hostatom.com\/lesson\/24741\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO Pro (AIOSEO) 5.0.2\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:title\" content=\"HTML Layout and Techniques - \u0e1a\u0e17\u0e40\u0e23\u0e35\u0e22\u0e19 | hostatom\" \/>\n\t\t<meta name=\"twitter:description\" content=\"HTML Layout \u0e04\u0e37\u0e2d \u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e27\u0e32\u0e07\u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e40\u0e1e\u0e08 (Web Page Structure) \u0e42\u0e14\u0e22\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e41\u0e1a\u0e48\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e2d\u0e2d\u0e01\u0e40\u0e1b\u0e47\u0e19\u0e2b\u0e25\u0e32\u0e22\u0e04\u0e2d\u0e25\u0e31\u0e21\u0e19\u0e4c \u0e40\u0e2b\u0e21\u0e37\u0e2d\u0e19\u0e19\u0e34\u0e15\u0e22\u0e2a\u0e32\u0e23\u0e2b\u0e23\u0e37\u0e2d\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e1e\u0e34\u0e21\u0e1e\u0e4c \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e14\u0e39\u0e40\u0e1b\u0e47\u0e19\u0e23\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e1a\u0e41\u0e25\u0e30\u0e40\u0e02\u0e49\u0e32\u0e43\u0e08\u0e07\u0e48\u0e32\u0e22\u0e02\u0e36\u0e49\u0e19 HTML Layout Elements HTML \u0e21\u0e35\u0e41\u0e17\u0e47\u0e01\u0e2b\u0e25\u0e32\u0e22\u0e15\u0e31\u0e27\u0e17\u0e35\u0e48\u0e43\u0e0a\u0e49\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e2a\u0e48\u0e27\u0e19\u0e15\u0e48\u0e32\u0e07 \u0e46 \u0e02\u0e2d\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a \u0e40\u0e0a\u0e48\u0e19 \u0e2a\u0e48\u0e27\u0e19\u0e2b\u0e31\u0e27\u0e02\u0e2d\u0e07\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e2b\u0e23\u0e37\u0e2d\u0e02\u0e2d\u0e07\u0e2b\u0e19\u0e49\u0e32 \u0e2a\u0e48\u0e27\u0e19\u0e02\u0e2d\u0e07\u0e25\u0e34\u0e07\u0e01\u0e4c\u0e19\u0e33\u0e17\u0e32\u0e07 (Navigation Bar) \u0e2a\u0e48\u0e27\u0e19\u0e02\u0e2d\u0e07\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e2b\u0e25\u0e31\u0e01\u0e43\u0e19\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 \u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e22\u0e48\u0e2d\u0e22 \u0e40\u0e0a\u0e48\u0e19 \u0e02\u0e48\u0e32\u0e27\u0e2b\u0e23\u0e37\u0e2d\u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21 \u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e17\u0e35\u0e48\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e02\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e1a\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e2b\u0e25\u0e31\u0e01 \u0e40\u0e0a\u0e48\u0e19 Sidebar \u0e2a\u0e48\u0e27\u0e19\u0e17\u0e49\u0e32\u0e22\u0e02\u0e2d\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a \u0e43\u0e0a\u0e49\u0e41\u0e2a\u0e14\u0e07\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 \u0e40\u0e1b\u0e34\u0e14\/\u0e1b\u0e34\u0e14\u0e44\u0e14\u0e49 \u0e2b\u0e31\u0e27\u0e02\u0e49\u0e2d\u0e22\u0e48\u0e2d\u0e02\u0e2d\u0e07 \u0e40\u0e17\u0e04\u0e19\u0e34\u0e04\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49 HTML Layout \u0e21\u0e35\u0e2d\u0e22\u0e39\u0e48\u0e2b\u0e25\u0e32\u0e22\u0e27\u0e34\u0e18\u0e35\u0e43\u0e19\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e27\u0e32\u0e07\u0e04\u0e2d\u0e25\u0e31\u0e21\u0e19\u0e4c\u0e41\u0e25\u0e30\u0e2d\u0e07\u0e04\u0e4c\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e43\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a \u0e42\u0e14\u0e22\u0e2b\u0e25\u0e31\u0e01 \u0e46 \u0e21\u0e35 4 \u0e27\u0e34\u0e18\u0e35\u0e04\u0e37\u0e2d CSS Framework CSS Float Property CSS Flexbox CSS Grid CSS Framework \u0e2b\u0e32\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07 Layout \u0e2d\u0e22\u0e48\u0e32\u0e07\u0e23\u0e27\u0e14\u0e40\u0e23\u0e47\u0e27 \u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e43\u0e0a\u0e49 \u0e40\u0e1f\u0e23\u0e21\u0e40\u0e27\u0e34\u0e23\u0e4c\u0e01 CSS \u0e40\u0e0a\u0e48\u0e19\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/kb.hostatom.com\/lesson\/wp-content\/uploads\/2025\/09\/hostatom-w-logo.webp\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BlogPosting\",\"@id\":\"https:\\\/\\\/kb.hostatom.com\\\/lesson\\\/24741\\\/#blogposting\",\"name\":\"HTML Layout and Techniques - \\u0e1a\\u0e17\\u0e40\\u0e23\\u0e35\\u0e22\\u0e19 | hostatom\",\"headline\":\"HTML\\u00a0Layout and Techniques\",\"author\":{\"@id\":\"https:\\\/\\\/kb.hostatom.com\\\/lesson\\\/author\\\/petcharin\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/kb.hostatom.com\\\/lesson\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/kb.hostatom.com\\\/lesson\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/24741-003.webp\",\"@id\":\"https:\\\/\\\/kb.hostatom.com\\\/lesson\\\/24741\\\/#articleImage\",\"width\":237,\"height\":301},\"datePublished\":\"2022-10-05T12:00:31+00:00\",\"dateModified\":\"2025-11-07T06:31:29+00:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/kb.hostatom.com\\\/lesson\\\/24741\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/kb.hostatom.com\\\/lesson\\\/24741\\\/#webpage\"},\"articleSection\":\"HTML\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/kb.hostatom.com\\\/lesson\\\/24741\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/kb.hostatom.com\\\/lesson\\\/#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/kb.hostatom.com\\\/lesson\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/kb.hostatom.com\\\/lesson\\\/category\\\/html\\\/#listItem\",\"name\":\"HTML\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/kb.hostatom.com\\\/lesson\\\/category\\\/html\\\/#listItem\",\"position\":2,\"name\":\"HTML\",\"item\":\"https:\\\/\\\/kb.hostatom.com\\\/lesson\\\/category\\\/html\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/kb.hostatom.com\\\/lesson\\\/24741\\\/#listItem\",\"name\":\"HTML\\u00a0Layout and Techniques\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/kb.hostatom.com\\\/lesson\\\/#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/kb.hostatom.com\\\/lesson\\\/24741\\\/#listItem\",\"position\":3,\"name\":\"HTML\\u00a0Layout and Techniques\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/kb.hostatom.com\\\/lesson\\\/category\\\/html\\\/#listItem\",\"name\":\"HTML\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/kb.hostatom.com\\\/lesson\\\/#organization\",\"name\":\"\\u0e1a\\u0e17\\u0e40\\u0e23\\u0e35\\u0e22\\u0e19 | hostatom\",\"url\":\"https:\\\/\\\/kb.hostatom.com\\\/lesson\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/kb.hostatom.com\\\/lesson\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/hostatom-w-logo.webp\",\"@id\":\"https:\\\/\\\/kb.hostatom.com\\\/lesson\\\/24741\\\/#organizationLogo\",\"width\":319,\"height\":69},\"image\":{\"@id\":\"https:\\\/\\\/kb.hostatom.com\\\/lesson\\\/24741\\\/#organizationLogo\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/kb.hostatom.com\\\/lesson\\\/author\\\/petcharin\\\/#author\",\"url\":\"https:\\\/\\\/kb.hostatom.com\\\/lesson\\\/author\\\/petcharin\\\/\",\"name\":\"petcharin\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/kb.hostatom.com\\\/lesson\\\/24741\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cca95764043b55b0b4d3f05d0e0203a6deb5c99d4b927ce285baa1b906f83c4d?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"petcharin\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/kb.hostatom.com\\\/lesson\\\/24741\\\/#webpage\",\"url\":\"https:\\\/\\\/kb.hostatom.com\\\/lesson\\\/24741\\\/\",\"name\":\"HTML Layout and Techniques - \\u0e1a\\u0e17\\u0e40\\u0e23\\u0e35\\u0e22\\u0e19 | hostatom\",\"description\":\"HTML Layout \\u0e04\\u0e37\\u0e2d \\u0e01\\u0e32\\u0e23\\u0e08\\u0e31\\u0e14\\u0e27\\u0e32\\u0e07\\u0e42\\u0e04\\u0e23\\u0e07\\u0e2a\\u0e23\\u0e49\\u0e32\\u0e07\\u0e2b\\u0e19\\u0e49\\u0e32\\u0e40\\u0e27\\u0e47\\u0e1a\\u0e40\\u0e1e\\u0e08 (Web Page Structure) \\u0e42\\u0e14\\u0e22\\u0e2a\\u0e32\\u0e21\\u0e32\\u0e23\\u0e16\\u0e41\\u0e1a\\u0e48\\u0e07\\u0e2b\\u0e19\\u0e49\\u0e32\\u0e40\\u0e27\\u0e47\\u0e1a\\u0e2d\\u0e2d\\u0e01\\u0e40\\u0e1b\\u0e47\\u0e19\\u0e2b\\u0e25\\u0e32\\u0e22\\u0e04\\u0e2d\\u0e25\\u0e31\\u0e21\\u0e19\\u0e4c \\u0e40\\u0e2b\\u0e21\\u0e37\\u0e2d\\u0e19\\u0e19\\u0e34\\u0e15\\u0e22\\u0e2a\\u0e32\\u0e23\\u0e2b\\u0e23\\u0e37\\u0e2d\\u0e2b\\u0e19\\u0e31\\u0e07\\u0e2a\\u0e37\\u0e2d\\u0e1e\\u0e34\\u0e21\\u0e1e\\u0e4c \\u0e40\\u0e1e\\u0e37\\u0e48\\u0e2d\\u0e43\\u0e2b\\u0e49\\u0e40\\u0e19\\u0e37\\u0e49\\u0e2d\\u0e2b\\u0e32\\u0e14\\u0e39\\u0e40\\u0e1b\\u0e47\\u0e19\\u0e23\\u0e30\\u0e40\\u0e1a\\u0e35\\u0e22\\u0e1a\\u0e41\\u0e25\\u0e30\\u0e40\\u0e02\\u0e49\\u0e32\\u0e43\\u0e08\\u0e07\\u0e48\\u0e32\\u0e22\\u0e02\\u0e36\\u0e49\\u0e19 HTML Layout Elements HTML \\u0e21\\u0e35\\u0e41\\u0e17\\u0e47\\u0e01\\u0e2b\\u0e25\\u0e32\\u0e22\\u0e15\\u0e31\\u0e27\\u0e17\\u0e35\\u0e48\\u0e43\\u0e0a\\u0e49\\u0e01\\u0e33\\u0e2b\\u0e19\\u0e14\\u0e2a\\u0e48\\u0e27\\u0e19\\u0e15\\u0e48\\u0e32\\u0e07 \\u0e46 \\u0e02\\u0e2d\\u0e07\\u0e2b\\u0e19\\u0e49\\u0e32\\u0e40\\u0e27\\u0e47\\u0e1a \\u0e40\\u0e0a\\u0e48\\u0e19 \\u0e2a\\u0e48\\u0e27\\u0e19\\u0e2b\\u0e31\\u0e27\\u0e02\\u0e2d\\u0e07\\u0e40\\u0e2d\\u0e01\\u0e2a\\u0e32\\u0e23\\u0e2b\\u0e23\\u0e37\\u0e2d\\u0e02\\u0e2d\\u0e07\\u0e2b\\u0e19\\u0e49\\u0e32 \\u0e2a\\u0e48\\u0e27\\u0e19\\u0e02\\u0e2d\\u0e07\\u0e25\\u0e34\\u0e07\\u0e01\\u0e4c\\u0e19\\u0e33\\u0e17\\u0e32\\u0e07 (Navigation Bar) \\u0e2a\\u0e48\\u0e27\\u0e19\\u0e02\\u0e2d\\u0e07\\u0e40\\u0e19\\u0e37\\u0e49\\u0e2d\\u0e2b\\u0e32\\u0e2b\\u0e25\\u0e31\\u0e01\\u0e43\\u0e19\\u0e40\\u0e2d\\u0e01\\u0e2a\\u0e32\\u0e23 \\u0e40\\u0e19\\u0e37\\u0e49\\u0e2d\\u0e2b\\u0e32\\u0e22\\u0e48\\u0e2d\\u0e22 \\u0e40\\u0e0a\\u0e48\\u0e19 \\u0e02\\u0e48\\u0e32\\u0e27\\u0e2b\\u0e23\\u0e37\\u0e2d\\u0e1a\\u0e17\\u0e04\\u0e27\\u0e32\\u0e21 \\u0e40\\u0e19\\u0e37\\u0e49\\u0e2d\\u0e2b\\u0e32\\u0e17\\u0e35\\u0e48\\u0e40\\u0e01\\u0e35\\u0e48\\u0e22\\u0e27\\u0e02\\u0e49\\u0e2d\\u0e07\\u0e01\\u0e31\\u0e1a\\u0e40\\u0e19\\u0e37\\u0e49\\u0e2d\\u0e2b\\u0e32\\u0e2b\\u0e25\\u0e31\\u0e01 \\u0e40\\u0e0a\\u0e48\\u0e19 Sidebar \\u0e2a\\u0e48\\u0e27\\u0e19\\u0e17\\u0e49\\u0e32\\u0e22\\u0e02\\u0e2d\\u0e07\\u0e2b\\u0e19\\u0e49\\u0e32\\u0e40\\u0e27\\u0e47\\u0e1a \\u0e43\\u0e0a\\u0e49\\u0e41\\u0e2a\\u0e14\\u0e07\\u0e23\\u0e32\\u0e22\\u0e25\\u0e30\\u0e40\\u0e2d\\u0e35\\u0e22\\u0e14\\u0e40\\u0e1e\\u0e34\\u0e48\\u0e21\\u0e40\\u0e15\\u0e34\\u0e21 \\u0e40\\u0e1b\\u0e34\\u0e14\\\/\\u0e1b\\u0e34\\u0e14\\u0e44\\u0e14\\u0e49 \\u0e2b\\u0e31\\u0e27\\u0e02\\u0e49\\u0e2d\\u0e22\\u0e48\\u0e2d\\u0e02\\u0e2d\\u0e07 \\u0e40\\u0e17\\u0e04\\u0e19\\u0e34\\u0e04\\u0e01\\u0e32\\u0e23\\u0e43\\u0e0a\\u0e49 HTML Layout \\u0e21\\u0e35\\u0e2d\\u0e22\\u0e39\\u0e48\\u0e2b\\u0e25\\u0e32\\u0e22\\u0e27\\u0e34\\u0e18\\u0e35\\u0e43\\u0e19\\u0e01\\u0e32\\u0e23\\u0e08\\u0e31\\u0e14\\u0e27\\u0e32\\u0e07\\u0e04\\u0e2d\\u0e25\\u0e31\\u0e21\\u0e19\\u0e4c\\u0e41\\u0e25\\u0e30\\u0e2d\\u0e07\\u0e04\\u0e4c\\u0e1b\\u0e23\\u0e30\\u0e01\\u0e2d\\u0e1a\\u0e43\\u0e19\\u0e2b\\u0e19\\u0e49\\u0e32\\u0e40\\u0e27\\u0e47\\u0e1a \\u0e42\\u0e14\\u0e22\\u0e2b\\u0e25\\u0e31\\u0e01 \\u0e46 \\u0e21\\u0e35 4 \\u0e27\\u0e34\\u0e18\\u0e35\\u0e04\\u0e37\\u0e2d CSS Framework CSS Float Property CSS Flexbox CSS Grid CSS Framework \\u0e2b\\u0e32\\u0e01\\u0e15\\u0e49\\u0e2d\\u0e07\\u0e01\\u0e32\\u0e23\\u0e2a\\u0e23\\u0e49\\u0e32\\u0e07 Layout \\u0e2d\\u0e22\\u0e48\\u0e32\\u0e07\\u0e23\\u0e27\\u0e14\\u0e40\\u0e23\\u0e47\\u0e27 \\u0e2a\\u0e32\\u0e21\\u0e32\\u0e23\\u0e16\\u0e43\\u0e0a\\u0e49 \\u0e40\\u0e1f\\u0e23\\u0e21\\u0e40\\u0e27\\u0e34\\u0e23\\u0e4c\\u0e01 CSS \\u0e40\\u0e0a\\u0e48\\u0e19\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/kb.hostatom.com\\\/lesson\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/kb.hostatom.com\\\/lesson\\\/24741\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/kb.hostatom.com\\\/lesson\\\/author\\\/petcharin\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/kb.hostatom.com\\\/lesson\\\/author\\\/petcharin\\\/#author\"},\"datePublished\":\"2022-10-05T12:00:31+00:00\",\"dateModified\":\"2025-11-07T06:31:29+00:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/kb.hostatom.com\\\/lesson\\\/#website\",\"url\":\"https:\\\/\\\/kb.hostatom.com\\\/lesson\\\/\",\"name\":\"\\u0e1a\\u0e17\\u0e40\\u0e23\\u0e35\\u0e22\\u0e19 | hostatom\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/kb.hostatom.com\\\/lesson\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO Pro -->\r\n\t\t<title>HTML Layout and Techniques - \u0e1a\u0e17\u0e40\u0e23\u0e35\u0e22\u0e19 | hostatom<\/title>\n\n","aioseo_head_json":{"title":"HTML Layout and Techniques - \u0e1a\u0e17\u0e40\u0e23\u0e35\u0e22\u0e19 | hostatom","description":"HTML Layout \u0e04\u0e37\u0e2d \u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e27\u0e32\u0e07\u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e40\u0e1e\u0e08 (Web Page Structure) \u0e42\u0e14\u0e22\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e41\u0e1a\u0e48\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e2d\u0e2d\u0e01\u0e40\u0e1b\u0e47\u0e19\u0e2b\u0e25\u0e32\u0e22\u0e04\u0e2d\u0e25\u0e31\u0e21\u0e19\u0e4c \u0e40\u0e2b\u0e21\u0e37\u0e2d\u0e19\u0e19\u0e34\u0e15\u0e22\u0e2a\u0e32\u0e23\u0e2b\u0e23\u0e37\u0e2d\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e1e\u0e34\u0e21\u0e1e\u0e4c \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e14\u0e39\u0e40\u0e1b\u0e47\u0e19\u0e23\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e1a\u0e41\u0e25\u0e30\u0e40\u0e02\u0e49\u0e32\u0e43\u0e08\u0e07\u0e48\u0e32\u0e22\u0e02\u0e36\u0e49\u0e19 HTML Layout Elements HTML \u0e21\u0e35\u0e41\u0e17\u0e47\u0e01\u0e2b\u0e25\u0e32\u0e22\u0e15\u0e31\u0e27\u0e17\u0e35\u0e48\u0e43\u0e0a\u0e49\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e2a\u0e48\u0e27\u0e19\u0e15\u0e48\u0e32\u0e07 \u0e46 \u0e02\u0e2d\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a \u0e40\u0e0a\u0e48\u0e19 \u0e2a\u0e48\u0e27\u0e19\u0e2b\u0e31\u0e27\u0e02\u0e2d\u0e07\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e2b\u0e23\u0e37\u0e2d\u0e02\u0e2d\u0e07\u0e2b\u0e19\u0e49\u0e32 \u0e2a\u0e48\u0e27\u0e19\u0e02\u0e2d\u0e07\u0e25\u0e34\u0e07\u0e01\u0e4c\u0e19\u0e33\u0e17\u0e32\u0e07 (Navigation Bar) \u0e2a\u0e48\u0e27\u0e19\u0e02\u0e2d\u0e07\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e2b\u0e25\u0e31\u0e01\u0e43\u0e19\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 \u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e22\u0e48\u0e2d\u0e22 \u0e40\u0e0a\u0e48\u0e19 \u0e02\u0e48\u0e32\u0e27\u0e2b\u0e23\u0e37\u0e2d\u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21 \u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e17\u0e35\u0e48\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e02\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e1a\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e2b\u0e25\u0e31\u0e01 \u0e40\u0e0a\u0e48\u0e19 Sidebar \u0e2a\u0e48\u0e27\u0e19\u0e17\u0e49\u0e32\u0e22\u0e02\u0e2d\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a \u0e43\u0e0a\u0e49\u0e41\u0e2a\u0e14\u0e07\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 \u0e40\u0e1b\u0e34\u0e14\/\u0e1b\u0e34\u0e14\u0e44\u0e14\u0e49 \u0e2b\u0e31\u0e27\u0e02\u0e49\u0e2d\u0e22\u0e48\u0e2d\u0e02\u0e2d\u0e07 \u0e40\u0e17\u0e04\u0e19\u0e34\u0e04\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49 HTML Layout \u0e21\u0e35\u0e2d\u0e22\u0e39\u0e48\u0e2b\u0e25\u0e32\u0e22\u0e27\u0e34\u0e18\u0e35\u0e43\u0e19\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e27\u0e32\u0e07\u0e04\u0e2d\u0e25\u0e31\u0e21\u0e19\u0e4c\u0e41\u0e25\u0e30\u0e2d\u0e07\u0e04\u0e4c\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e43\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a \u0e42\u0e14\u0e22\u0e2b\u0e25\u0e31\u0e01 \u0e46 \u0e21\u0e35 4 \u0e27\u0e34\u0e18\u0e35\u0e04\u0e37\u0e2d CSS Framework CSS Float Property CSS Flexbox CSS Grid CSS Framework \u0e2b\u0e32\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07 Layout \u0e2d\u0e22\u0e48\u0e32\u0e07\u0e23\u0e27\u0e14\u0e40\u0e23\u0e47\u0e27 \u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e43\u0e0a\u0e49 \u0e40\u0e1f\u0e23\u0e21\u0e40\u0e27\u0e34\u0e23\u0e4c\u0e01 CSS \u0e40\u0e0a\u0e48\u0e19","canonical_url":"https:\/\/kb.hostatom.com\/lesson\/24741\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BlogPosting","@id":"https:\/\/kb.hostatom.com\/lesson\/24741\/#blogposting","name":"HTML Layout and Techniques - \u0e1a\u0e17\u0e40\u0e23\u0e35\u0e22\u0e19 | hostatom","headline":"HTML\u00a0Layout and Techniques","author":{"@id":"https:\/\/kb.hostatom.com\/lesson\/author\/petcharin\/#author"},"publisher":{"@id":"https:\/\/kb.hostatom.com\/lesson\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/kb.hostatom.com\/lesson\/wp-content\/uploads\/2022\/10\/24741-003.webp","@id":"https:\/\/kb.hostatom.com\/lesson\/24741\/#articleImage","width":237,"height":301},"datePublished":"2022-10-05T12:00:31+00:00","dateModified":"2025-11-07T06:31:29+00:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/kb.hostatom.com\/lesson\/24741\/#webpage"},"isPartOf":{"@id":"https:\/\/kb.hostatom.com\/lesson\/24741\/#webpage"},"articleSection":"HTML"},{"@type":"BreadcrumbList","@id":"https:\/\/kb.hostatom.com\/lesson\/24741\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/kb.hostatom.com\/lesson\/#listItem","position":1,"name":"Home","item":"https:\/\/kb.hostatom.com\/lesson\/","nextItem":{"@type":"ListItem","@id":"https:\/\/kb.hostatom.com\/lesson\/category\/html\/#listItem","name":"HTML"}},{"@type":"ListItem","@id":"https:\/\/kb.hostatom.com\/lesson\/category\/html\/#listItem","position":2,"name":"HTML","item":"https:\/\/kb.hostatom.com\/lesson\/category\/html\/","nextItem":{"@type":"ListItem","@id":"https:\/\/kb.hostatom.com\/lesson\/24741\/#listItem","name":"HTML\u00a0Layout and Techniques"},"previousItem":{"@type":"ListItem","@id":"https:\/\/kb.hostatom.com\/lesson\/#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/kb.hostatom.com\/lesson\/24741\/#listItem","position":3,"name":"HTML\u00a0Layout and Techniques","previousItem":{"@type":"ListItem","@id":"https:\/\/kb.hostatom.com\/lesson\/category\/html\/#listItem","name":"HTML"}}]},{"@type":"Organization","@id":"https:\/\/kb.hostatom.com\/lesson\/#organization","name":"\u0e1a\u0e17\u0e40\u0e23\u0e35\u0e22\u0e19 | hostatom","url":"https:\/\/kb.hostatom.com\/lesson\/","logo":{"@type":"ImageObject","url":"https:\/\/kb.hostatom.com\/lesson\/wp-content\/uploads\/2025\/09\/hostatom-w-logo.webp","@id":"https:\/\/kb.hostatom.com\/lesson\/24741\/#organizationLogo","width":319,"height":69},"image":{"@id":"https:\/\/kb.hostatom.com\/lesson\/24741\/#organizationLogo"}},{"@type":"Person","@id":"https:\/\/kb.hostatom.com\/lesson\/author\/petcharin\/#author","url":"https:\/\/kb.hostatom.com\/lesson\/author\/petcharin\/","name":"petcharin","image":{"@type":"ImageObject","@id":"https:\/\/kb.hostatom.com\/lesson\/24741\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/cca95764043b55b0b4d3f05d0e0203a6deb5c99d4b927ce285baa1b906f83c4d?s=96&d=mm&r=g","width":96,"height":96,"caption":"petcharin"}},{"@type":"WebPage","@id":"https:\/\/kb.hostatom.com\/lesson\/24741\/#webpage","url":"https:\/\/kb.hostatom.com\/lesson\/24741\/","name":"HTML Layout and Techniques - \u0e1a\u0e17\u0e40\u0e23\u0e35\u0e22\u0e19 | hostatom","description":"HTML Layout \u0e04\u0e37\u0e2d \u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e27\u0e32\u0e07\u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e40\u0e1e\u0e08 (Web Page Structure) \u0e42\u0e14\u0e22\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e41\u0e1a\u0e48\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e2d\u0e2d\u0e01\u0e40\u0e1b\u0e47\u0e19\u0e2b\u0e25\u0e32\u0e22\u0e04\u0e2d\u0e25\u0e31\u0e21\u0e19\u0e4c \u0e40\u0e2b\u0e21\u0e37\u0e2d\u0e19\u0e19\u0e34\u0e15\u0e22\u0e2a\u0e32\u0e23\u0e2b\u0e23\u0e37\u0e2d\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e1e\u0e34\u0e21\u0e1e\u0e4c \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e14\u0e39\u0e40\u0e1b\u0e47\u0e19\u0e23\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e1a\u0e41\u0e25\u0e30\u0e40\u0e02\u0e49\u0e32\u0e43\u0e08\u0e07\u0e48\u0e32\u0e22\u0e02\u0e36\u0e49\u0e19 HTML Layout Elements HTML \u0e21\u0e35\u0e41\u0e17\u0e47\u0e01\u0e2b\u0e25\u0e32\u0e22\u0e15\u0e31\u0e27\u0e17\u0e35\u0e48\u0e43\u0e0a\u0e49\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e2a\u0e48\u0e27\u0e19\u0e15\u0e48\u0e32\u0e07 \u0e46 \u0e02\u0e2d\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a \u0e40\u0e0a\u0e48\u0e19 \u0e2a\u0e48\u0e27\u0e19\u0e2b\u0e31\u0e27\u0e02\u0e2d\u0e07\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e2b\u0e23\u0e37\u0e2d\u0e02\u0e2d\u0e07\u0e2b\u0e19\u0e49\u0e32 \u0e2a\u0e48\u0e27\u0e19\u0e02\u0e2d\u0e07\u0e25\u0e34\u0e07\u0e01\u0e4c\u0e19\u0e33\u0e17\u0e32\u0e07 (Navigation Bar) \u0e2a\u0e48\u0e27\u0e19\u0e02\u0e2d\u0e07\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e2b\u0e25\u0e31\u0e01\u0e43\u0e19\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 \u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e22\u0e48\u0e2d\u0e22 \u0e40\u0e0a\u0e48\u0e19 \u0e02\u0e48\u0e32\u0e27\u0e2b\u0e23\u0e37\u0e2d\u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21 \u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e17\u0e35\u0e48\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e02\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e1a\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e2b\u0e25\u0e31\u0e01 \u0e40\u0e0a\u0e48\u0e19 Sidebar \u0e2a\u0e48\u0e27\u0e19\u0e17\u0e49\u0e32\u0e22\u0e02\u0e2d\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a \u0e43\u0e0a\u0e49\u0e41\u0e2a\u0e14\u0e07\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 \u0e40\u0e1b\u0e34\u0e14\/\u0e1b\u0e34\u0e14\u0e44\u0e14\u0e49 \u0e2b\u0e31\u0e27\u0e02\u0e49\u0e2d\u0e22\u0e48\u0e2d\u0e02\u0e2d\u0e07 \u0e40\u0e17\u0e04\u0e19\u0e34\u0e04\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49 HTML Layout \u0e21\u0e35\u0e2d\u0e22\u0e39\u0e48\u0e2b\u0e25\u0e32\u0e22\u0e27\u0e34\u0e18\u0e35\u0e43\u0e19\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e27\u0e32\u0e07\u0e04\u0e2d\u0e25\u0e31\u0e21\u0e19\u0e4c\u0e41\u0e25\u0e30\u0e2d\u0e07\u0e04\u0e4c\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e43\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a \u0e42\u0e14\u0e22\u0e2b\u0e25\u0e31\u0e01 \u0e46 \u0e21\u0e35 4 \u0e27\u0e34\u0e18\u0e35\u0e04\u0e37\u0e2d CSS Framework CSS Float Property CSS Flexbox CSS Grid CSS Framework \u0e2b\u0e32\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07 Layout \u0e2d\u0e22\u0e48\u0e32\u0e07\u0e23\u0e27\u0e14\u0e40\u0e23\u0e47\u0e27 \u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e43\u0e0a\u0e49 \u0e40\u0e1f\u0e23\u0e21\u0e40\u0e27\u0e34\u0e23\u0e4c\u0e01 CSS \u0e40\u0e0a\u0e48\u0e19","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/kb.hostatom.com\/lesson\/#website"},"breadcrumb":{"@id":"https:\/\/kb.hostatom.com\/lesson\/24741\/#breadcrumblist"},"author":{"@id":"https:\/\/kb.hostatom.com\/lesson\/author\/petcharin\/#author"},"creator":{"@id":"https:\/\/kb.hostatom.com\/lesson\/author\/petcharin\/#author"},"datePublished":"2022-10-05T12:00:31+00:00","dateModified":"2025-11-07T06:31:29+00:00"},{"@type":"WebSite","@id":"https:\/\/kb.hostatom.com\/lesson\/#website","url":"https:\/\/kb.hostatom.com\/lesson\/","name":"\u0e1a\u0e17\u0e40\u0e23\u0e35\u0e22\u0e19 | hostatom","inLanguage":"en-US","publisher":{"@id":"https:\/\/kb.hostatom.com\/lesson\/#organization"}}]},"twitter:card":"summary_large_image","twitter:title":"HTML Layout and Techniques - \u0e1a\u0e17\u0e40\u0e23\u0e35\u0e22\u0e19 | hostatom","twitter:description":"HTML Layout \u0e04\u0e37\u0e2d \u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e27\u0e32\u0e07\u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e40\u0e1e\u0e08 (Web Page Structure) \u0e42\u0e14\u0e22\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e41\u0e1a\u0e48\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e2d\u0e2d\u0e01\u0e40\u0e1b\u0e47\u0e19\u0e2b\u0e25\u0e32\u0e22\u0e04\u0e2d\u0e25\u0e31\u0e21\u0e19\u0e4c \u0e40\u0e2b\u0e21\u0e37\u0e2d\u0e19\u0e19\u0e34\u0e15\u0e22\u0e2a\u0e32\u0e23\u0e2b\u0e23\u0e37\u0e2d\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e1e\u0e34\u0e21\u0e1e\u0e4c \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e14\u0e39\u0e40\u0e1b\u0e47\u0e19\u0e23\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e1a\u0e41\u0e25\u0e30\u0e40\u0e02\u0e49\u0e32\u0e43\u0e08\u0e07\u0e48\u0e32\u0e22\u0e02\u0e36\u0e49\u0e19 HTML Layout Elements HTML \u0e21\u0e35\u0e41\u0e17\u0e47\u0e01\u0e2b\u0e25\u0e32\u0e22\u0e15\u0e31\u0e27\u0e17\u0e35\u0e48\u0e43\u0e0a\u0e49\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e2a\u0e48\u0e27\u0e19\u0e15\u0e48\u0e32\u0e07 \u0e46 \u0e02\u0e2d\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a \u0e40\u0e0a\u0e48\u0e19 \u0e2a\u0e48\u0e27\u0e19\u0e2b\u0e31\u0e27\u0e02\u0e2d\u0e07\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e2b\u0e23\u0e37\u0e2d\u0e02\u0e2d\u0e07\u0e2b\u0e19\u0e49\u0e32 \u0e2a\u0e48\u0e27\u0e19\u0e02\u0e2d\u0e07\u0e25\u0e34\u0e07\u0e01\u0e4c\u0e19\u0e33\u0e17\u0e32\u0e07 (Navigation Bar) \u0e2a\u0e48\u0e27\u0e19\u0e02\u0e2d\u0e07\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e2b\u0e25\u0e31\u0e01\u0e43\u0e19\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 \u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e22\u0e48\u0e2d\u0e22 \u0e40\u0e0a\u0e48\u0e19 \u0e02\u0e48\u0e32\u0e27\u0e2b\u0e23\u0e37\u0e2d\u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21 \u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e17\u0e35\u0e48\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e02\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e1a\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e2b\u0e25\u0e31\u0e01 \u0e40\u0e0a\u0e48\u0e19 Sidebar \u0e2a\u0e48\u0e27\u0e19\u0e17\u0e49\u0e32\u0e22\u0e02\u0e2d\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a \u0e43\u0e0a\u0e49\u0e41\u0e2a\u0e14\u0e07\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 \u0e40\u0e1b\u0e34\u0e14\/\u0e1b\u0e34\u0e14\u0e44\u0e14\u0e49 \u0e2b\u0e31\u0e27\u0e02\u0e49\u0e2d\u0e22\u0e48\u0e2d\u0e02\u0e2d\u0e07 \u0e40\u0e17\u0e04\u0e19\u0e34\u0e04\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49 HTML Layout \u0e21\u0e35\u0e2d\u0e22\u0e39\u0e48\u0e2b\u0e25\u0e32\u0e22\u0e27\u0e34\u0e18\u0e35\u0e43\u0e19\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e27\u0e32\u0e07\u0e04\u0e2d\u0e25\u0e31\u0e21\u0e19\u0e4c\u0e41\u0e25\u0e30\u0e2d\u0e07\u0e04\u0e4c\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e43\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a \u0e42\u0e14\u0e22\u0e2b\u0e25\u0e31\u0e01 \u0e46 \u0e21\u0e35 4 \u0e27\u0e34\u0e18\u0e35\u0e04\u0e37\u0e2d CSS Framework CSS Float Property CSS Flexbox CSS Grid CSS Framework \u0e2b\u0e32\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07 Layout \u0e2d\u0e22\u0e48\u0e32\u0e07\u0e23\u0e27\u0e14\u0e40\u0e23\u0e47\u0e27 \u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e43\u0e0a\u0e49 \u0e40\u0e1f\u0e23\u0e21\u0e40\u0e27\u0e34\u0e23\u0e4c\u0e01 CSS \u0e40\u0e0a\u0e48\u0e19","twitter:image":"https:\/\/kb.hostatom.com\/lesson\/wp-content\/uploads\/2025\/09\/hostatom-w-logo.webp"},"aioseo_meta_data":{"post_id":"24741","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"seo_analyzer_scan_date":"2026-08-18 04:56:00","breadcrumb_settings":null,"limit_modified_date":false,"open_ai":null,"ai":null,"created":"2026-02-19 04:43:39","updated":"2026-08-18 04:56:00","focus_keyword":null,"additional_keywords":null,"truseo_locale":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t<a href=\"https:\/\/kb.hostatom.com\/lesson\/\" title=\"Home\">Home<\/a>\n<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t<a href=\"https:\/\/kb.hostatom.com\/lesson\/category\/html\/\" title=\"HTML\">HTML<\/a>\n<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\tHTML Layout and Techniques\n<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/kb.hostatom.com\/lesson\/"},{"label":"HTML","link":"https:\/\/kb.hostatom.com\/lesson\/category\/html\/"},{"label":"HTML\u00a0Layout and Techniques","link":"https:\/\/kb.hostatom.com\/lesson\/24741\/"}],"_links":{"self":[{"href":"https:\/\/kb.hostatom.com\/lesson\/wp-json\/wp\/v2\/posts\/24741","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kb.hostatom.com\/lesson\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kb.hostatom.com\/lesson\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kb.hostatom.com\/lesson\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/kb.hostatom.com\/lesson\/wp-json\/wp\/v2\/comments?post=24741"}],"version-history":[{"count":0,"href":"https:\/\/kb.hostatom.com\/lesson\/wp-json\/wp\/v2\/posts\/24741\/revisions"}],"wp:attachment":[{"href":"https:\/\/kb.hostatom.com\/lesson\/wp-json\/wp\/v2\/media?parent=24741"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kb.hostatom.com\/lesson\/wp-json\/wp\/v2\/categories?post=24741"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kb.hostatom.com\/lesson\/wp-json\/wp\/v2\/tags?post=24741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}