HTML structure in code

HTML structure in code

Topic outcomes

In this topic, we will look at an example of an HTML basic code and explain it.  

HTML structure in code

Every HTML document has the same structure, every HTML document is divided into the following two parts as mentioned in the previous topic.

HEAD

Please note that metadata means information about information
The head or head element is where all the metadata of the Html page is saved (more on “metadata” later).

Body

The body or body element is where all the content of the webpage is saved or created

Let’s look at the code of a basic empty web page

The declaration defines that this document is an HTML5 document

The element is the root element of an HTML page, the root element defines the start and end of an HTML documents

The element contains meta information about the HTML page. Meta information is the information about the web page such as the title or the page description of the web page

The element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)</div></div><div class="e-hotspot elementor-repeater-item-c480fb3 e-hotspot--sequenced e-hotspot--position-left e-hotspot--position-top e-hotspot--icon"><div class="e-hotspot__button e-hotspot--expand"><div class="e-hotspot__icon"></div></div><div class="e-hotspot__tooltip e-hotspot--tooltip-position e-hotspot--fade-grow " > The<body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.</div></div></div></div></div></div></div></section><section class="elementor-section elementor-top-section elementor-element elementor-element-bea2637 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no" data-id="bea2637" data-element_type="section"><div class="elementor-container elementor-column-gap-default"><div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-6547cd6" data-id="6547cd6" data-element_type="column"><div class="elementor-widget-wrap elementor-element-populated"><div class="elementor-element elementor-element-4dc75b2 elementor-widget elementor-widget-image" data-id="4dc75b2" data-element_type="widget" data-widget_type="image.default"><div class="elementor-widget-container"> <img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiB2aWV3Qm94PSIwIDAgNTAwIDUwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="500" height="500" data-src="https://mytrainingboard.online/wp-content/uploads/2021/12/3.png" class="attachment-large size-large wp-image-2759" alt="" loading="lazy" data-srcset="https://mytrainingboard.online/wp-content/uploads/2021/12/3.png 500w, https://mytrainingboard.online/wp-content/uploads/2021/12/3-300x300.png 300w, https://mytrainingboard.online/wp-content/uploads/2021/12/3-150x150.png 150w" data-sizes="(max-width: 500px) 100vw, 500px" /></div></div></div></div><div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-e73e1b9" data-id="e73e1b9" data-element_type="column"><div class="elementor-widget-wrap elementor-element-populated"><div class="elementor-element elementor-element-8cb6ea4 elementor-invisible elementor-widget elementor-widget-heading" data-id="8cb6ea4" data-element_type="widget" data-settings="{"_animation":"fadeInUp"}" data-widget_type="heading.default"><div class="elementor-widget-container"><h2 class="elementor-heading-title elementor-size-default">Task</h2></div></div></div></div></div></section><section class="elementor-section elementor-top-section elementor-element elementor-element-998f1e9 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no" data-id="998f1e9" data-element_type="section"><div class="elementor-container elementor-column-gap-default"><div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-951ea8a" data-id="951ea8a" data-element_type="column"><div class="elementor-widget-wrap elementor-element-populated"><div class="elementor-element elementor-element-54c1fab elementor-widget elementor-widget-text-editor" data-id="54c1fab" data-element_type="widget" data-widget_type="text-editor.default"><div class="elementor-widget-container"><p>Let’s see what happens when you copy/paste the HTML code below into the live coding editor below:</p></div></div><div class="elementor-element elementor-element-82ecd0a elementor-widget elementor-widget-shortcode" data-id="82ecd0a" data-element_type="widget" data-widget_type="shortcode.default"><div class="elementor-widget-container"><div class="elementor-shortcode"></div></div></div></div></div></div></section><section class="elementor-section elementor-top-section elementor-element elementor-element-2efd06a elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no" data-id="2efd06a" data-element_type="section"><div class="elementor-container elementor-column-gap-default"><div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-51fc770" data-id="51fc770" data-element_type="column"><div class="elementor-widget-wrap elementor-element-populated"><div class="elementor-element elementor-element-81b73df elementor-widget elementor-widget-text-editor" data-id="81b73df" data-element_type="widget" data-widget_type="text-editor.default"><div class="elementor-widget-container"><p>Your results should look like the one below</p></div></div><div class="elementor-element elementor-element-0347d5a elementor-widget elementor-widget-image" data-id="0347d5a" data-element_type="widget" data-widget_type="image.default"><div class="elementor-widget-container"> <img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MTAiIGhlaWdodD0iMzU0IiB2aWV3Qm94PSIwIDAgODEwIDM1NCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="810" height="354" data-src="https://mytrainingboard.online/wp-content/uploads/2022/09/basic-1024x447.jpg" class="attachment-large size-large wp-image-3748" alt="" loading="lazy" data-srcset="https://mytrainingboard.online/wp-content/uploads/2022/09/basic-1024x447.jpg 1024w, https://mytrainingboard.online/wp-content/uploads/2022/09/basic-300x131.jpg 300w, https://mytrainingboard.online/wp-content/uploads/2022/09/basic-768x335.jpg 768w, https://mytrainingboard.online/wp-content/uploads/2022/09/basic.jpg 1366w" data-sizes="(max-width: 810px) 100vw, 810px" /></div></div></div></div></div></section><section class="elementor-section elementor-top-section elementor-element elementor-element-8997d3e elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no" data-id="8997d3e" data-element_type="section"><div class="elementor-container elementor-column-gap-default"><div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-3613978" data-id="3613978" data-element_type="column"><div class="elementor-widget-wrap elementor-element-populated"><div class="elementor-element elementor-element-0ac4876 elementor-widget elementor-widget-image" data-id="0ac4876" data-element_type="widget" data-widget_type="image.default"><div class="elementor-widget-container"> <img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiB2aWV3Qm94PSIwIDAgNTAwIDUwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="500" height="500" data-src="https://mytrainingboard.online/wp-content/uploads/2021/12/2.png" class="attachment-large size-large wp-image-2758" alt="" loading="lazy" data-srcset="https://mytrainingboard.online/wp-content/uploads/2021/12/2.png 500w, https://mytrainingboard.online/wp-content/uploads/2021/12/2-300x300.png 300w, https://mytrainingboard.online/wp-content/uploads/2021/12/2-150x150.png 150w" data-sizes="(max-width: 500px) 100vw, 500px" /></div></div></div></div><div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-476842f" data-id="476842f" data-element_type="column"><div class="elementor-widget-wrap elementor-element-populated"><div class="elementor-element elementor-element-daef2d2 elementor-invisible elementor-widget elementor-widget-heading" data-id="daef2d2" data-element_type="widget" data-settings="{"_animation":"fadeInUp"}" data-widget_type="heading.default"><div class="elementor-widget-container"><h2 class="elementor-heading-title elementor-size-default">What happened?</h2></div></div></div></div></div></section><section class="elementor-section elementor-top-section elementor-element elementor-element-140a7f1 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no" data-id="140a7f1" data-element_type="section"><div class="elementor-container elementor-column-gap-default"><div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-87ea6da" data-id="87ea6da" data-element_type="column"><div class="elementor-widget-wrap elementor-element-populated"><section class="elementor-section elementor-inner-section elementor-element elementor-element-71d82bc elementor-section-full_width elementor-section-content-middle elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no" data-id="71d82bc" data-element_type="section"><div class="elementor-container elementor-column-gap-no"><div class="elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-f55ce40" data-id="f55ce40" data-element_type="column"><div class="elementor-widget-wrap elementor-element-populated"><div class="elementor-element elementor-element-4b1c979 elementor-flip-box--effect-push elementor-flip-box--direction-up elementor-widget elementor-widget-flip-box" data-id="4b1c979" data-element_type="widget" data-widget_type="flip-box.default"><div class="elementor-widget-container"><div class="elementor-flip-box"><div class="elementor-flip-box__layer elementor-flip-box__front"><div class="elementor-flip-box__layer__overlay"><div class="elementor-flip-box__layer__inner"><h3 class="elementor-flip-box__layer__title"> What happened?</h3><div class="elementor-flip-box__layer__description"> Nothing showed up right? Find out why</div></div></div></div><div class="elementor-flip-box__layer elementor-flip-box__back"><div class="elementor-flip-box__layer__overlay"><div class="elementor-flip-box__layer__inner"><div class="elementor-flip-box__layer__description"> That’s because the code above is basically like a blank word document. These HTML elements are required to create the necessary HTML structure which would be used to add content later.  Your results should look like the one below</div></div></div></div></div></div></div></div></div></div></section></div></div></div></section><section class="elementor-section elementor-top-section elementor-element elementor-element-d7206b9 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no" data-id="d7206b9" data-element_type="section"><div class="elementor-container elementor-column-gap-default"><div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-90cf242" data-id="90cf242" data-element_type="column"><div class="elementor-widget-wrap elementor-element-populated"><div class="elementor-element elementor-element-71622c6 elementor-widget elementor-widget-image" data-id="71622c6" data-element_type="widget" data-widget_type="image.default"><div class="elementor-widget-container"> <img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiB2aWV3Qm94PSIwIDAgNTAwIDUwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="500" height="500" data-src="https://mytrainingboard.online/wp-content/uploads/2022/09/7.png" class="attachment-large size-large wp-image-3718" alt="" loading="lazy" data-srcset="https://mytrainingboard.online/wp-content/uploads/2022/09/7.png 500w, https://mytrainingboard.online/wp-content/uploads/2022/09/7-300x300.png 300w, https://mytrainingboard.online/wp-content/uploads/2022/09/7-150x150.png 150w" data-sizes="(max-width: 500px) 100vw, 500px" /></div></div></div></div><div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-848704c" data-id="848704c" data-element_type="column"><div class="elementor-widget-wrap elementor-element-populated"><div class="elementor-element elementor-element-3bcb139 elementor-invisible elementor-widget elementor-widget-heading" data-id="3bcb139" data-element_type="widget" data-settings="{"_animation":"fadeInUp"}" data-widget_type="heading.default"><div class="elementor-widget-container"><h1 class="elementor-heading-title elementor-size-default">Let’s look at an example</h1></div></div><div class="elementor-element elementor-element-f2d7a89 elementor-invisible elementor-widget elementor-widget-heading" data-id="f2d7a89" data-element_type="widget" data-settings="{"_animation":"fadeInUp"}" data-widget_type="heading.default"><div class="elementor-widget-container"><h2 class="elementor-heading-title elementor-size-default">Of a web page structure</h2></div></div></div></div></div></section><section class="elementor-section elementor-top-section elementor-element elementor-element-73ad38d elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no" data-id="73ad38d" data-element_type="section"><div class="elementor-container elementor-column-gap-default"><div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b0c7bc5" data-id="b0c7bc5" data-element_type="column"><div class="elementor-widget-wrap elementor-element-populated"><div class="elementor-element elementor-element-0d1f019 elementor-widget elementor-widget-text-editor" data-id="0d1f019" data-element_type="widget" data-widget_type="text-editor.default"><div class="elementor-widget-container"> Let’s say we want to create the following webpage SHOW IMAGE ON BELOW.Let’s see how this would look using HTML structure:</div></div><div class="elementor-element elementor-element-517341d elementor-widget elementor-widget-image" data-id="517341d" data-element_type="widget" data-widget_type="image.default"><div class="elementor-widget-container"> <img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NDAiIGhlaWdodD0iMjcwIiB2aWV3Qm94PSIwIDAgNDQwIDI3MCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="440" height="270" data-src="https://mytrainingboard.online/wp-content/uploads/2022/09/basicimage.jpg" class="attachment-large size-large wp-image-3749" alt="" loading="lazy" data-srcset="https://mytrainingboard.online/wp-content/uploads/2022/09/basicimage.jpg 440w, https://mytrainingboard.online/wp-content/uploads/2022/09/basicimage-300x184.jpg 300w" data-sizes="(max-width: 440px) 100vw, 440px" /></div></div></div></div></div></section><section class="elementor-section elementor-top-section elementor-element elementor-element-75b4852 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no" data-id="75b4852" data-element_type="section"><div class="elementor-container elementor-column-gap-default"><div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-05d5a78" data-id="05d5a78" data-element_type="column"><div class="elementor-widget-wrap elementor-element-populated"><div class="elementor-element elementor-element-53f3bc4 elementor-widget elementor-widget-text-editor" data-id="53f3bc4" data-element_type="widget" data-widget_type="text-editor.default"><div class="elementor-widget-container"></div></div><div class="elementor-element elementor-element-46b0882 elementor-widget elementor-widget-image" data-id="46b0882" data-element_type="widget" data-widget_type="image.default"><div class="elementor-widget-container"> <img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0ODIiIGhlaWdodD0iMzE4IiB2aWV3Qm94PSIwIDAgNDgyIDMxOCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="482" height="318" data-src="https://mytrainingboard.online/wp-content/uploads/2022/09/tempsnip.png" class="attachment-large size-large wp-image-3750" alt="" loading="lazy" data-srcset="https://mytrainingboard.online/wp-content/uploads/2022/09/tempsnip.png 482w, https://mytrainingboard.online/wp-content/uploads/2022/09/tempsnip-300x198.png 300w" data-sizes="(max-width: 482px) 100vw, 482px" /></div></div><div class="elementor-element elementor-element-2089846 elementor-widget elementor-widget-text-editor" data-id="2089846" data-element_type="widget" data-widget_type="text-editor.default"><div class="elementor-widget-container"><p>The <h1> </h1> is the main heading tag used to create a main heading in HTML.</p><p>The <p> </p> is a paragraph tag used to create a paragraph in HTML.</p></div></div><div class="elementor-element elementor-element-658fda0 elementor-widget elementor-widget-text-editor" data-id="658fda0" data-element_type="widget" data-widget_type="text-editor.default"><div class="elementor-widget-container"></div></div></div></div></div></section><section class="elementor-section elementor-top-section elementor-element elementor-element-c47e583 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no" data-id="c47e583" data-element_type="section"><div class="elementor-container elementor-column-gap-default"><div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-8774b5f" data-id="8774b5f" data-element_type="column"><div class="elementor-widget-wrap elementor-element-populated"><div class="elementor-element elementor-element-8ec17d9 elementor-widget elementor-widget-image" data-id="8ec17d9" data-element_type="widget" data-widget_type="image.default"><div class="elementor-widget-container"> <img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiB2aWV3Qm94PSIwIDAgNTAwIDUwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="500" height="500" data-src="https://mytrainingboard.online/wp-content/uploads/2022/09/9.png" class="attachment-large size-large wp-image-3720" alt="" loading="lazy" data-srcset="https://mytrainingboard.online/wp-content/uploads/2022/09/9.png 500w, https://mytrainingboard.online/wp-content/uploads/2022/09/9-300x300.png 300w, https://mytrainingboard.online/wp-content/uploads/2022/09/9-150x150.png 150w" data-sizes="(max-width: 500px) 100vw, 500px" /></div></div></div></div><div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-e57ac1d" data-id="e57ac1d" data-element_type="column"><div class="elementor-widget-wrap elementor-element-populated"><div class="elementor-element elementor-element-2c27848 elementor-invisible elementor-widget elementor-widget-heading" data-id="2c27848" data-element_type="widget" data-settings="{"_animation":"fadeInUp"}" data-widget_type="heading.default"><div class="elementor-widget-container"><h1 class="elementor-heading-title elementor-size-default">Let's practise</h1></div></div><div class="elementor-element elementor-element-2d45adc elementor-invisible elementor-widget elementor-widget-heading" data-id="2d45adc" data-element_type="widget" data-settings="{"_animation":"fadeInUp"}" data-widget_type="heading.default"><div class="elementor-widget-container"><h2 class="elementor-heading-title elementor-size-default">Of a web page structure</h2></div></div></div></div></div></section><section class="elementor-section elementor-top-section elementor-element elementor-element-33a3103 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no" data-id="33a3103" data-element_type="section"><div class="elementor-container elementor-column-gap-default"><div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-aae1833" data-id="aae1833" data-element_type="column"><div class="elementor-widget-wrap elementor-element-populated"><div class="elementor-element elementor-element-3adcaf4 elementor-widget elementor-widget-text-editor" data-id="3adcaf4" data-element_type="widget" data-widget_type="text-editor.default"><div class="elementor-widget-container"><p>Click here to practice the HTML code yourself.</p><p>In this example – see if you can change the heading and the paragraph text. Click run and see what happens.</p></div></div></div></div></div></section><section class="elementor-section elementor-top-section elementor-element elementor-element-2e9b29f elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no" data-id="2e9b29f" data-element_type="section"><div class="elementor-container elementor-column-gap-default"><div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-af0392d" data-id="af0392d" data-element_type="column"><div class="elementor-widget-wrap elementor-element-populated"><div class="elementor-element elementor-element-095d8d1 elementor-align-left elementor-invisible elementor-widget elementor-widget-button" data-id="095d8d1" data-element_type="widget" data-settings="{"_animation":"fadeInUp"}" data-widget_type="button.default"><div class="elementor-widget-container"><div class="elementor-button-wrapper"> <a href="https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default" class="elementor-button-link elementor-button elementor-size-md elementor-animation-grow" role="button"> <span class="elementor-button-content-wrapper"> <span class="elementor-button-text">Practice Now</span> </span> </a></div></div></div></div></div></div></section></div></div></div></div></div></div></div></div></div></div><div id="um_upload_single" style="display:none"></div><div id="um_view_photo" style="display:none"><a href="javascript:void(0);" data-action="um_remove_modal" class="um-modal-close" aria-label="Close view photo modal"> <i class="um-faicon-times"></i> </a><div class="um-modal-body photo"><div class="um-modal-photo"></div></div></div><div class="preloader-plus"><div class="prog-bar-wrapper"><div class="prog-bar-bg"></div><div class="prog-bar"></div></div><div class="preloader-content"><div class="lds-css ng-scope"><div class="lds-dots preloader-plus-default-icons"><div></div><div></div><div></div><div></div></div></div> <img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2OTEyIiBoZWlnaHQ9IjM0NTYiIHZpZXdCb3g9IjAgMCA2OTEyIDM0NTYiPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHN0eWxlPSJmaWxsOiNjZmQ0ZGI7ZmlsbC1vcGFjaXR5OiAwLjE7Ii8+PC9zdmc+" width="6912" height="3456" class="preloader-custom-img" data-src="http://mytrainingboard.online/wp-content/uploads/2022/10/GOD-LOGO-WITH-A-WHITE-BACKGROUND.png" /><div class="preloader-plus-custom-content"><p>MyTrainingBoard is loading..</p></div><p id="preloader-counter">0</p></div></div> <a href="#page" class="scrollup" id="btn-scrollup"></a><div class="learndash-wrapper learndash-wrapper-login-modal ld-modal-closed"><div class="ld-modal ld-login-modal"><span class="ld-modal-closer ld-icon ld-icon-delete"></span><div class="ld-login-modal-login"><div class="ld-login-modal-wrapper"><div class="ld-modal-heading"> Login</div><div class="ld-modal-text"> Accessing this course requires a login. Please enter your credentials below!</div><div class="ld-login-modal-form"><form name="loginform" id="loginform" action="https://mytrainingboard.online/mtb/" method="post"><input id="learndash-login-form" type="hidden" name="learndash-login-form" value="8ea9ab5c01" /><p class="login-username"> <label for="user_login">Username or Email Address</label> <input type="text" name="log" id="user_login" autocomplete="username" class="input" value="" size="20" /></p><p class="login-password"> <label for="user_pass">Password</label> <input type="password" name="pwd" id="user_pass" autocomplete="current-password" class="input" value="" size="20" /></p><p class="login-remember"><label><input name="rememberme" type="checkbox" id="rememberme" value="forever" /> Remember Me</label></p><p class="login-submit"> <input type="submit" name="wp-submit" id="wp-submit" class="button button-primary" value="Log In" /> <input type="hidden" name="redirect_to" value="/topic/html-structure-in-code/" /></p></form> <a class="ld-forgot-password-link" href="https://mytrainingboard.online/mtb/?action=lostpassword&redirect_to=https%3A%2F%2Fmytrainingboard.online%2Ftopic%2Fhtml-structure-in-code%2F%3Fld-resetpw%3Dtrue%23login">Lost Your Password?</a><div class="ld-login-modal-branding"> <img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2OTEyIiBoZWlnaHQ9IjM0NTYiIHZpZXdCb3g9IjAgMCA2OTEyIDM0NTYiPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHN0eWxlPSJmaWxsOiNjZmQ0ZGI7ZmlsbC1vcGFjaXR5OiAwLjE7Ii8+PC9zdmc+" width="6912" height="3456" data-src="https://mytrainingboard.online/wp-content/uploads/2022/10/GOD-LOGO-WITH-A-WHITE-BACKGROUND.png" alt=""></div></div></div></div></div></div> <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-no-optimize="1">var litespeed_vary=document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/,"");litespeed_vary||fetch("/wp-content/plugins/litespeed-cache/guest.vary.php",{method:"POST",cache:"no-cache",redirect:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty("reload")&&"yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.referrer),window.location.reload(!0))});</script><script data-optimized="1" type="litespeed/javascript" data-src="https://mytrainingboard.online/wp-content/litespeed/js/cf2069c19a70e281ac1849000edd3d0a.js?ver=156ee"></script><script>const litespeed_ui_events=["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script></body></html> <!-- Page optimized by LiteSpeed Cache @2023-03-21 20:57:08 --> <!-- Page generated by LiteSpeed Cache 5.3.3 on 2023-03-21 20:57:07 --> <!-- Guest Mode -->