Basic HTML Structure

Important Points

What is the Basic HTML Structure?

The Basic HTML Document Structure

Here’s the basic structure:



  
    
    
    Basic HTML Structure
  
  
    

Welcome to HTML!

This is an example of the basic HTML structure.

  1. Declaration :
  2. Tag :
  3. The Section :
    • :
    • :
    • :</strong> <span id="radix-:r34:" class="cursor-pointer inline transition-colors duration-200 ease-in-out hover:opacity-80" aria-haspopup="menu" aria-expanded="false" data-state="closed">The main heading of the page when it is opened, that is, the title which appears in the title bar of the browser.</span> It’s also important for SEO.</li></ul></li><li><strong>The <body> Section :</strong> <span id="radix-:r37:" class="cursor-pointer inline transition-colors duration-200 ease-in-out hover:opacity-80" aria-haspopup="menu" aria-expanded="false" data-state="closed">The <body> section enfolds all the contents seen on the page by users.</span> <span id="radix-:r3a:" class="cursor-pointer inline transition-colors duration-200 ease-in-out hover:opacity-80" aria-haspopup="menu" aria-expanded="false" data-state="closed">This is the area of the web page, where headings, paragraphs, images, links and other elements are defined, which forms the main part of the page’s content.</span> <span id="radix-:r3d:" class="cursor-pointer inline transition-colors duration-200 ease-in-out hover:opacity-80" aria-haspopup="menu" aria-expanded="false" data-state="closed">The actual information that is displayed to the visitors when they type your website’s URL is found within the <body> tag.</span></li></ol> </div> </div> <div class="elementor-element elementor-element-e58f21b elementor-widget elementor-widget-heading" data-id="e58f21b" data-element_type="widget" data-e-type="widget" data-widget_type="heading.default"> <div class="elementor-widget-container"> <h2 id='key-html-tags-for-content-structure' id="boomdevs_6" class="elementor-heading-title elementor-size-default">Key HTML Tags for Content Structure</h2> </div> </div> <div class="elementor-element elementor-element-ebe8d61 elementor-widget elementor-widget-text-editor" data-id="ebe8d61" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p>To understand the basic HTML structure better, let’s understand some common tags used within the body of an HTML document:</p> </div> </div> <div class="elementor-element elementor-element-fc5dbb1 elementor-widget elementor-widget-text-editor" data-id="fc5dbb1" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p><strong><code><h1></code> to <code><h6></code>:</strong> <span id="radix-:r3l:" class="cursor-pointer inline transition-colors duration-200 ease-in-out hover:opacity-80" aria-haspopup="menu" aria-expanded="false" data-state="closed">These are heading tags; the <h1> is first-levelling for a page, and the <h6> is the least important.</span> <span id="radix-:r3o:" class="cursor-pointer inline transition-colors duration-200 ease-in-out hover:opacity-80" aria-haspopup="menu" aria-expanded="false" data-state="closed">These assist in the organizations of the content starting with the highest level of the hierarchy.</span></p> </div> </div> <div class="elementor-element elementor-element-80c492f elementor-widget elementor-widget-code-block-for-elementor" data-id="80c492f" data-element_type="widget" data-e-type="widget" data-widget_type="code-block-for-elementor.default"> <div class="elementor-widget-container"> <pre class='line-numbers theme-tomorrow-night' data-show-toolbar='yes'><code class='language-html'><h1>This is the main heading</h1> <h2>This is a subheading</h2> </code></pre> </div> </div> <div class="elementor-element elementor-element-503f91d elementor-widget elementor-widget-text-editor" data-id="503f91d" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p><strong><code><p></code>:</strong> <span id="radix-:r3u:" class="cursor-pointer inline transition-colors duration-200 ease-in-out hover:opacity-80" aria-haspopup="menu" aria-expanded="false" data-state="closed">This tag is used where there is a likelihood of having paragraphs.</span> <span id="radix-:r41:" class="cursor-pointer inline transition-colors duration-200 ease-in-out hover:opacity-80" aria-haspopup="menu" aria-expanded="false" data-state="closed">Anything put in-between <p> tags is considered plain text by the browser no matter how big or small the amount.</span></p> </div> </div> <div class="elementor-element elementor-element-f00cbf2 elementor-widget elementor-widget-code-block-for-elementor" data-id="f00cbf2" data-element_type="widget" data-e-type="widget" data-widget_type="code-block-for-elementor.default"> <div class="elementor-widget-container"> <pre class='line-numbers theme-tomorrow-night' data-show-toolbar='yes'><code class='language-html'><p>This is a paragraph of text.</p> </code></pre> </div> </div> <div class="elementor-element elementor-element-d9f4402 elementor-widget elementor-widget-text-editor" data-id="d9f4402" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p><strong><code><a></code>:</strong> This tag defines hyperlinks. <span id="radix-:r47:" class="cursor-pointer inline transition-colors duration-200 ease-in-out hover:opacity-80" aria-haspopup="menu" aria-expanded="false" data-state="closed">It permits someone to refer to other Web pages or other resources.</span></p> </div> </div> <div class="elementor-element elementor-element-511d049 elementor-widget elementor-widget-code-block-for-elementor" data-id="511d049" data-element_type="widget" data-e-type="widget" data-widget_type="code-block-for-elementor.default"> <div class="elementor-widget-container"> <pre class='line-numbers theme-tomorrow-night' data-show-toolbar='yes'><code class='language-html'><a href="https://codejn.com">Visit Code Junction Website</a> </code></pre> </div> </div> <div class="elementor-element elementor-element-8e01831 elementor-widget elementor-widget-text-editor" data-id="8e01831" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p><strong><code><img></code>:</strong> <span id="radix-:r4d:" class="cursor-pointer inline transition-colors duration-200 ease-in-out hover:opacity-80" aria-haspopup="menu" aria-expanded="false" data-state="closed">The html tag named <img> is used to show images which are present in a webpage in the browser.</span></p> </div> </div> <div class="elementor-element elementor-element-74acbfd elementor-widget elementor-widget-code-block-for-elementor" data-id="74acbfd" data-element_type="widget" data-e-type="widget" data-widget_type="code-block-for-elementor.default"> <div class="elementor-widget-container"> <pre class='line-numbers theme-tomorrow-night' data-show-toolbar='yes'><code class='language-html'><img src="image.jpg" alt="An example image"> </code></pre> </div> </div> <div class="elementor-element elementor-element-5c6e922 elementor-widget elementor-widget-text-editor" data-id="5c6e922" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p><strong><code><ul></code> , <code><ol></code> and <code><li></code>:</strong>  <span id="radix-:r4j:" class="cursor-pointer inline transition-colors duration-200 ease-in-out hover:opacity-80" aria-haspopup="menu" aria-expanded="false" data-state="closed">These tags are used to accomplish list building.</span> <span id="radix-:r4m:" class="cursor-pointer inline transition-colors duration-200 ease-in-out hover:opacity-80" aria-haspopup="menu" aria-expanded="false" data-state="closed">The <ul> gives list in the form of bullet points, <ol> forms the list in the form of numbers and <li> forms the list item.</span></p> </div> </div> <div class="elementor-element elementor-element-6feb2b4 elementor-widget elementor-widget-code-block-for-elementor" data-id="6feb2b4" data-element_type="widget" data-e-type="widget" data-widget_type="code-block-for-elementor.default"> <div class="elementor-widget-container"> <pre class='line-numbers theme-tomorrow-night' data-show-toolbar='yes'><code class='language-html'><ul> <li>Item 1</li> <li>Item 2</li> </ul> </code></pre> </div> </div> <div class="elementor-element elementor-element-20178e4 elementor-widget elementor-widget-heading" data-id="20178e4" data-element_type="widget" data-e-type="widget" data-widget_type="heading.default"> <div class="elementor-widget-container"> <h2 id='html-structure-and-its-impacts-for-seo' id="boomdevs_7" class="elementor-heading-title elementor-size-default">HTML structure and its impacts for SEO</h2> </div> </div> <div class="elementor-element elementor-element-7f8ff0a elementor-widget elementor-widget-text-editor" data-id="7f8ff0a" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p><span id="radix-:r55:" class="cursor-pointer inline transition-colors duration-200 ease-in-out hover:opacity-80" aria-haspopup="menu" aria-expanded="false" data-state="closed">The fundamental layout is important to SEO because search engines extract and evaluate content based on it.</span> For example:</p><ul><li><strong>Proper use of headings (<h1>, <h2>, etc.) :</strong> <span id="radix-:r58:" class="cursor-pointer inline transition-colors duration-200 ease-in-out hover:opacity-80" aria-haspopup="menu" aria-expanded="false" data-state="closed">Aids the search engine to determine the order of importance of your contents.</span></li><li><strong>Meaningful meta tags :</strong> <span id="radix-:r5b:" class="cursor-pointer inline transition-colors duration-200 ease-in-out hover:opacity-80" aria-haspopup="menu" aria-expanded="false" data-state="closed">That is, let the search engine know what is written on your web page so that it may present this information to another user.</span></li><li><strong>Alt attributes for images :</strong> <span id="radix-:r5e:" class="cursor-pointer inline transition-colors duration-200 ease-in-out hover:opacity-80" aria-haspopup="menu" aria-expanded="false" data-state="closed">Make your site index images easy for the search engines to manage and make your site easily searchable.</span></li></ul><p><span id="radix-:r5h:" class="cursor-pointer inline transition-colors duration-200 ease-in-out hover:opacity-80" aria-haspopup="menu" aria-expanded="false" data-state="closed">It’s important to organize your HTML well so that a search engine can easily understand what it has crawled.</span> <span id="radix-:r5k:" class="cursor-pointer inline transition-colors duration-200 ease-in-out hover:opacity-80" aria-haspopup="menu" aria-expanded="false" data-state="closed">If you are interested in further SEO recommendations you can click on this link to the <a href="https://developers.google.com/search/docs/fundamentals/seo-starter-guide" target="_blank" rel="noopener">Google Search Central Blog</a> where they have guidelines regarding HTML structure and SEO.</span></p> </div> </div> <div class="elementor-element elementor-element-a624038 elementor-widget elementor-widget-heading" data-id="a624038" data-element_type="widget" data-e-type="widget" data-widget_type="heading.default"> <div class="elementor-widget-container"> <h2 id='adding-styles-and-enhancements-to-your-basic-html-structure' id="boomdevs_8" class="elementor-heading-title elementor-size-default">Adding Styles and Enhancements to Your Basic HTML Structure</h2> </div> </div> <div class="elementor-element elementor-element-b7cd3da elementor-widget elementor-widget-text-editor" data-id="b7cd3da" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p><span id="radix-:r5r:" class="cursor-pointer inline transition-colors duration-200 ease-in-out hover:opacity-80" aria-haspopup="menu" aria-expanded="false" data-state="closed">Once you learnt the basic HTML tags that create the structure of your page the next step is to style your page using CSS (Cascading Style Sheets) and add functionality using JavaScript.</span> <span id="radix-:r5u:" class="cursor-pointer inline transition-colors duration-200 ease-in-out hover:opacity-80" aria-haspopup="menu" aria-expanded="false" data-state="closed">The following technologies let you style your page and make it interactive to help you create an interesting website.</span></p> </div> </div> <div class="elementor-element elementor-element-87fff89 elementor-widget elementor-widget-code-block-for-elementor" data-id="87fff89" data-element_type="widget" data-e-type="widget" data-widget_type="code-block-for-elementor.default"> <div class="elementor-widget-container"> <pre class='line-numbers theme-tomorrow-night' data-show-toolbar='yes'><code class='language-html'><style> h1 { color: blue; } </style> </code></pre> </div> </div> <div class="elementor-element elementor-element-e64f76d elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="e64f76d" data-element_type="widget" data-e-type="widget" data-widget_type="divider.default"> <div class="elementor-widget-container"> <div class="elementor-divider"> <span class="elementor-divider-separator"> </span> </div> </div> </div> <div class="elementor-element elementor-element-be483ef elementor-widget elementor-widget-heading" data-id="be483ef" data-element_type="widget" data-e-type="widget" data-widget_type="heading.default"> <div class="elementor-widget-container"> <h2 id='faq' id="boomdevs_9" class="elementor-heading-title elementor-size-default">FAQ</h2> </div> </div> <div class="elementor-element elementor-element-0081e5f elementor-widget elementor-widget-n-accordion" data-id="0081e5f" data-element_type="widget" data-e-type="widget" data-settings="{"default_state":"expanded","max_items_expended":"one","n_accordion_animation_duration":{"unit":"ms","size":400,"sizes":[]}}" data-widget_type="nested-accordion.default"> <div class="elementor-widget-container"> <div class="e-n-accordion" aria-label="Accordion. Open links with Enter or Space, close with Escape, and navigate with Arrow Keys"> <details id="e-n-accordion-item-5320" class="e-n-accordion-item" open> <summary class="e-n-accordion-item-title" data-accordion-index="1" tabindex="0" aria-expanded="true" aria-controls="e-n-accordion-item-5320" > <span class='e-n-accordion-item-title-header'><div class="e-n-accordion-item-title-text"> What is the purpose of the <!DOCTYPE html> declaration? </div></span> <span class='e-n-accordion-item-title-icon'> <span class='e-opened' ><svg aria-hidden="true" class="e-font-icon-svg e-fas-minus" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg></span> <span class='e-closed'><svg aria-hidden="true" class="e-font-icon-svg e-fas-plus" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg></span> </span> </summary> <div role="region" aria-labelledby="e-n-accordion-item-5320" class="elementor-element elementor-element-5dad550 e-con-full e-flex e-con e-child" data-id="5dad550" data-element_type="container" data-e-type="container"> <div role="region" aria-labelledby="e-n-accordion-item-5320" class="elementor-element elementor-element-2f0f432 e-flex e-con-boxed e-con e-child" data-id="2f0f432" data-element_type="container" data-e-type="container"> <div class="e-con-inner"> <div class="elementor-element elementor-element-04f4467 elementor-widget elementor-widget-text-editor" data-id="04f4467" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p>The <code><!DOCTYPE html></code> declaration is used to tell the web browser which version of HTML the page is written in. In modern web development, it specifies that the page is using HTML5. It helps the browser render the page correctly according to the HTML standards.</p> </div> </div> </div> </div> </div> </details> <details id="e-n-accordion-item-5321" class="e-n-accordion-item" > <summary class="e-n-accordion-item-title" data-accordion-index="2" tabindex="-1" aria-expanded="false" aria-controls="e-n-accordion-item-5321" > <span class='e-n-accordion-item-title-header'><div class="e-n-accordion-item-title-text"> What are the basic elements of an HTML document? </div></span> <span class='e-n-accordion-item-title-icon'> <span class='e-opened' ><svg aria-hidden="true" class="e-font-icon-svg e-fas-minus" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg></span> <span class='e-closed'><svg aria-hidden="true" class="e-font-icon-svg e-fas-plus" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg></span> </span> </summary> <div role="region" aria-labelledby="e-n-accordion-item-5321" class="elementor-element elementor-element-d9a7fa8 e-flex e-con-boxed e-con e-child" data-id="d9a7fa8" data-element_type="container" data-e-type="container"> <div class="e-con-inner"> <div role="region" aria-labelledby="e-n-accordion-item-5321" class="elementor-element elementor-element-008665a e-con-full e-flex e-con e-child" data-id="008665a" data-element_type="container" data-e-type="container"> <div class="elementor-element elementor-element-03a8837 elementor-widget elementor-widget-text-editor" data-id="03a8837" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p>The basic elements of an HTML document include:</p><ul><li><code><!DOCTYPE html></code>: Declares the document type.</li><li><code><html></code>: The root element that wraps all HTML content.</li><li><code><head></code>: Contains metadata about the document, such as the title, character encoding, and links to stylesheets.</li><li><code><body></code>: Contains the content of the webpage that is visible to users.</li></ul> </div> </div> </div> </div> </div> </details> <details id="e-n-accordion-item-5322" class="e-n-accordion-item" > <summary class="e-n-accordion-item-title" data-accordion-index="3" tabindex="-1" aria-expanded="false" aria-controls="e-n-accordion-item-5322" > <span class='e-n-accordion-item-title-header'><div class="e-n-accordion-item-title-text"> What is the difference between the and sections in HTML? </div></span> <span class='e-n-accordion-item-title-icon'> <span class='e-opened' ><svg aria-hidden="true" class="e-font-icon-svg e-fas-minus" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg></span> <span class='e-closed'><svg aria-hidden="true" class="e-font-icon-svg e-fas-plus" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg></span> </span> </summary> <div role="region" aria-labelledby="e-n-accordion-item-5322" class="elementor-element elementor-element-8b5adaf e-flex e-con-boxed e-con e-child" data-id="8b5adaf" data-element_type="container" data-e-type="container"> <div class="e-con-inner"> <div class="elementor-element elementor-element-c62e58a elementor-widget elementor-widget-text-editor" data-id="c62e58a" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p>The <code><head></code> section contains meta-information about the document (such as the title, meta tags, and links to CSS), which isn’t directly visible to users. The <code><body></code> section contains the content of the webpage (text, images, links, etc.) that users can see and interact with.</p> </div> </div> </div> </div> </details> <details id="e-n-accordion-item-5323" class="e-n-accordion-item" > <summary class="e-n-accordion-item-title" data-accordion-index="4" tabindex="-1" aria-expanded="false" aria-controls="e-n-accordion-item-5323" > <span class='e-n-accordion-item-title-header'><div class="e-n-accordion-item-title-text"> What is the purpose of the tag in the HTML section? </div></span> <span class='e-n-accordion-item-title-icon'> <span class='e-opened' ><svg aria-hidden="true" class="e-font-icon-svg e-fas-minus" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg></span> <span class='e-closed'><svg aria-hidden="true" class="e-font-icon-svg e-fas-plus" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg></span> </span> </summary> <div role="region" aria-labelledby="e-n-accordion-item-5323" class="elementor-element elementor-element-d46f6f4 e-flex e-con-boxed e-con e-child" data-id="d46f6f4" data-element_type="container" data-e-type="container"> <div class="e-con-inner"> <div class="elementor-element elementor-element-d93254a elementor-widget elementor-widget-text-editor" data-id="d93254a" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p>The <code><meta></code> tag provides metadata about the HTML document. For example, the <code><meta charset="UTF-8"></code> tag defines the character encoding for the document, ensuring that all characters display correctly. Another common use of the <code><meta></code> tag is setting the viewport to ensure the webpage is responsive on different devices.</p> </div> </div> </div> </div> </details> <details id="e-n-accordion-item-5324" class="e-n-accordion-item" > <summary class="e-n-accordion-item-title" data-accordion-index="5" tabindex="-1" aria-expanded="false" aria-controls="e-n-accordion-item-5324" > <span class='e-n-accordion-item-title-header'><div class="e-n-accordion-item-title-text"> Why should you use semantic HTML tags like <header>, <footer>, and <article>? </div></span> <span class='e-n-accordion-item-title-icon'> <span class='e-opened' ><svg aria-hidden="true" class="e-font-icon-svg e-fas-minus" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg></span> <span class='e-closed'><svg aria-hidden="true" class="e-font-icon-svg e-fas-plus" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg></span> </span> </summary> <div role="region" aria-labelledby="e-n-accordion-item-5324" class="elementor-element elementor-element-c4a1365 e-flex e-con-boxed e-con e-child" data-id="c4a1365" data-element_type="container" data-e-type="container"> <div class="e-con-inner"> <div class="elementor-element elementor-element-4584789 elementor-widget elementor-widget-text-editor" data-id="4584789" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p>Semantic HTML tags help describe the content more clearly, both for developers and search engines. These tags improve the accessibility of your webpage and provide better structure, which can lead to improved SEO (search engine optimization). For example, the <code><header></code> tag indicates the top section of a webpage, while the <code><footer></code> marks the bottom.</p> </div> </div> </div> </div> </details> <details id="e-n-accordion-item-5325" class="e-n-accordion-item" > <summary class="e-n-accordion-item-title" data-accordion-index="6" tabindex="-1" aria-expanded="false" aria-controls="e-n-accordion-item-5325" > <span class='e-n-accordion-item-title-header'><div class="e-n-accordion-item-title-text"> What is an HTML document? </div></span> <span class='e-n-accordion-item-title-icon'> <span class='e-opened' ><svg aria-hidden="true" class="e-font-icon-svg e-fas-minus" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg></span> <span class='e-closed'><svg aria-hidden="true" class="e-font-icon-svg e-fas-plus" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg></span> </span> </summary> <div role="region" aria-labelledby="e-n-accordion-item-5325" class="elementor-element elementor-element-b2c427a e-flex e-con-boxed e-con e-child" data-id="b2c427a" data-element_type="container" data-e-type="container"> <div class="e-con-inner"> <div class="elementor-element elementor-element-1de3af6 elementor-widget elementor-widget-text-editor" data-id="1de3af6" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p><span id="radix-:r1a:" class="cursor-pointer inline transition-colors duration-200 ease-in-out hover:opacity-80" aria-haspopup="menu" aria-expanded="false" data-state="closed">HTML document also goes by the name of web document, which is a text file only containing the HTML code used in the construction of web pages.</span> <span id="radix-:r1d:" class="cursor-pointer inline transition-colors duration-200 ease-in-out hover:opacity-80" aria-haspopup="menu" aria-expanded="false" data-state="closed">HTML starts with the <!DOCTYPE html> and other elements of the documents it organizes for display in web browsers containing <html>, <head>, or <body> among others.</span></p> </div> </div> </div> </div> </details> <details id="e-n-accordion-item-5326" class="e-n-accordion-item" > <summary class="e-n-accordion-item-title" data-accordion-index="7" tabindex="-1" aria-expanded="false" aria-controls="e-n-accordion-item-5326" > <span class='e-n-accordion-item-title-header'><div class="e-n-accordion-item-title-text"> Who developed HTML? </div></span> <span class='e-n-accordion-item-title-icon'> <span class='e-opened' ><svg aria-hidden="true" class="e-font-icon-svg e-fas-minus" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg></span> <span class='e-closed'><svg aria-hidden="true" class="e-font-icon-svg e-fas-plus" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg></span> </span> </summary> <div role="region" aria-labelledby="e-n-accordion-item-5326" class="elementor-element elementor-element-fc49885 e-flex e-con-boxed e-con e-child" data-id="fc49885" data-element_type="container" data-e-type="container"> <div class="e-con-inner"> <div class="elementor-element elementor-element-82b04af elementor-widget elementor-widget-text-editor" data-id="82b04af" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p><span id="radix-:r1g:" class="cursor-pointer inline transition-colors duration-200 ease-in-out hover:opacity-80" aria-haspopup="menu" aria-expanded="false" data-state="closed"><a href="https://www.w3.org/People/Raggett/book4/ch02.html" target="_blank" rel="nofollow noopener">HTML</a> was first created by <a href="https://en.wikipedia.org/wiki/Tim_Berners-Lee" target="_blank" rel="nofollow noopener">Tim Berners-Lee</a> in 1991.</span> <span id="radix-:r1j:" class="cursor-pointer inline transition-colors duration-200 ease-in-out hover:opacity-80" aria-haspopup="menu" aria-expanded="false" data-state="closed">It has, over the years been normalized by the World Wide Web Consortium (W3C) to promote uniformity when developing websites.</span></p> </div> </div> </div> </div> </details> <details id="e-n-accordion-item-5327" class="e-n-accordion-item" > <summary class="e-n-accordion-item-title" data-accordion-index="8" tabindex="-1" aria-expanded="false" aria-controls="e-n-accordion-item-5327" > <span class='e-n-accordion-item-title-header'><div class="e-n-accordion-item-title-text"> What is HTML and why is it important? </div></span> <span class='e-n-accordion-item-title-icon'> <span class='e-opened' ><svg aria-hidden="true" class="e-font-icon-svg e-fas-minus" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg></span> <span class='e-closed'><svg aria-hidden="true" class="e-font-icon-svg e-fas-plus" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg></span> </span> </summary> <div role="region" aria-labelledby="e-n-accordion-item-5327" class="elementor-element elementor-element-885fda2 e-flex e-con-boxed e-con e-child" data-id="885fda2" data-element_type="container" data-e-type="container"> <div class="e-con-inner"> <div class="elementor-element elementor-element-0dea090 elementor-widget elementor-widget-text-editor" data-id="0dea090" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p><span id="radix-:r1p:" class="cursor-pointer inline transition-colors duration-200 ease-in-out hover:opacity-80" aria-haspopup="menu" aria-expanded="false" data-state="closed">HTML or Hypertext Markup Language is a language used in the creation of web page.</span> <span id="radix-:r1s:" class="cursor-pointer inline transition-colors duration-200 ease-in-out hover:opacity-80" aria-haspopup="menu" aria-expanded="false" data-state="closed">Web page is the framework of the contents of the web, allowing the browsers to present the texts, images, hyperlinks, and media content.</span> <span id="radix-:r1v:" class="cursor-pointer inline transition-colors duration-200 ease-in-out hover:opacity-80" aria-haspopup="menu" aria-expanded="false" data-state="closed">It should be noted that with HTML in the world has never been the same without thus cannot be overemphasized.</span></p> </div> </div> </div> </div> </details> <details id="e-n-accordion-item-5328" class="e-n-accordion-item" > <summary class="e-n-accordion-item-title" data-accordion-index="9" tabindex="-1" aria-expanded="false" aria-controls="e-n-accordion-item-5328" > <span class='e-n-accordion-item-title-header'><div class="e-n-accordion-item-title-text"> What is the purpose of HTML? </div></span> <span class='e-n-accordion-item-title-icon'> <span class='e-opened' ><svg aria-hidden="true" class="e-font-icon-svg e-fas-minus" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg></span> <span class='e-closed'><svg aria-hidden="true" class="e-font-icon-svg e-fas-plus" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg></span> </span> </summary> <div role="region" aria-labelledby="e-n-accordion-item-5328" class="elementor-element elementor-element-ce8e999 e-flex e-con-boxed e-con e-child" data-id="ce8e999" data-element_type="container" data-e-type="container"> <div class="e-con-inner"> <div class="elementor-element elementor-element-81d97de elementor-widget elementor-widget-text-editor" data-id="81d97de" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p><span id="radix-:r22:" class="cursor-pointer inline transition-colors duration-200 ease-in-out hover:opacity-80" aria-haspopup="menu" aria-expanded="false" data-state="closed">HTML main role is to organize and display content on the web.</span> <span id="radix-:r25:" class="cursor-pointer inline transition-colors duration-200 ease-in-out hover:opacity-80" aria-haspopup="menu" aria-expanded="false" data-state="closed">It specifies the construction of items such as headings, paragraphs, hyperlinks, images, and lists, to establish well-organized and click-active Website pages.</span></p> </div> </div> </div> </div> </details> <details id="e-n-accordion-item-5329" class="e-n-accordion-item" > <summary class="e-n-accordion-item-title" data-accordion-index="10" tabindex="-1" aria-expanded="false" aria-controls="e-n-accordion-item-5329" > <span class='e-n-accordion-item-title-header'><div class="e-n-accordion-item-title-text"> Why does HTML start with ? </div></span> <span class='e-n-accordion-item-title-icon'> <span class='e-opened' ><svg aria-hidden="true" class="e-font-icon-svg e-fas-minus" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg></span> <span class='e-closed'><svg aria-hidden="true" class="e-font-icon-svg e-fas-plus" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg></span> </span> </summary> <div role="region" aria-labelledby="e-n-accordion-item-5329" class="elementor-element elementor-element-2a8eed3 e-flex e-con-boxed e-con e-child" data-id="2a8eed3" data-element_type="container" data-e-type="container"> <div class="e-con-inner"> <div class="elementor-element elementor-element-966f30d elementor-widget elementor-widget-text-editor" data-id="966f30d" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p><span id="radix-:r2b:" class="cursor-pointer inline transition-colors duration-200 ease-in-out hover:opacity-80" aria-haspopup="menu" aria-expanded="false" data-state="closed">The <!DOCTYPE html> declaration simply informs the web browser that the document is written in the version 5 of the HTML mark up language.</span> <span id="radix-:r2e:" class="cursor-pointer inline transition-colors duration-200 ease-in-out hover:opacity-80" aria-haspopup="menu" aria-expanded="false" data-state="closed">This makes sure that the web page is rendered well in accordance to today’s web standards.</span></p> </div> </div> </div> </div> </details> </div> <script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"What is the purpose of the <!DOCTYPE html> declaration?","acceptedAnswer":{"@type":"Answer","text":"The <!DOCTYPE html> declaration is used to tell the web browser which version of HTML the page is written in. In modern web development, it specifies that the page is using HTML5. It helps the browser render the page correctly according to the HTML standards."}},{"@type":"Question","name":"What are the basic elements of an HTML document?","acceptedAnswer":{"@type":"Answer","text":"The basic elements of an HTML document include:<!DOCTYPE html>: Declares the document type.<html>: The root element that wraps all HTML content.<head>: Contains metadata about the document, such as the title, character encoding, and links to stylesheets.<body>: Contains the content of the webpage that is visible to users."}},{"@type":"Question","name":"What is the difference between the and sections in HTML?","acceptedAnswer":{"@type":"Answer","text":"The <head> section contains meta-information about the document (such as the title, meta tags, and links to CSS), which isn’t directly visible to users. The <body> section contains the content of the webpage (text, images, links, etc.) that users can see and interact with."}},{"@type":"Question","name":"What is the purpose of the tag in the HTML section?","acceptedAnswer":{"@type":"Answer","text":"The <meta> tag provides metadata about the HTML document. For example, the <meta charset=\"UTF-8\"> tag defines the character encoding for the document, ensuring that all characters display correctly. Another common use of the <meta> tag is setting the viewport to ensure the webpage is responsive on different devices."}},{"@type":"Question","name":"Why should you use semantic HTML tags like <header>, <footer>, and <article>?","acceptedAnswer":{"@type":"Answer","text":"Semantic HTML tags help describe the content more clearly, both for developers and search engines. These tags improve the accessibility of your webpage and provide better structure, which can lead to improved SEO (search engine optimization). For example, the <header> tag indicates the top section of a webpage, while the <footer> marks the bottom."}},{"@type":"Question","name":"What is an HTML document?","acceptedAnswer":{"@type":"Answer","text":"HTML document also goes by the name of web document, which is a text file only containing the HTML code used in the construction of web pages. HTML starts with the <!DOCTYPE html> and other elements of the documents it organizes for display in web browsers containing <html>, <head>, or <body> among others."}},{"@type":"Question","name":"Who developed HTML?","acceptedAnswer":{"@type":"Answer","text":"HTML was first created by Tim Berners-Lee in 1991. It has, over the years been normalized by the World Wide Web Consortium (W3C) to promote uniformity when developing websites."}},{"@type":"Question","name":"What is HTML and why is it important?","acceptedAnswer":{"@type":"Answer","text":"HTML or Hypertext Markup Language is a language used in the creation of web page. Web page is the framework of the contents of the web, allowing the browsers to present the texts, images, hyperlinks, and media content. It should be noted that with HTML in the world has never been the same without thus cannot be overemphasized."}},{"@type":"Question","name":"What is the purpose of HTML?","acceptedAnswer":{"@type":"Answer","text":"HTML main role is to organize and display content on the web. It specifies the construction of items such as headings, paragraphs, hyperlinks, images, and lists, to establish well-organized and click-active Website pages."}},{"@type":"Question","name":"Why does HTML start with ?","acceptedAnswer":{"@type":"Answer","text":"The <!DOCTYPE html> declaration simply informs the web browser that the document is written in the version 5 of the HTML mark up language. This makes sure that the web page is rendered well in accordance to today\u2019s web standards."}}]}</script> </div> </div> </div> </div> </div> </div> <div class="ekit-template-content-markup ekit-template-content-footer ekit-template-content-theme-support"> <div data-elementor-type="wp-post" data-elementor-id="34" class="elementor elementor-34"> <div class="elementor-element elementor-element-baf35c9 e-flex e-con-boxed e-con e-parent" data-id="baf35c9" data-element_type="container" data-e-type="container" data-settings="{"background_background":"gradient","shape_divider_top":"waves"}"> <div class="e-con-inner"> <div class="elementor-shape elementor-shape-top" aria-hidden="true" data-negative="false"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none"> <path class="elementor-shape-fill" d="M421.9,6.5c22.6-2.5,51.5,0.4,75.5,5.3c23.6,4.9,70.9,23.5,100.5,35.7c75.8,32.2,133.7,44.5,192.6,49.7 c23.6,2.1,48.7,3.5,103.4-2.5c54.7-6,106.2-25.6,106.2-25.6V0H0v30.3c0,0,72,32.6,158.4,30.5c39.2-0.7,92.8-6.7,134-22.4 c21.2-8.1,52.2-18.2,79.7-24.2C399.3,7.9,411.6,7.5,421.9,6.5z"/> </svg> </div> <div class="elementor-element elementor-element-fd04a90 e-con-full e-flex e-con e-child" data-id="fd04a90" data-element_type="container" data-e-type="container"> <div class="elementor-element elementor-element-fcdc25c e-con-full e-flex e-con e-child" data-id="fcdc25c" data-element_type="container" data-e-type="container"> <div class="elementor-element elementor-element-1b75824 elementor-widget elementor-widget-text-editor" data-id="1b75824" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p> We’re passionate about making programming accessible and exciting for everyone. Whether you’re just starting or looking to level up your skills, we offer simple, practical tutorials.</p> </div> </div> </div> <div class="elementor-element elementor-element-d780148 e-con-full e-flex e-con e-child" data-id="d780148" data-element_type="container" data-e-type="container"> <div class="elementor-element elementor-element-4ce168a elementor-widget elementor-widget-heading" data-id="4ce168a" data-element_type="widget" data-e-type="widget" data-widget_type="heading.default"> <div class="elementor-widget-container"> <h2 class="elementor-heading-title elementor-size-default">Important Links</h2> </div> </div> <div class="elementor-element elementor-element-1bb3599 e-con-full e-flex e-con e-child" data-id="1bb3599" data-element_type="container" data-e-type="container"> <div class="elementor-element elementor-element-96f8f27 elementor-mobile-align-center elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list" data-id="96f8f27" data-element_type="widget" data-e-type="widget" data-widget_type="icon-list.default"> <div class="elementor-widget-container"> <ul class="elementor-icon-list-items"> <li class="elementor-icon-list-item"> <a href="http://codejn.com/"> <span class="elementor-icon-list-icon"> <svg aria-hidden="true" class="e-font-icon-svg e-fas-angle-right" viewBox="0 0 256 512" xmlns="http://www.w3.org/2000/svg"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg> </span> <span class="elementor-icon-list-text">Home</span> </a> </li> <li class="elementor-icon-list-item"> <a href="http://codejn.com/about-us/"> <span class="elementor-icon-list-icon"> <svg aria-hidden="true" class="e-font-icon-svg e-fas-angle-right" viewBox="0 0 256 512" xmlns="http://www.w3.org/2000/svg"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg> </span> <span class="elementor-icon-list-text">About Us</span> </a> </li> <li class="elementor-icon-list-item"> <a href="http://codejn.com/blog/"> <span class="elementor-icon-list-icon"> <svg aria-hidden="true" class="e-font-icon-svg e-fas-angle-right" viewBox="0 0 256 512" xmlns="http://www.w3.org/2000/svg"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg> </span> <span class="elementor-icon-list-text">Blog</span> </a> </li> <li class="elementor-icon-list-item"> <a href="http://codejn.com/contact-us/"> <span class="elementor-icon-list-icon"> <svg aria-hidden="true" class="e-font-icon-svg e-fas-angle-right" viewBox="0 0 256 512" xmlns="http://www.w3.org/2000/svg"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg> </span> <span class="elementor-icon-list-text">Contact Us</span> </a> </li> <li class="elementor-icon-list-item"> <a href="http://codejn.com/privacy-policy/"> <span class="elementor-icon-list-icon"> <svg aria-hidden="true" class="e-font-icon-svg e-fas-angle-right" viewBox="0 0 256 512" xmlns="http://www.w3.org/2000/svg"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg> </span> <span class="elementor-icon-list-text">Privacy Policy</span> </a> </li> <li class="elementor-icon-list-item"> <a href="http://codejn.com/terms-condition/"> <span class="elementor-icon-list-icon"> <svg aria-hidden="true" class="e-font-icon-svg e-fas-angle-right" viewBox="0 0 256 512" xmlns="http://www.w3.org/2000/svg"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg> </span> <span class="elementor-icon-list-text">Terms & Condition</span> </a> </li> </ul> </div> </div> </div> </div> <div class="elementor-element elementor-element-f35b574 e-con-full e-flex e-con e-child" data-id="f35b574" data-element_type="container" data-e-type="container"> <div class="elementor-element elementor-element-a6a2dde elementor-widget elementor-widget-heading" data-id="a6a2dde" data-element_type="widget" data-e-type="widget" data-widget_type="heading.default"> <div class="elementor-widget-container"> <h2 class="elementor-heading-title elementor-size-default">Tools</h2> </div> </div> <div class="elementor-element elementor-element-aba3439 elementor-mobile-align-center elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list" data-id="aba3439" data-element_type="widget" data-e-type="widget" data-widget_type="icon-list.default"> <div class="elementor-widget-container"> <ul class="elementor-icon-list-items"> <li class="elementor-icon-list-item"> <a href="http://codejn.com/tools/box-shadow-generator/"> <span class="elementor-icon-list-icon"> <svg aria-hidden="true" class="e-font-icon-svg e-fas-angle-right" viewBox="0 0 256 512" xmlns="http://www.w3.org/2000/svg"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg> </span> <span class="elementor-icon-list-text">Box Shadow Generator</span> </a> </li> <li class="elementor-icon-list-item"> <a href="http://codejn.com/tools/text-style-generator/"> <span class="elementor-icon-list-icon"> <svg aria-hidden="true" class="e-font-icon-svg e-fas-angle-right" viewBox="0 0 256 512" xmlns="http://www.w3.org/2000/svg"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg> </span> <span class="elementor-icon-list-text">Text Shadow Generator</span> </a> </li> <li class="elementor-icon-list-item"> <a href="http://codejn.com/tools/position-visualizer/"> <span class="elementor-icon-list-icon"> <svg aria-hidden="true" class="e-font-icon-svg e-fas-angle-right" viewBox="0 0 256 512" xmlns="http://www.w3.org/2000/svg"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg> </span> <span class="elementor-icon-list-text">Position Visualizer</span> </a> </li> <li class="elementor-icon-list-item"> <a href="https://codejn.com/web-development-tools/html-css-js-compiler/"> <span class="elementor-icon-list-icon"> <svg aria-hidden="true" class="e-font-icon-svg e-fas-angle-right" viewBox="0 0 256 512" xmlns="http://www.w3.org/2000/svg"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg> </span> <span class="elementor-icon-list-text">HTML CSS JS Compiler</span> </a> </li> </ul> </div> </div> </div> <div class="elementor-element elementor-element-93611b7 e-con-full blog_list e-flex e-con e-child" data-id="93611b7" data-element_type="container" data-e-type="container"> <div class="elementor-element elementor-element-baf6d56 elementor-widget elementor-widget-heading" data-id="baf6d56" data-element_type="widget" data-e-type="widget" data-widget_type="heading.default"> <div class="elementor-widget-container"> <h2 class="elementor-heading-title elementor-size-default">Top Blogs</h2> </div> </div> <div class="elementor-element elementor-element-6025d96 elementor-widget elementor-widget-elementskit-post-list" data-id="6025d96" data-element_type="widget" data-e-type="widget" data-widget_type="elementskit-post-list.default"> <div class="elementor-widget-container"> <div class="ekit-wid-con" > <ul class="elementor-icon-list-items ekit-post-list-wrapper "> <li class="elementor-icon-list-item "> <a href="https://codejn.com/how-to-fix-wordpress-not-sending-emails-in-2025/" > <span class="elementor-icon-list-icon"> <svg aria-hidden="true" class="e-font-icon-svg e-fas-angle-right" viewBox="0 0 256 512" xmlns="http://www.w3.org/2000/svg"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg> </span> <div class="ekit_post_list_content_wraper"> <span class="elementor-icon-list-text">How to troubleshoot WordPress not sending emails in 2025</span> </div> </a> </li> <li class="elementor-icon-list-item "> <a href="https://codejn.com/how-to-install-wordpress-plugins-without-ftp-credentials/" > <span class="elementor-icon-list-icon"> <svg aria-hidden="true" class="e-font-icon-svg e-fas-angle-right" viewBox="0 0 256 512" xmlns="http://www.w3.org/2000/svg"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg> </span> <div class="ekit_post_list_content_wraper"> <span class="elementor-icon-list-text">How to Install WordPress Plugins Without FTP Credentials</span> </div> </a> </li> <li class="elementor-icon-list-item "> <a href="https://codejn.com/7-must-have-wordpress-plugins-to-boost-your-site/" > <span class="elementor-icon-list-icon"> <svg aria-hidden="true" class="e-font-icon-svg e-fas-angle-right" viewBox="0 0 256 512" xmlns="http://www.w3.org/2000/svg"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg> </span> <div class="ekit_post_list_content_wraper"> <span class="elementor-icon-list-text">7 Must-Have Plugins That Will Completely Transform Your WordPress Site</span> </div> </a> </li> <li class="elementor-icon-list-item "> <a href="https://codejn.com/what-is-microsoft-copilot/" > <span class="elementor-icon-list-icon"> <svg aria-hidden="true" class="e-font-icon-svg e-fas-angle-right" viewBox="0 0 256 512" xmlns="http://www.w3.org/2000/svg"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg> </span> <div class="ekit_post_list_content_wraper"> <span class="elementor-icon-list-text">What Is Microsoft Copilot?</span> </div> </a> </li> </ul> </div> </div> </div> </div> </div> <div class="elementor-element elementor-element-182a02c elementor-widget elementor-widget-html" data-id="182a02c" data-element_type="widget" data-e-type="widget" data-widget_type="html.default"> <div class="elementor-widget-container"> <style> .blog_list img{ display: none; } </style> </div> </div> <div class="elementor-element elementor-element-6f23d73 e-con-full e-flex e-con e-child" data-id="6f23d73" data-element_type="container" data-e-type="container"> <div class="elementor-element elementor-element-70cdb8e e-con-full e-flex e-con e-child" data-id="70cdb8e" data-element_type="container" data-e-type="container"> <div class="elementor-element elementor-element-4fd5f5e elementor-widget elementor-widget-text-editor" data-id="4fd5f5e" data-element_type="widget" data-e-type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p>Copyright © 2025 <strong>Code Junction</strong>.</p> </div> </div> </div> <div class="elementor-element elementor-element-7ba4e65 e-con-full e-flex e-con e-child" data-id="7ba4e65" data-element_type="container" data-e-type="container"> <div class="elementor-element elementor-element-127aaf0 e-grid-align-left elementor-shape-rounded elementor-grid-0 elementor-widget elementor-widget-social-icons" data-id="127aaf0" data-element_type="widget" data-e-type="widget" data-widget_type="social-icons.default"> <div class="elementor-widget-container"> <div class="elementor-social-icons-wrapper elementor-grid" role="list"> <span class="elementor-grid-item" role="listitem"> <a class="elementor-icon elementor-social-icon elementor-social-icon-facebook elementor-repeater-item-8992fcf" href="https://www.facebook.com/codehunts" target="_blank"> <span class="elementor-screen-only">Facebook</span> <svg aria-hidden="true" class="e-font-icon-svg e-fab-facebook" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"></path></svg> </a> </span> <span class="elementor-grid-item" role="listitem"> <a class="elementor-icon elementor-social-icon elementor-social-icon-youtube elementor-repeater-item-204ffa7" href="https://www.youtube.com/@CodeJunctionOfficial" target="_blank"> <span class="elementor-screen-only">Youtube</span> <svg aria-hidden="true" class="e-font-icon-svg e-fab-youtube" viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path></svg> </a> </span> <span class="elementor-grid-item" role="listitem"> <a class="elementor-icon elementor-social-icon elementor-social-icon-instagram elementor-repeater-item-a69a3b9" href="https://www.instagram.com/official.codejn/" target="_blank"> <span class="elementor-screen-only">Instagram</span> <svg aria-hidden="true" class="e-font-icon-svg e-fab-instagram" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg> </a> </span> </div> </div> </div> </div> </div> </div> </div> </div> </div> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/bosa-yoga/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <!-- HFCM by 99 Robots - Snippet # 1: Update banner images --> <script> document.addEventListener("DOMContentLoaded", function() { console.log("Test"); // Get all elements with the 'banner-img' class var bannerElements = document.querySelectorAll('.banner-img'); // Create an object to store the original background images for each slide var backgroundImages = {}; // Store the original background images for each banner bannerElements.forEach(function(bannerElement, index) { backgroundImages[index] = bannerElement.style.backgroundImage; }); // Function to reapply the background image to each slide function reapplyBackgroundImage() { bannerElements.forEach(function(bannerElement, index) { if (bannerElement.style.backgroundImage === 'none' || bannerElement.style.backgroundImage === '') { bannerElement.style.backgroundImage = backgroundImages[index]; } }); } // Call this function to reapply the background images if they're removed setInterval(reapplyBackgroundImage, 100); // Check every 100ms if background image is removed and restore it }); </script> <!-- /end HFCM by 99 Robots --> <script id='kirki-viewport-lists'>var kirkiViewports = {"md":{"value":1200,"scale":1,"minWidth":1200,"maxWidth":1200,"title":"Desktop","icon":"desktop","activeIcon":"desktop-hover","id":"md","type":"max"},"tablet":{"value":991,"scale":1,"minWidth":991,"maxWidth":991,"title":"Tablet","icon":"tablet-default","activeIcon":"tablet-hover","type":"max","id":"tablet"},"mobileLandscape":{"value":767,"scale":1,"minWidth":767,"maxWidth":767,"title":"Landscape","icon":"phone-hr-default","activeIcon":"phone-hr-hover","type":"max","id":"mobileLandscape"},"mobile":{"value":575,"scale":1,"minWidth":575,"maxWidth":575,"title":"Mobile","icon":"phone-vr-default","activeIcon":"phone-vr-hover","type":"max","id":"mobile"}};</script><script id='kirki-variable-lists'>var kirkiCSSVariable = {"data":[{"title":"Colors","key":"color","modes":[{"title":"Default","key":"default"}],"variables":[]},{"title":"Numbers","key":"size","modes":[{"title":"Default","key":"default"}],"variables":[]},{"title":"Font Family","key":"font-family","modes":[{"title":"Default","key":"default"}],"variables":[]},{"title":"Text Styles","key":"text-style","modes":[{"title":"Default","key":"default"}],"variables":[]}]};</script><script id="kirki-api-and-nonce"> window.wp_kirki = { ajaxUrl: "https://codejn.com/wp-admin/admin-ajax.php", restUrl: "https://codejn.com/wp-json/", siteUrl: "https://codejn.com", apiVersion: "v1", postId: "1984", nonce: "1990b1421c", call_from: "", templateId: "", context: {"id":1984,"type":"post"} }; </script><link rel='stylesheet' id='widget-social-icons-css' href='https://codejn.com/wp-content/plugins/elementor/assets/css/widget-social-icons.min.css?ver=4.0.5' type='text/css' media='all' /> <link rel='stylesheet' id='e-apple-webkit-css' href='https://codejn.com/wp-content/uploads/elementor/css/custom-apple-webkit.min.css?ver=1777713816' type='text/css' media='all' /> <link rel='stylesheet' id='e-shapes-css' href='https://codejn.com/wp-content/plugins/elementor/assets/css/conditionals/shapes.min.css?ver=4.0.5' type='text/css' media='all' /> <script type="text/javascript" src="https://codejn.com/wp-content/plugins/elementskit-lite/widgets/init/assets/js/widget-scripts.js?ver=3.9.3" id="ekit-widget-scripts-js"></script> <script type="text/javascript" src="https://codejn.com/wp-includes/js/dist/hooks.min.js?ver=dd5603f07f9220ed27f1" id="wp-hooks-js"></script> <script type="text/javascript" src="https://codejn.com/wp-includes/js/dist/i18n.min.js?ver=c26c3dc7bed366793375" id="wp-i18n-js"></script> <script type="text/javascript" id="wp-i18n-js-after"> /* <![CDATA[ */ wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } ); //# sourceURL=wp-i18n-js-after /* ]]> */ </script> <script type="text/javascript" src="https://codejn.com/wp-content/plugins/contact-form-7/includes/swv/js/index.js?ver=6.1.5" id="swv-js"></script> <script type="text/javascript" id="contact-form-7-js-before"> /* <![CDATA[ */ var wpcf7 = { "api": { "root": "https:\/\/codejn.com\/wp-json\/", "namespace": "contact-form-7\/v1" }, "cached": 1 }; //# sourceURL=contact-form-7-js-before /* ]]> */ </script> <script type="text/javascript" src="https://codejn.com/wp-content/plugins/contact-form-7/includes/js/index.js?ver=6.1.5" id="contact-form-7-js"></script> <script type="text/javascript" id="boomdevs-tocone-page-nav-js-extra"> /* <![CDATA[ */ var page_nav = {"offset_from_top":"0"}; //# sourceURL=boomdevs-tocone-page-nav-js-extra /* ]]> */ </script> <script type="text/javascript" src="https://codejn.com/wp-content/plugins/top-table-of-contents/public/js/jquery.nav.js?ver=1.4.1" id="boomdevs-tocone-page-nav-js"></script> <script type="text/javascript" id="boomdevs-toc-js-extra"> /* <![CDATA[ */ var handle = {"initial_view":"1","isProActivated":""}; //# sourceURL=boomdevs-toc-js-extra /* ]]> */ </script> <script type="text/javascript" src="https://codejn.com/wp-content/plugins/top-table-of-contents/public/js/boomdevs-toc-public.js?ver=1.4.1" id="boomdevs-toc-js"></script> <script type="text/javascript" src="https://codejn.com/wp-content/plugins/elementor/assets/js/webpack.runtime.min.js?ver=4.0.5" id="elementor-webpack-runtime-js"></script> <script type="text/javascript" src="https://codejn.com/wp-content/plugins/elementor/assets/js/frontend-modules.min.js?ver=4.0.5" id="elementor-frontend-modules-js"></script> <script type="text/javascript" src="https://codejn.com/wp-includes/js/jquery/ui/core.min.js?ver=1.13.3" id="jquery-ui-core-js"></script> <script type="text/javascript" id="elementor-frontend-js-before"> /* <![CDATA[ */ var elementorFrontendConfig = {"environmentMode":{"edit":false,"wpPreview":false,"isScriptDebug":false},"i18n":{"shareOnFacebook":"Share on Facebook","shareOnTwitter":"Share on Twitter","pinIt":"Pin it","download":"Download","downloadImage":"Download image","fullscreen":"Fullscreen","zoom":"Zoom","share":"Share","playVideo":"Play Video","previous":"Previous","next":"Next","close":"Close","a11yCarouselPrevSlideMessage":"Previous slide","a11yCarouselNextSlideMessage":"Next slide","a11yCarouselFirstSlideMessage":"This is the first slide","a11yCarouselLastSlideMessage":"This is the last slide","a11yCarouselPaginationBulletMessage":"Go to slide"},"is_rtl":false,"breakpoints":{"xs":0,"sm":480,"md":768,"lg":1025,"xl":1440,"xxl":1600},"responsive":{"breakpoints":{"mobile":{"label":"Mobile Portrait","value":767,"default_value":767,"direction":"max","is_enabled":true},"mobile_extra":{"label":"Mobile Landscape","value":880,"default_value":880,"direction":"max","is_enabled":false},"tablet":{"label":"Tablet Portrait","value":1024,"default_value":1024,"direction":"max","is_enabled":true},"tablet_extra":{"label":"Tablet Landscape","value":1200,"default_value":1200,"direction":"max","is_enabled":false},"laptop":{"label":"Laptop","value":1366,"default_value":1366,"direction":"max","is_enabled":false},"widescreen":{"label":"Widescreen","value":2400,"default_value":2400,"direction":"min","is_enabled":true}},"hasCustomBreakpoints":true},"version":"4.0.5","is_static":false,"experimentalFeatures":{"e_font_icon_svg":true,"additional_custom_breakpoints":true,"container":true,"nested-elements":true,"global_classes_should_enforce_capabilities":true,"e_variables":true,"e_opt_in_v4_page":true,"e_components":true,"e_interactions":true,"e_widget_creation":true,"import-export-customization":true},"urls":{"assets":"https:\/\/codejn.com\/wp-content\/plugins\/elementor\/assets\/","ajaxurl":"https:\/\/codejn.com\/wp-admin\/admin-ajax.php","uploadUrl":"https:\/\/codejn.com\/wp-content\/uploads"},"nonces":{"floatingButtonsClickTracking":"e51cc43625","atomicFormsSendForm":"f51cfa511c"},"swiperClass":"swiper","settings":{"page":[],"editorPreferences":[]},"kit":{"active_breakpoints":["viewport_mobile","viewport_tablet","viewport_widescreen"],"global_image_lightbox":"yes","lightbox_enable_counter":"yes","lightbox_enable_fullscreen":"yes","lightbox_enable_zoom":"yes","lightbox_enable_share":"yes","lightbox_title_src":"title","lightbox_description_src":"description"},"post":{"id":1984,"title":"Basic%20HTML%20Structure%20Guide%20for%20Beginners","excerpt":"","featuredImage":"https:\/\/codejn.com\/wp-content\/uploads\/2025\/01\/html-structure-1024x576.png"}}; //# sourceURL=elementor-frontend-js-before /* ]]> */ </script> <script type="text/javascript" src="https://codejn.com/wp-content/plugins/elementor/assets/js/frontend.min.js?ver=4.0.5" id="elementor-frontend-js"></script> <script type="text/javascript" src="https://codejn.com/wp-content/plugins/code-block-for-elementor/widgets/../assets/prism.js?ver=1.0.3" id="code-block-for-elementor-prismjs-js"></script> <script type="text/javascript" src="https://codejn.com/wp-content/plugins/code-block-for-elementor/widgets/../assets/prism-toolbar.js?ver=1.0.3" id="code-block-for-elementor-toolbarjs-js"></script> <script type="text/javascript" src="https://codejn.com/wp-content/plugins/kirki/assets/js/kirki.min.js?ver=6.0.3" id="kirki-js"></script> <script type="text/javascript" src="https://codejn.com/wp-includes/js/imagesloaded.min.js?ver=5.0.0" id="imagesloaded-js"></script> <script type="text/javascript" src="https://codejn.com/wp-includes/js/masonry.min.js?ver=4.2.2" id="masonry-js"></script> <script type="text/javascript" src="https://codejn.com/wp-includes/js/jquery/jquery.masonry.min.js?ver=3.1.2b" id="jquery-masonry-js"></script> <script type="text/javascript" src="https://codejn.com/wp-content/themes/bosa-yoga/assets/bootstrap/js/bootstrap.min.js?ver=0.8" id="bootstrap-js"></script> <script type="text/javascript" src="https://codejn.com/wp-content/themes/bosa-yoga/assets/slick/slick.min.js?ver=0.8" id="slick-js"></script> <script type="text/javascript" src="https://codejn.com/wp-content/themes/bosa-yoga/assets/js/jquery.slicknav.min.js?ver=0.8" id="slicknav-js"></script> <script type="text/javascript" src="https://codejn.com/wp-content/themes/bosa-yoga/assets/js/skip-link-focus-fix.js?ver=0.8" id="bosa-yoga-skip-link-focus-fix-js"></script> <script type="text/javascript" src="https://codejn.com/wp-content/themes/bosa-yoga/assets/js/navigation.js?ver=0.8" id="bosa-yoga-navigation-js"></script> <script type="text/javascript" src="https://codejn.com/wp-content/themes/bosa-yoga/assets/js/theia-sticky-sidebar.min.js?ver=0.8" id="theia-sticky-sidebar-js"></script> <script type="text/javascript" src="https://codejn.com/wp-content/themes/bosa-yoga/assets/js/html5shiv.min.js?ver=0.8" id="html5shiv-js"></script> <script type="text/javascript" id="bosa-yoga-custom-js-extra"> /* <![CDATA[ */ var BOSAYOGA = {"is_rtl":"","is_admin_bar_showing":"","responsive_header_menu_text":"MENU","header_image_slider":{"fade":true,"autoplay":0,"autoplaySpeed":4000,"fadeControl":500},"main_slider":{"fade":true,"autoplay":0,"autoplaySpeed":4000,"fadeControl":500},"home_highlight_posts":{"autoplay":0,"autoplaySpeed":4000,"slidesToShow":3},"fixed_nav":"","mobile_fixed_nav_off":"1","disable_scroll_top":"","sticky_sidebar":"1","header_two_logo":"","is_header_two":"","is_frame_layout":"","fixed_header_logo":"1","separate_logo":"","is_front_page":"","overlay_post":"","overlay_page":"","the_custom_logo":""}; //# sourceURL=bosa-yoga-custom-js-extra /* ]]> */ </script> <script type="text/javascript" src="https://codejn.com/wp-content/themes/bosa-yoga/assets/js/custom.min.js?ver=0.8" id="bosa-yoga-custom-js"></script> <script type="text/javascript" src="https://codejn.com/wp-includes/js/comment-reply.min.js?ver=6.9.4" id="comment-reply-js" async="async" data-wp-strategy="async" fetchpriority="low"></script> <script type="text/javascript" src="https://codejn.com/wp-content/plugins/google-site-kit/dist/assets/js/googlesitekit-consent-mode-bc2e26cfa69fcd4a8261.js" id="googlesitekit-consent-mode-js"></script> <script type="text/javascript" src="https://www.google.com/recaptcha/api.js?render=6Ldc6ZoqAAAAAFV_mlOH8Zk-_lNwmpP60rL81F52&ver=3.0" id="google-recaptcha-js"></script> <script type="text/javascript" src="https://codejn.com/wp-includes/js/dist/vendor/wp-polyfill.min.js?ver=3.15.0" id="wp-polyfill-js"></script> <script type="text/javascript" id="wpcf7-recaptcha-js-before"> /* <![CDATA[ */ var wpcf7_recaptcha = { "sitekey": "6Ldc6ZoqAAAAAFV_mlOH8Zk-_lNwmpP60rL81F52", "actions": { "homepage": "homepage", "contactform": "contactform" } }; //# sourceURL=wpcf7-recaptcha-js-before /* ]]> */ </script> <script type="text/javascript" src="https://codejn.com/wp-content/plugins/contact-form-7/modules/recaptcha/index.js?ver=6.1.5" id="wpcf7-recaptcha-js"></script> <script type="text/javascript" src="https://codejn.com/wp-content/plugins/google-site-kit/dist/assets/js/googlesitekit-events-provider-contact-form-7-83c32a029ed2cf5b6a82.js" id="googlesitekit-events-provider-contact-form-7-js" defer></script> <script type="text/javascript" id="wp-consent-api-js-extra"> /* <![CDATA[ */ var consent_api = {"consent_type":"","waitfor_consent_hook":"","cookie_expiration":"30","cookie_prefix":"wp_consent","services":[]}; //# sourceURL=wp-consent-api-js-extra /* ]]> */ </script> <script type="text/javascript" src="https://codejn.com/wp-content/plugins/wp-consent-api/assets/js/wp-consent-api.min.js?ver=2.0.1" id="wp-consent-api-js"></script> <script type="text/javascript" src="https://codejn.com/wp-content/plugins/elementskit-lite/widgets/init/assets/js/jquery.magnific-popup.min.js?ver=3.9.3" id="magnific-popup-js"></script> <script type="text/javascript" id="elementskit-elementor-js-extra"> /* <![CDATA[ */ var ekit_config = {"ajaxurl":"https://codejn.com/wp-admin/admin-ajax.php","nonce":"717628290d"}; //# sourceURL=elementskit-elementor-js-extra /* ]]> */ </script> <script type="text/javascript" src="https://codejn.com/wp-content/plugins/elementskit-lite/widgets/init/assets/js/elementor.js?ver=3.9.3" id="elementskit-elementor-js"></script> <script id="wp-emoji-settings" type="application/json"> {"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://codejn.com/wp-includes/js/wp-emoji-release.min.js?ver=6.9.4"}} </script> <script type="module"> /* <![CDATA[ */ /*! This file is auto-generated */ const a=JSON.parse(document.getElementById("wp-emoji-settings").textContent),o=(window._wpemojiSettings=a,"wpEmojiSettingsSupports"),s=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const a=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===a[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,a){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!a(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,a){let r;const o=(r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),s=(o.textBaseline="top",o.font="600 32px Arial",{});return e.forEach(e=>{s[e]=t(o,e,n,a)}),s}function r(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}a.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),c.toString(),p.toString()].join(",")+"));",a=new Blob([e],{type:"text/javascript"});const r=new Worker(URL.createObjectURL(a),{name:"wpTestEmojiSupports"});return void(r.onmessage=e=>{i(n=e.data),r.terminate(),t(n)})}catch(e){}i(n=f(s,u,c,p))}t(n)}).then(e=>{for(const n in e)a.supports[n]=e[n],a.supports.everything=a.supports.everything&&a.supports[n],"flag"!==n&&(a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&a.supports[n]);var t;a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&!a.supports.flag,a.supports.everything||((t=a.source||{}).concatemoji?r(t.concatemoji):t.wpemoji&&t.twemoji&&(r(t.twemoji),r(t.wpemoji)))}); //# sourceURL=https://codejn.com/wp-includes/js/wp-emoji-loader.min.js /* ]]> */ </script> </body> </html>