{"id":857,"date":"2020-07-12T18:36:47","date_gmt":"2020-07-12T13:06:47","guid":{"rendered":"https:\/\/myfreeonlinetools.com\/blog\/?p=857"},"modified":"2020-07-12T18:36:47","modified_gmt":"2020-07-12T13:06:47","slug":"html-5-page-structure-html-5-code-layout","status":"publish","type":"post","link":"https:\/\/myfreeonlinetools.com\/blog\/html-5-page-structure-html-5-code-layout\/","title":{"rendered":"HTML 5 Page Structure | HTML 5 Code Layout"},"content":{"rendered":"

Sample Code for HTML 5 Page Structure<\/h2>\n
<!DOCTYPE HTML>\r\n\r\n<html>\r\n\r\n<head>\r\n<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\" \/>\r\n<meta name=\"viewport\" content=\"width=device-width\">\r\n<meta name=\"viewport\" content= \"width=device-width, initial-scale=1.0\"> \r\n<title>HTML 5 Page Title<\/title>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<header>\r\n<nav>\r\n<ul>\r\n<li>Navigation Menu List<\/li>\r\n<\/ul>\r\n<\/nav>\r\n<\/header>\r\n\r\n<section>\r\n\r\n<article>\r\n<header>\r\n<h2>Article Title Here<\/h2>\r\n<p>Sample Code for Paragraph<\/p>\r\n<\/header>\r\n<p>Sample code for HTML 5 page structure by MyFreeOnlineTools<\/p>\r\n<\/article>\r\n\r\n<article>\r\n<header>\r\n<h2>Article Title Here<\/h2>\r\n<p>Sample Code for Paragraph<\/p>\r\n<\/header>\r\n<p>Sample code for HTML 5 page structure by MyFreeOnlineTools<\/p>\r\n<\/article>\r\n\r\n<\/section>\r\n\r\n<aside>\r\n<h2>About Us Aside Section<\/h2>\r\n<p>Sample Code for Paragraph<\/p>\r\n<\/aside>\r\n\r\n<footer>\r\n<p>Copyright 2020 MyFreeOnlineTools<\/p>\r\n<\/footer>\r\n\r\n<\/body>\r\n\r\n<\/html>\r\n\r\n<\/pre>\n
HTML 5 Layout Elements<\/h3>\n
    \n
  1. <header><\/code>\u00a0– Defines a header for a document or a section<\/li>\n
  2. <nav><\/code>\u00a0– Defines a set of navigation links<\/li>\n
  3. <section><\/code>\u00a0– Defines a section in a document<\/li>\n
  4. <article><\/code>\u00a0– Defines an independent, self-contained content<\/li>\n
  5. <aside><\/code>\u00a0– Defines content aside from the content (like a sidebar)<\/li>\n
  6. <footer><\/code>\u00a0– Defines a footer for a document or a section<\/li>\n
  7. <details><\/code>\u00a0– Defines additional details that the user can open and close on demand<\/li>\n
  8. <summary><\/code>\u00a0– Defines a heading for the\u00a0<details><\/code>\u00a0element<\/li>\n<\/ol>\n
     <\/p>\n
    HTML Page started with doctype or Document Type Declaration. By this browser know what type of document. Doctype defines at the top this is first item of HTML file. After doctype <html> element follows, which is used for inform to browser this is HTML document.<\/p>\n
    After using HTML tag, <head> section contains metadata like links, scripts, and other meta-tags information.<\/p>\n
    <meta> element is used for metadata to provide browser and search engines technical information about the page.<\/p>\n
    <title> element to define the title of your document.<\/p>\n
    The <body><\/body> of a document contains the content of the document. The content may be presented by a user agent in different ways. E.g., the content can be text, images, links, colors, graphics, etc.<\/p>\n
    Use the <header> element to define a header for the document or section. It contains a logo, search bar, navigation links, etc.<\/p>\n
    The <nav> element defines a block of navigation links, either within the current document or to other documents.<\/p>\n
    The <article> element is used to define a self contained content.<\/p>\n
    The <section> element is used to group of sections within a webpage containing page elements.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Sample Code for HTML 5 Page Structure <!DOCTYPE HTML> <html> <head> <meta http-equiv=”Content-Type” content=”text\/html; charset=UTF-8″ \/> <meta name=”viewport” content=”width=device-width”> <meta name=”viewport” content= “width=device-width, initial-scale=1.0”> <title>HTML 5 Page Title<\/title> <\/head> <body> […]<\/p>\n","protected":false},"author":1,"featured_media":865,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[31],"tags":[],"class_list":["post-857","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html"],"acf":[],"yoast_head":"\nHTML 5 Page Structure | HTML 5 Code Layout - MyFreeOnlineTools<\/title>\n<meta name=\"description\" content=\"HTML 5 Page Structure Code Sample Include Article, Body, Header, Section, article for Document Structure\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/myfreeonlinetools.com\/blog\/html-5-page-structure-html-5-code-layout\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML 5 Page Structure | HTML 5 Code Layout - MyFreeOnlineTools\" \/>\n<meta property=\"og:description\" content=\"HTML 5 Page Structure Code Sample Include Article, Body, Header, Section, article for Document Structure\" \/>\n<meta property=\"og:url\" content=\"https:\/\/myfreeonlinetools.com\/blog\/html-5-page-structure-html-5-code-layout\/\" \/>\n<meta property=\"og:site_name\" content=\"MyFreeOnlineTools\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/LearnSchoolOnline\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-12T13:06:47+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/07\/html_5_page_structure.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"400\" \/>\n\t<meta property=\"og:image:height\" content=\"225\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"myfreeonlinetools\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"myfreeonlinetools\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/html-5-page-structure-html-5-code-layout\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/html-5-page-structure-html-5-code-layout\/\"},\"author\":{\"name\":\"myfreeonlinetools\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c\"},\"headline\":\"HTML 5 Page Structure | HTML 5 Code Layout\",\"datePublished\":\"2020-07-12T13:06:47+00:00\",\"dateModified\":\"2020-07-12T13:06:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/html-5-page-structure-html-5-code-layout\/\"},\"wordCount\":294,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/html-5-page-structure-html-5-code-layout\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/07\/html_5_page_structure.jpg\",\"articleSection\":[\"HTML\"],\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/myfreeonlinetools.com\/blog\/html-5-page-structure-html-5-code-layout\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/html-5-page-structure-html-5-code-layout\/\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/html-5-page-structure-html-5-code-layout\/\",\"name\":\"HTML 5 Page Structure | HTML 5 Code Layout - MyFreeOnlineTools\",\"isPartOf\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/html-5-page-structure-html-5-code-layout\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/html-5-page-structure-html-5-code-layout\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/07\/html_5_page_structure.jpg\",\"datePublished\":\"2020-07-12T13:06:47+00:00\",\"dateModified\":\"2020-07-12T13:06:47+00:00\",\"description\":\"HTML 5 Page Structure Code Sample Include Article, Body, Header, Section, article for Document Structure\",\"breadcrumb\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/html-5-page-structure-html-5-code-layout\/#breadcrumb\"},\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/myfreeonlinetools.com\/blog\/html-5-page-structure-html-5-code-layout\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/html-5-page-structure-html-5-code-layout\/#primaryimage\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/07\/html_5_page_structure.jpg\",\"contentUrl\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/07\/html_5_page_structure.jpg\",\"width\":400,\"height\":225,\"caption\":\"HTML 5 Page Structure\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/html-5-page-structure-html-5-code-layout\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/myfreeonlinetools.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML 5 Page Structure | HTML 5 Code Layout\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#website\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/\",\"name\":\"MyFreeOnlineTools\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/myfreeonlinetools.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#organization\",\"name\":\"MyFreeOnlineTools\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png\",\"contentUrl\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png\",\"width\":387,\"height\":79,\"caption\":\"MyFreeOnlineTools\"},\"image\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c\",\"name\":\"myfreeonlinetools\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g\",\"caption\":\"myfreeonlinetools\"},\"description\":\"Live in Delhi, Working in Gurgaon as Web Designer and Graphic Designer. Developed and Design myfreeonlinetools for online free tools. Also having youtube channel Name with LearnSchoolOnline. Traveling, watching movies, coding are the hobbies.\",\"sameAs\":[\"https:\/\/myfreeonlinetools.com\/\",\"https:\/\/www.facebook.com\/LearnSchoolOnline\/\",\"https:\/\/www.youtube.com\/learnschoolonline\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML 5 Page Structure | HTML 5 Code Layout - MyFreeOnlineTools","description":"HTML 5 Page Structure Code Sample Include Article, Body, Header, Section, article for Document Structure","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/myfreeonlinetools.com\/blog\/html-5-page-structure-html-5-code-layout\/","og_locale":"en_US","og_type":"article","og_title":"HTML 5 Page Structure | HTML 5 Code Layout - MyFreeOnlineTools","og_description":"HTML 5 Page Structure Code Sample Include Article, Body, Header, Section, article for Document Structure","og_url":"https:\/\/myfreeonlinetools.com\/blog\/html-5-page-structure-html-5-code-layout\/","og_site_name":"MyFreeOnlineTools","article_author":"https:\/\/www.facebook.com\/LearnSchoolOnline\/","article_published_time":"2020-07-12T13:06:47+00:00","og_image":[{"width":400,"height":225,"url":"http:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/07\/html_5_page_structure.jpg","type":"image\/jpeg"}],"author":"myfreeonlinetools","twitter_card":"summary_large_image","twitter_misc":{"Written by":"myfreeonlinetools","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/myfreeonlinetools.com\/blog\/html-5-page-structure-html-5-code-layout\/#article","isPartOf":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/html-5-page-structure-html-5-code-layout\/"},"author":{"name":"myfreeonlinetools","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c"},"headline":"HTML 5 Page Structure | HTML 5 Code Layout","datePublished":"2020-07-12T13:06:47+00:00","dateModified":"2020-07-12T13:06:47+00:00","mainEntityOfPage":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/html-5-page-structure-html-5-code-layout\/"},"wordCount":294,"commentCount":0,"publisher":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#organization"},"image":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/html-5-page-structure-html-5-code-layout\/#primaryimage"},"thumbnailUrl":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/07\/html_5_page_structure.jpg","articleSection":["HTML"],"inLanguage":"en","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/myfreeonlinetools.com\/blog\/html-5-page-structure-html-5-code-layout\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/myfreeonlinetools.com\/blog\/html-5-page-structure-html-5-code-layout\/","url":"https:\/\/myfreeonlinetools.com\/blog\/html-5-page-structure-html-5-code-layout\/","name":"HTML 5 Page Structure | HTML 5 Code Layout - MyFreeOnlineTools","isPartOf":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/html-5-page-structure-html-5-code-layout\/#primaryimage"},"image":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/html-5-page-structure-html-5-code-layout\/#primaryimage"},"thumbnailUrl":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/07\/html_5_page_structure.jpg","datePublished":"2020-07-12T13:06:47+00:00","dateModified":"2020-07-12T13:06:47+00:00","description":"HTML 5 Page Structure Code Sample Include Article, Body, Header, Section, article for Document Structure","breadcrumb":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/html-5-page-structure-html-5-code-layout\/#breadcrumb"},"inLanguage":"en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/myfreeonlinetools.com\/blog\/html-5-page-structure-html-5-code-layout\/"]}]},{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/myfreeonlinetools.com\/blog\/html-5-page-structure-html-5-code-layout\/#primaryimage","url":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/07\/html_5_page_structure.jpg","contentUrl":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2020\/07\/html_5_page_structure.jpg","width":400,"height":225,"caption":"HTML 5 Page Structure"},{"@type":"BreadcrumbList","@id":"https:\/\/myfreeonlinetools.com\/blog\/html-5-page-structure-html-5-code-layout\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/myfreeonlinetools.com\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML 5 Page Structure | HTML 5 Code Layout"}]},{"@type":"WebSite","@id":"https:\/\/myfreeonlinetools.com\/blog\/#website","url":"https:\/\/myfreeonlinetools.com\/blog\/","name":"MyFreeOnlineTools","description":"","publisher":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/myfreeonlinetools.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en"},{"@type":"Organization","@id":"https:\/\/myfreeonlinetools.com\/blog\/#organization","name":"MyFreeOnlineTools","url":"https:\/\/myfreeonlinetools.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png","contentUrl":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png","width":387,"height":79,"caption":"MyFreeOnlineTools"},"image":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c","name":"myfreeonlinetools","image":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g","caption":"myfreeonlinetools"},"description":"Live in Delhi, Working in Gurgaon as Web Designer and Graphic Designer. Developed and Design myfreeonlinetools for online free tools. Also having youtube channel Name with LearnSchoolOnline. Traveling, watching movies, coding are the hobbies.","sameAs":["https:\/\/myfreeonlinetools.com\/","https:\/\/www.facebook.com\/LearnSchoolOnline\/","https:\/\/www.youtube.com\/learnschoolonline"]}]}},"_links":{"self":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts\/857","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/comments?post=857"}],"version-history":[{"count":0,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts\/857\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/media\/865"}],"wp:attachment":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/media?parent=857"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/categories?post=857"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/tags?post=857"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}