Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

html5
seo
communitycreator

HTML tags for search engine optimization (SEO)

Ugorji Miracle

HTML tags for search engine optimization help to increase the chances of a webpage appearing in search results. These tags help the search engine to find and read the contents of the page and make them available during a search. They also display parts of the webpage that are relevant to the search engine during a search.

HTML tags for search engine optimization

Now we will discuss the semantic HTML tags that help search engine optimization.

1. The <title> tag

  • The <title> tag is one of the most important tags on a webpage. It is located at the <head> tag. This is the tag that describes the content of a webpage. The <title> tag helps search keywords to the search engine when a search is made. It is the text that shows up on the tabs of the browser. Check the image illustration below:

  • The <title> tag is also used to generate the Search Engine Results Page(SERP). When a search matches the top keywords in the title, that page is likely to appear on the search results. Check the image below:

  • The <title> tag is placed at the <head> tag when coding a webpage. Check the code snippet below:

<h1> to <h6> <p> <section> <article> <nav> <footer> <form> <table> </div></div></div></div></div></div></div></div></div><div class="mt-5 relative"><div><div><div tabindex="0" style="outline:none"><div><div class=""><div class=""><div class="markdown-container-div Markdown__MarkdownContainerDiv-sc-12fsdjp-2 gruiOJ" height="auto"><div class="markdownViewer Widget_markdown-default__1HZqM Widget_markdown-table__2o-wV Widget_markdown-viewer__2usZh" role="none"><h3></h3> <h4>2. The <code><meta description></code> tags:</h4> <ul> <li>The <strong><code><meta description></code> tag</strong> is used to give the page more description. It describes in few words what the reader can expect to see on the page. If the right keywords are present in the <code><meta description></code> tag and they correspond with the title of the page, then there is a high chance of ranking in SERP. On the SERP, the <code><meta description></code> appears immediately after the title. Check the image below:</li> </ul> <p><img src="/api/edpresso/shot/5249004872400896/image/6700030179672064" alt="" /></p> <ul> <li>In your HTML code, this <code><meta tag></code> is also placed at the <code><head></code>. Check the HTML code below:</li> </ul> </div></div></div></div></div></div></div></div></div><div class="mt-5 relative"><div><div><div tabindex="0" style="outline:none"><div><div class=""><div class=""><div class=""><div class="Widget_widget___cFEk border border-solid border-gray-300 dark:border-dark-70 styles__CodePlaygroundStyled-sc-14v1s4e-0 dmOiDq"><div role="none"><div><div><div class="Widget_tabs__2kCDD dark:bg-white" data-tabs="true"><ul class="Widget_tab-list__2VPI8" role="tablist"><li class="Widget_tab__322s2 Widget_left__2Dcj5 react-tabs__tab--selected" role="tab" aria-selected="true" aria-disabled="false" tabindex="0">HTML</li></ul><div class="react-tabs__tab-panel react-tabs__tab-panel--selected" role="tabpanel" id="react-tabs-197" aria-labelledby="react-tabs-196"><div class="styles__ViewTabs_CodeContainer-sc-14v1s4e-7 iTUwKo"><div><pre class="dark:border-dark-60" style="background:#1e1e1e;color:#e9e9e9"></pre></div></div></div></div><div style="display:none"><div></div></div></div></div><div class="flex items-center justify-center px-4 flex-wrap sm:flex-no-wrap border border-solid border-gray-300 dark:border-dark-70 bg-gray-100 dark:bg-dark-90 " style="border-top:none;justify-content:space-between"><div class="styles__ControlPanel_ButtonsContainer-sc-14v1s4e-1 eWBySK"></div></div><div></div></div></div></div></div></div></div></div></div></div></div><div class="mt-5 relative"><div><div><div tabindex="0" style="outline:none"><div><div class=""><div class=""><div class="markdown-container-div Markdown__MarkdownContainerDiv-sc-12fsdjp-2 gruiOJ" height="auto"><div class="markdownViewer Widget_markdown-default__1HZqM Widget_markdown-table__2o-wV Widget_markdown-viewer__2usZh" role="none"><h3></h3> <h4>3. The <code><h1></code> to <code><h6></code> heading tags</h4> <ul> <li> <p>The <strong><code>heading</code> tags</strong> are used to structure the contents of the page. They place the contents in a hierarchy or order of importance. These headings, when properly used, help the search engine and human readers make meaning out of your page. Instead of using a bunch of divs try to use headings.</p> </li> <li> <p>In a webpage, your <code><h1></code> should be one. Then the subheadings are placed in <code><h2></code>. Each <code><h2></code> will now have <code><h3></code> and so on. When your headings are properly written, the search engine can present different parts of your page in search results. Thereby, generating traffic.</p> </li> <li> <p>The headings are written in the <code><body></code> tag. Check the code snippet below:</p> </li> </ul> </div></div></div></div></div></div></div></div></div><div class="mt-5 relative"><div><div><div tabindex="0" style="outline:none"><div><div class=""><div class=""><div class=""><div class="Widget_widget___cFEk border border-solid border-gray-300 dark:border-dark-70 styles__CodePlaygroundStyled-sc-14v1s4e-0 dmOiDq"><div role="none"><div><div><div class="Widget_tabs__2kCDD dark:bg-white" data-tabs="true"><ul class="Widget_tab-list__2VPI8" role="tablist"><li class="Widget_tab__322s2 Widget_left__2Dcj5 react-tabs__tab--selected" role="tab" aria-selected="true" aria-disabled="false" tabindex="0">HTML</li></ul><div class="react-tabs__tab-panel react-tabs__tab-panel--selected" role="tabpanel" id="react-tabs-199" aria-labelledby="react-tabs-198"><div class="styles__ViewTabs_CodeContainer-sc-14v1s4e-7 iTUwKo"><div><pre class="dark:border-dark-60" style="background:#1e1e1e;color:#e9e9e9"></pre></div></div></div></div><div style="display:none"><div></div></div></div></div><div class="flex items-center justify-center px-4 flex-wrap sm:flex-no-wrap border border-solid border-gray-300 dark:border-dark-70 bg-gray-100 dark:bg-dark-90 " style="border-top:none;justify-content:space-between"><div class="styles__ControlPanel_ButtonsContainer-sc-14v1s4e-1 eWBySK"></div></div><div></div></div></div></div></div></div></div></div></div></div></div><div class="mt-5 relative"><div><div><div tabindex="0" style="outline:none"><div><div class=""><div class=""><div class="markdown-container-div Markdown__MarkdownContainerDiv-sc-12fsdjp-2 gruiOJ" height="auto"><div class="markdownViewer Widget_markdown-default__1HZqM Widget_markdown-table__2o-wV Widget_markdown-viewer__2usZh" role="none"><h3></h3> <h4>4. The image <code>alt</code> attribute</h4> <ul> <li> <p>The <strong><code>alt</code>(alternative) attribute</strong> is used to describe the images in a webpage. The alt is important for screen readers and when the page is unable to load properly. The search engine equally uses it for indexing during search results.</p> </li> <li> <p>When a search is made, the images on the webpage are found under the images category. These attributes help the ranking of your webpage. The image <code>title</code> and <code>alt</code> attributes are placed within an <code><img></code> tag in the <code><body></code> tag. The <code>alt</code> is usually descriptive. Check the code snippet below:</p> </li> </ul> </div></div></div></div></div></div></div></div></div><div class="mt-5 relative"><div><div><div tabindex="0" style="outline:none"><div><div class=""><div class=""><div class=""><div class="Widget_widget___cFEk border border-solid border-gray-300 dark:border-dark-70 styles__CodePlaygroundStyled-sc-14v1s4e-0 dmOiDq"><div role="none"><div><div><div class="Widget_tabs__2kCDD dark:bg-white" data-tabs="true"><ul class="Widget_tab-list__2VPI8" role="tablist"><li class="Widget_tab__322s2 Widget_left__2Dcj5 react-tabs__tab--selected" role="tab" aria-selected="true" aria-disabled="false" tabindex="0">HTML</li></ul><div class="react-tabs__tab-panel react-tabs__tab-panel--selected" role="tabpanel" id="react-tabs-201" aria-labelledby="react-tabs-200"><div class="styles__ViewTabs_CodeContainer-sc-14v1s4e-7 iTUwKo"><div><pre class="dark:border-dark-60" style="background:#1e1e1e;color:#e9e9e9"></pre></div></div></div></div><div style="display:none"><div></div></div></div></div><div class="flex items-center justify-center px-4 flex-wrap sm:flex-no-wrap border border-solid border-gray-300 dark:border-dark-70 bg-gray-100 dark:bg-dark-90 " style="border-top:none;justify-content:space-between"><div class="styles__ControlPanel_ButtonsContainer-sc-14v1s4e-1 eWBySK"></div></div><div></div></div></div></div></div></div></div></div></div></div></div><div class="mt-5 relative"><div><div><div tabindex="0" style="outline:none"><div><div class=""><div class=""><div class="markdown-container-div Markdown__MarkdownContainerDiv-sc-12fsdjp-2 gruiOJ" height="auto"><div class="markdownViewer Widget_markdown-default__1HZqM Widget_markdown-table__2o-wV Widget_markdown-viewer__2usZh" role="none"><h3></h3> <h4>5. The <code>no-follow</code> link attribute</h4> <ul> <li>A <strong><code>no-follow</code> tag</strong> is an attribute that tells the search engine not to count points for the inbound links on the page. This is to help stop spammers from posting irrelevant links just to get SERP point. Simply add a <code>no-follow</code> attribute to the inbound links. Check the code below:</li> </ul> </div></div></div></div></div></div></div></div></div><div class="mt-5 relative"><div><div><div tabindex="0" style="outline:none"><div><div class=""><div class=""><div class=""><div class="Widget_widget___cFEk border border-solid border-gray-300 dark:border-dark-70 styles__CodePlaygroundStyled-sc-14v1s4e-0 dmOiDq"><div role="none"><div><div><div class="Widget_tabs__2kCDD dark:bg-white" data-tabs="true"><ul class="Widget_tab-list__2VPI8" role="tablist"><li class="Widget_tab__322s2 Widget_left__2Dcj5 react-tabs__tab--selected" role="tab" aria-selected="true" aria-disabled="false" tabindex="0">HTML</li></ul><div class="react-tabs__tab-panel react-tabs__tab-panel--selected" role="tabpanel" id="react-tabs-203" aria-labelledby="react-tabs-202"><div class="styles__ViewTabs_CodeContainer-sc-14v1s4e-7 iTUwKo"><div><pre class="dark:border-dark-60" style="background:#1e1e1e;color:#e9e9e9"></pre></div></div></div></div><div style="display:none"><div></div></div></div></div><div class="flex items-center justify-center px-4 flex-wrap sm:flex-no-wrap border border-solid border-gray-300 dark:border-dark-70 bg-gray-100 dark:bg-dark-90 " style="border-top:none;justify-content:space-between"><div class="styles__ControlPanel_ButtonsContainer-sc-14v1s4e-1 eWBySK"></div></div><div></div></div></div></div></div></div></div></div></div></div></div><div class="mt-5 relative"><div><div><div tabindex="0" style="outline:none"><div><div class=""><div class=""><div class="markdown-container-div Markdown__MarkdownContainerDiv-sc-12fsdjp-2 gruiOJ" height="auto"><div class="markdownViewer Widget_markdown-default__1HZqM Widget_markdown-table__2o-wV Widget_markdown-viewer__2usZh" role="none"><h3></h3> <h4>6. The anchor <code><a></code> tag text</h4> <ul> <li>The <strong>anchor tag text</strong> is the text added to a link to describe what the link is about. It is good for SEO because it helps the search engine recognize what the link is about. Check the code snippet below:</li> </ul> </div></div></div></div></div></div></div></div></div><div class="mt-5 relative"><div><div><div tabindex="0" style="outline:none"><div><div class=""><div class=""><div class=""><div class="Widget_widget___cFEk border border-solid border-gray-300 dark:border-dark-70 styles__CodePlaygroundStyled-sc-14v1s4e-0 dmOiDq"><div role="none"><div><div><div class="Widget_tabs__2kCDD dark:bg-white" data-tabs="true"><ul class="Widget_tab-list__2VPI8" role="tablist"><li class="Widget_tab__322s2 Widget_left__2Dcj5 react-tabs__tab--selected" role="tab" aria-selected="true" aria-disabled="false" tabindex="0">HTML</li></ul><div class="react-tabs__tab-panel react-tabs__tab-panel--selected" role="tabpanel" id="react-tabs-205" aria-labelledby="react-tabs-204"><div class="styles__ViewTabs_CodeContainer-sc-14v1s4e-7 iTUwKo"><div><pre class="dark:border-dark-60" style="background:#1e1e1e;color:#e9e9e9"></pre></div></div></div></div><div style="display:none"><div></div></div></div></div><div class="flex items-center justify-center px-4 flex-wrap sm:flex-no-wrap border border-solid border-gray-300 dark:border-dark-70 bg-gray-100 dark:bg-dark-90 " style="border-top:none;justify-content:space-between"><div class="styles__ControlPanel_ButtonsContainer-sc-14v1s4e-1 eWBySK"></div></div><div></div></div></div></div></div></div></div></div></div></div></div><div class="mt-5 relative"><div><div><div tabindex="0" style="outline:none"><div><div class=""><div class=""><div class="markdown-container-div Markdown__MarkdownContainerDiv-sc-12fsdjp-2 gruiOJ" height="auto"><div class="markdownViewer Widget_markdown-default__1HZqM Widget_markdown-table__2o-wV Widget_markdown-viewer__2usZh" role="none"><h3></h3> <h4>7. The <code>canonical</code> tag</h4> <ul> <li>The <strong><code>canonical</code> tag</strong> helps to tell the search engine to rank the page where this tag is placed as the primary page from all look-alike pages.</li> </ul> </div></div></div></div></div></div></div></div></div><div class="mt-5 relative"><div><div><div tabindex="0" style="outline:none"><div><div class=""><div class=""><div class=""><div class="Widget_widget___cFEk border border-solid border-gray-300 dark:border-dark-70 styles__CodePlaygroundStyled-sc-14v1s4e-0 dmOiDq"><div role="none"><div><div><div class="Widget_tabs__2kCDD dark:bg-white" data-tabs="true"><ul class="Widget_tab-list__2VPI8" role="tablist"><li class="Widget_tab__322s2 Widget_left__2Dcj5 react-tabs__tab--selected" role="tab" aria-selected="true" aria-disabled="false" tabindex="0">HTML</li></ul><div class="react-tabs__tab-panel react-tabs__tab-panel--selected" role="tabpanel" id="react-tabs-207" aria-labelledby="react-tabs-206"><div class="styles__ViewTabs_CodeContainer-sc-14v1s4e-7 iTUwKo"><div><pre class="dark:border-dark-60" style="background:#1e1e1e;color:#e9e9e9"></pre></div></div></div></div><div style="display:none"><div></div></div></div></div><div class="flex items-center justify-center px-4 flex-wrap sm:flex-no-wrap border border-solid border-gray-300 dark:border-dark-70 bg-gray-100 dark:bg-dark-90 " style="border-top:none;justify-content:space-between"><div class="styles__ControlPanel_ButtonsContainer-sc-14v1s4e-1 eWBySK"></div></div><div></div></div></div></div></div></div></div></div></div></div></div><div class="mt-5 relative"><div><div><div tabindex="0" style="outline:none"><div><div class=""><div class=""><div class="markdown-container-div Markdown__MarkdownContainerDiv-sc-12fsdjp-2 gruiOJ" height="auto"><div class="markdownViewer Widget_markdown-default__1HZqM Widget_markdown-table__2o-wV Widget_markdown-viewer__2usZh" role="none"><h2></h2> <h3>Conclusion</h3> <p>Using HTML tags that are SEO friendly helps your page rank more on SERP. I will advise you not to take them for granted even if you have placed your page on adverts. Hope this article has been helpful.</p> </div></div></div></div></div></div></div></div></div></div><div class="w-full mt-3 mb-8"><div class="border-b border-0 border-solid border-gray-200 dark:border-dark-70 "></div></div><div class="mb-5"><p class="m-0 mb-2 text-xs font-bold text-gray-A100 dark:text-dark-contrastText tracking-widest leading-5">RELATED TAGS</p><div class="flex flex-wrap"><div class="font-semibold mr-2 mt-2"><span class="inline-block align-top py-0.5 px-3 cursor-pointer text-xs text-gray-A200 dark:text-gray-600 leading-5 bg-gray-50 dark:bg-dark-90 dark:hover:bg-dark-80 border border-solid border-gray-200 dark:border-gray-A400 rounded-2xl hover:bg-gray-100 dark:hover:bg-dark-70 hover:border-accent3-contrastText dark:hover:border-dark-contrastText">html5</span></div><div class="font-semibold mr-2 mt-2"><span class="inline-block align-top py-0.5 px-3 cursor-pointer text-xs text-gray-A200 dark:text-gray-600 leading-5 bg-gray-50 dark:bg-dark-90 dark:hover:bg-dark-80 border border-solid border-gray-200 dark:border-gray-A400 rounded-2xl hover:bg-gray-100 dark:hover:bg-dark-70 hover:border-accent3-contrastText dark:hover:border-dark-contrastText">seo</span></div><div class="font-semibold mr-2 mt-2"><span class="inline-block align-top py-0.5 px-3 cursor-pointer text-xs text-gray-A200 dark:text-gray-600 leading-5 bg-gray-50 dark:bg-dark-90 dark:hover:bg-dark-80 border border-solid border-gray-200 dark:border-gray-A400 rounded-2xl hover:bg-gray-100 dark:hover:bg-dark-70 hover:border-accent3-contrastText dark:hover:border-dark-contrastText">communitycreator</span></div></div></div><div class="flex flex-col text-gray-A400 dark:text-dark-contrastText w-full max-w-3xl mb-6 py-0"><div class="w-11/12 mt-1"><p class="m-0 mb-2 text-xs font-bold text-gray-A100 dark:text-dark-contrastText tracking-widest leading-5">CONTRIBUTOR</p><div class="flex items-center space-x-2"><img class="rounded-full bg-gray-400 dark:bg-gray-900 flex-shrink-0 " width="32" height="32" src="/cdn-cgi/image/f=auto,fit=cover,w=32,h=32/v2api/author/profile/5495460376084480/image/5231563257675776" srcSet="/cdn-cgi/image/f=auto,fit=cover,w=64,h=64/v2api/author/profile/5495460376084480/image/5231563257675776 2x" title="Ugorji Miracle" loading="lazy" alt=""/><span class="font-normal leading-6 cursor-pointer hover:text-primary dark:hover:text-primary-light">Ugorji Miracle</span><div class="ml-2"><div class="" style="width:24px;height:24px"><div style="width:24px;height:24px"></div></div></div></div></div><div class="text-gray-A100 dark:text-gray-200 w-full"><div class="border-b border-0 border-solid border-gray-200 dark:border-dark-70 w-full my-6"></div><div class="w-11/12 flex flex-1 flex-col"><div></div></div><div class="max-w-xs sm:max-w-none" id="shot-license">License:<!-- --> <a class="text-current transform duration-200 hover:text-primary dark:hover:text-primary-light dark:focus:text-primary-light hover:cursor-pointer focus:text-primary focus:cursor-pointer" target="_blank" rel="noopener noreferrer" href="https://creativecommons.org/licenses/by-sa/4.0/">Creative Commons -Attribution -ShareAlike 4.0 (CC-BY-SA 4.0)</a></div></div></div><div class="flex space-x-1 w-full -ml-1.5"><button class="icon-default !p-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="cursor-pointer h-6 stroke-current text-gray-500 w-6" aria-label="Like this shot"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg></button><button class="icon-default !p-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-gray-500 h-6 hover:text-gray-500 stroke-current w-6"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path></svg></button><div><button class="icon-default !p-2" aria-label="more options"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="stroke-current text-gray-500"><circle cx="18" cy="5" r="3"></circle><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="19" r="3"></circle><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line></svg></button><ul class="hidden list-none p-0 m-0 rounded absolute z-50 bg-white dark:bg-dark-70" style="box-shadow:0px 5px 5px -3px rgb(0 0 0 / 20%), 0px 8px 10px 1px rgb(0 0 0 / 14%), 0px 3px 14px 2px rgb(0 0 0 / 12%)"><li class="rounded-sm cursor-pointer px-4 py-1.5 leading-6 bg-white dark:bg-dark-80 dark:hover:bg-dark-70 hover:bg-gray-buttonHover"><button aria-label="facebook" class="react-share__ShareButton social transition-none" style="background-color:transparent;border:none;padding:0;font:inherit;color:inherit;cursor:pointer"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="stroke-current text-gray-500"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg></button></li><li class="rounded-sm cursor-pointer px-4 py-1.5 leading-6 bg-white dark:bg-dark-80 dark:hover:bg-dark-70 hover:bg-gray-buttonHover"><button aria-label="linkedin" class="react-share__ShareButton social transition-none" style="background-color:transparent;border:none;padding:0;font:inherit;color:inherit;cursor:pointer"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="stroke-current text-gray-500"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg></button></li><li class="rounded-sm cursor-pointer px-4 py-1.5 leading-6 bg-white dark:bg-dark-80 dark:hover:bg-dark-70 hover:bg-gray-buttonHover"><button aria-label="twitter" class="react-share__ShareButton social transition-none" style="background-color:transparent;border:none;padding:0;font:inherit;color:inherit;cursor:pointer"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="stroke-current text-gray-500"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg></button></li><li class="rounded-sm cursor-pointer px-4 py-1.5 leading-6 bg-white dark:bg-dark-80 dark:hover:bg-dark-70 hover:bg-gray-buttonHover"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="stroke-current text-gray-500"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></li></ul></div><span class="text-sm font-semibold tracking-widest text-transform: uppercase"><button class="icon-default !p-2" aria-label="give feedback"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cursor-pointer h-6 w-6"><path d="M22 11.006C22 9.41555 21.2267 7.98057 20 7V15C21.2267 14.0314 22 12.5964 22 11.006Z" fill="#B0B0B7"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M11.1547 13L16 16.5532V6.37989L11.2461 10.5H3V13H11.1547ZM10.5 15L16.4086 19.333C17.0692 19.8174 18 19.3457 18 18.5266V4.18993C18 3.333 16.9926 2.87301 16.3451 3.43424L10.5 8.49997H2C1.44772 8.49997 1 8.94768 1 9.49997V14C1 14.5522 1.44772 15 2 15H5.5V22H7.5V15H10.5Z" fill="#B0B0B7"></path></svg></button></span></div></div><div style="width:200px" class="tailwind-hidden lg:block mx-6 mb-24 flex-shrink-0"><div class="flex flex-col h-full mt-8 "><div class="sticky z-0 p-4 space-y-10 tailwind-hidden lg:block border border-solid border-gray-200 dark:border-dark-70 text-gray-A200 dark:text-gray-600" style="top:72px"><div class="tailwind-hidden lg:block"><div><div class="flex items-center mb-3 space-x-2.5"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg><span class="text-xs font-bold leading-5 tracking-widest">RELATED COURSES</span></div><div class="w-full border border-solid border-gray-300 dark:border-dark-60 EdpressoRelatedCoursesSideBar___StyledDiv-owgdex-0 gjavkE"></div><div class="mt-5 space-y-4"><div class="h-3 w-44 my-1 rounded bg-gray-200 dark:bg-dark-80 animate-pulse"></div><div class="h-3 w-44 my-1 rounded bg-gray-200 dark:bg-dark-80 animate-pulse"></div><div class="h-3 w-44 my-1 rounded bg-gray-200 dark:bg-dark-80 animate-pulse"></div></div><div class="flex items-center cursor-pointer mt-6 space-x-2"><p class="m-0 font-bold leading-normal text-base tracking-wide hover:text-primary dark:hover:text-primary-light">View all Courses</p><svg width="16" height="8" viewBox="0 0 16 8" fill="none" xmlns="http://www.w3.org/2000/svg" class="fill-current"><path d="M12 3H0v2h12v3l4-4-4-4v3z" fill="current"></path></svg></div></div></div></div></div></div></div><div class="bg-white dark:bg-dark flex flex-col-reverse w-full mt-8 pb-24 lg:flex-col lg:mt-24"><div class="h-full dark:bg-dark"><div class="py-2 px-6 mb-12 h-2"><span class="font-semibold leading-normal tracking-wide text-2xl"><div class="mt-6 mx-0 mb-5 bg-gray-300 dark:bg-dark-60" style="padding:1px 50%"></div><div class="flex-initial w-max bg-white dark:bg-dark dark:text-dark-contrastText lg:bg-gray-50 justify-center m-auto -mt-10 px-3 text-gray-A400">Keep Exploring</div></span></div></div><div class="dark:bg-dark dark:text-dark-contrastText"><div class="hidden" style="height:556px"><div class="py-2 px-6 mb-12 h-2"><span class="font-semibold leading-normal tracking-wide text-2xl"><div class="mt-6 mx-0 mb-5 bg-gray-300 dark:bg-dark-60" style="padding:1px 50%"></div><div class="flex-initial w-max bg-white dark:bg-dark dark:text-dark-contrastText lg:bg-gray-50 justify-center m-auto -mt-10 px-3 text-gray-A400">Related Courses</div></span></div></div></div></div><div class="w-full mt-auto relative flex-none flex pt-0"><div class="flex justify-center flex-col w-full py-10 px-4 lg:px-6 bg-utils-footerLight dark:bg-utils-footerDark"><div class="flex items-start justify-between flex-col self-center w-full" style="max-width:1140px"><div class="flex flex-col justify-between w-full"><div class="flex flex-col my-4 sm:mt-14 items-start text-left"><a aria-label="educative.io" href="/"><div class="flex items-center text-white"><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" height="20px"><path d="M333 0H67A67 67 0 000 67v266a67 67 0 0067 67h266a67 67 0 0067-67V67a67 67 0 00-67-67zm29 325a37 37 0 01-37 37H75a37 37 0 01-37-37V162h324zm0-201H38V75a37 37 0 0137-37h250a37 37 0 0137 37z"></path><rect x="68" y="63" width="38.1" height="38.1" rx="2.4"></rect><rect x="126" y="63" width="38.1" height="38.1" rx="2.4"></rect><rect x="184" y="63" width="38.1" height="38.1" rx="2.4"></rect><rect x="200" y="295" width="114.3" height="38.1" rx="3.3"></rect><path d="M109 331a3 3 0 005 0l61-68a3 3 0 001-4l-59-69a3 3 0 00-4-1l-20 17a3 3 0 00-1 5l40 47a3 3 0 010 4l-43 47a3 3 0 001 4z"></path></svg><svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 862 141" height="20" class="h-4 ml-2"><path d="M90 62a44 44 0 00-17-17 49 49 0 00-24-6 49 49 0 00-25 7A46 46 0 006 64a53 53 0 00-6 26 53 53 0 006 26 45 45 0 0019 18q12 6 27 6a57 57 0 0022-4 39 39 0 0016-12l-12-14q-10 11-25 11-11 0-18-5a25 25 0 01-11-13l73-14q0-15-7-27zM21 89v-1q0-14 8-22t20-8a26 26 0 0126 20zm167-37a35 35 0 00-14-10 43 43 0 00-17-3 49 49 0 00-25 6 45 45 0 00-17 18q-6 12-6 27t6 26a45 45 0 0017 18 49 49 0 0025 6 44 44 0 0018-3c5-2 10-6 12-11v14h20V3h-19zm-4 54a27 27 0 01-10 11 29 29 0 01-29 0 27 27 0 01-10-11 34 34 0 01-4-16 34 34 0 014-17 27 27 0 0110-11 29 29 0 0129 0 27 27 0 0110 11 34 34 0 014 17 34 34 0 01-4 16zm112-16c0 13-4 17-8 22s-11 8-19 8q-11 0-17-7c-4-4-5-11-5-19V39h-19v58q0 21 11 32c7 8 13 11 26 11a41 41 0 0017-3 37 37 0 0014-10v13h20V39h-20zm88-32a26 26 0 0114 4 27 27 0 0110 10l16-10a38 38 0 00-15-17q-11-6-24-6a51 51 0 00-26 6 46 46 0 00-18 18 53 53 0 00-7 26 53 53 0 007 27 46 46 0 0018 18 52 52 0 0026 6 47 47 0 0023-6 39 39 0 0016-17l-16-10a27 27 0 01-10 10 26 26 0 01-14 3q-12 0-20-8t-8-23q0-14 8-22a27 27 0 0120-9zm201 63q-7 0-10-3a19 19 0 01-5-11V59h25V39h-24V20h-20v19h-15v20h15v48q0 17 8 25c6 6 13 8 23 8a41 41 0 0012-1 26 26 0 009-5l-6-17a19 19 0 01-12 4zm39-82h19v101h-19zm87 76l-29-76h-22l39 101h23l41-101h-22l-30 76zm107 6q-10 0-18-5a26 26 0 01-10-13l72-14q0-15-6-27a44 44 0 00-17-17 52 52 0 00-50 0 46 46 0 00-17 19c-4 7-8 16-8 26s4 18 8 26a46 46 0 0018 18q12 6 28 6a57 57 0 0022-4 39 39 0 0016-12l-12-14q-10 11-26 11zm-31-33q0-14 8-22t19-8a26 26 0 0127 20l-54 11zM624 0h19v19h-19zM513 47c-8-5-15-8-28-8-21 0-34 5-41 16l19 9c3-6 10-8 21-8l15 2c3 2 4 4 5 7v12h-5c-41 0-62 11-62 34a26 26 0 0011 21c6 6 15 8 25 8 13 0 23-3 32-9v9h19V76c0-14-4-24-11-29zm-8 64a30 30 0 01-11 9 37 37 0 01-16 3c-6 0-10-1-14-3a10 10 0 01-4-9c0-12 12-18 35-18h10z"></path></svg></div></a><div class="mt-4 text-gray-100 dark:text-dark-contrastText leading-6"><p class="text-base">Learn in-demand tech skills in half the time</p></div></div></div><div class="w-full self-center"><div class="border-b border-0 border-solid border-gray-50 dark:border-gray-500 "></div></div><div class="grid lg:grid-cols-4 sm:grid-cols-3 grid-cols-2 content-center w-full lg:gap-x-[calc(25%-176px)] sm:gap-x-[calc(33.3%-90px)] gap-x-[calc(50%-75px)] overflow-hidden"><div class="mt-12 sm:w-48 sm:shrink-0 " style="max-width:186px"><div class="text-xs font-semibold tracking-widest uppercase mb-4 text-white dark:text-dark-contrastText leading-5" style="letter-spacing:2.5px">SOLUTIONS</div><div class="flex"><a aria-label="educative.io/enterprise" href="/enterprise"><p class="text-gray-500 dark:text-gray-600 hover:text-white focus:text-white hover:cursor-pointer focus:cursor-pointer font-normal mb-4 leading-6">For Enterprise</p></a></div><div class="flex"><a aria-label="educative.io/individual-learner" href="/individual-learner"><p class="text-gray-500 dark:text-gray-600 hover:text-white focus:text-white hover:cursor-pointer focus:cursor-pointer font-normal mb-4 leading-6">For Individuals</p></a></div><div class="flex"><a aria-label="https://try.educative.io/recruiting" href="https://try.educative.io/recruiting"><p class="text-gray-500 dark:text-gray-600 hover:text-white focus:text-white hover:cursor-pointer focus:cursor-pointer font-normal mb-4 leading-6">For HR & Recruiting</p></a></div><div class="flex"><a aria-label="educative.io/bootcamps" href="/bootcamps"><p class="text-gray-500 dark:text-gray-600 hover:text-white focus:text-white hover:cursor-pointer focus:cursor-pointer font-normal mb-4 leading-6">For Bootcamps</p></a></div></div><div class="mt-12 sm:w-48 sm:shrink-0 " style="max-width:186px"><div class="text-xs font-semibold tracking-widest uppercase mb-4 text-white dark:text-dark-contrastText leading-5" style="letter-spacing:2.5px">PRODUCTS</div><div class="flex"><a aria-label="educative.io/explore" href="/explore"><p class="text-gray-500 dark:text-gray-600 hover:text-white focus:text-white hover:cursor-pointer focus:cursor-pointer font-normal mb-4 leading-6">Educative Learning</p></a></div><div class="flex"><a aria-label="educative.io/onboarding" href="/onboarding"><p class="text-gray-500 dark:text-gray-600 hover:text-white focus:text-white hover:cursor-pointer focus:cursor-pointer font-normal mb-4 leading-6">Educative Onboarding</p></a></div><div class="flex"><a aria-label="educative.io/assessments" href="/assessments"><p class="text-gray-500 dark:text-gray-600 hover:text-white focus:text-white hover:cursor-pointer focus:cursor-pointer font-normal mb-4 leading-6">Educative Skill Assessments</p></a></div><div class="flex"><a aria-label="educative.io/projects" href="/projects"><p class="text-gray-500 dark:text-gray-600 hover:text-white focus:text-white hover:cursor-pointer focus:cursor-pointer font-normal mb-4 leading-6">Educative Projects</p></a></div></div><div class="mt-12 sm:w-48 sm:shrink-0 " style="max-width:186px"><div class="text-xs font-semibold tracking-widest uppercase mb-4 text-white dark:text-dark-contrastText leading-5" style="letter-spacing:2.5px">Pricing</div><div class="flex"><a aria-label="educative.io/enterprise-pricing" href="/enterprise-pricing"><p class="text-gray-500 dark:text-gray-600 hover:text-white focus:text-white hover:cursor-pointer focus:cursor-pointer font-normal mb-4 leading-6">For Enterprise</p></a></div><div class="flex"><a aria-label="educative.io/unlimited" href="/unlimited"><p class="text-gray-500 dark:text-gray-600 hover:text-white focus:text-white hover:cursor-pointer focus:cursor-pointer font-normal mb-4 leading-6">For Individuals</p></a></div><div class="flex"><a aria-label="educative.io/b2c-trial" href="/b2c-trial"><p class="text-gray-500 dark:text-gray-600 hover:text-white focus:text-white hover:cursor-pointer focus:cursor-pointer font-normal mb-4 leading-6">Free Trial</p></a></div></div><div class="mt-12 sm:w-48 sm:shrink-0 " style="max-width:186px"><div class="text-xs font-semibold tracking-widest uppercase mb-4 text-white dark:text-dark-contrastText leading-5" style="letter-spacing:2.5px">LEGAL</div><div class="flex"><a aria-label="educative.io/privacy" href="/privacy"><p class="text-gray-500 dark:text-gray-600 hover:text-white focus:text-white hover:cursor-pointer focus:cursor-pointer font-normal mb-4 leading-6">Privacy Policy</p></a></div><div id="ed-cookie-settings" class="flex"><span class="text-gray-500 dark:text-gray-600 hover:text-white focus:text-white hover:cursor-pointer focus:cursor-pointer font-normal mb-4 leading-6">Cookie Settings</span></div><div class="flex"><a aria-label="educative.io/terms" href="/terms"><p class="text-gray-500 dark:text-gray-600 hover:text-white focus:text-white hover:cursor-pointer focus:cursor-pointer font-normal mb-4 leading-6">Terms of Service</p></a></div><div class="flex"><a aria-label="educative.io/enterprise-terms" href="/enterprise-terms"><p class="text-gray-500 dark:text-gray-600 hover:text-white focus:text-white hover:cursor-pointer focus:cursor-pointer font-normal mb-4 leading-6">Business Terms of Service</p></a></div></div><div class="mt-12 sm:w-48 sm:shrink-0 " style="max-width:186px"><div class="text-xs font-semibold tracking-widest uppercase mb-4 text-white dark:text-dark-contrastText leading-5" style="letter-spacing:2.5px">CONTRIBUTE</div><div class="flex"><a aria-label="https://learn.educative.io/become-an-educative-author" href="https://learn.educative.io/become-an-educative-author"><p class="text-gray-500 dark:text-gray-600 hover:text-white focus:text-white hover:cursor-pointer focus:cursor-pointer font-normal mb-4 leading-6">Become an Author</p></a></div><div class="flex"><a aria-label="educative.io/affiliate" href="/affiliate"><p class="text-gray-500 dark:text-gray-600 hover:text-white focus:text-white hover:cursor-pointer focus:cursor-pointer font-normal mb-4 leading-6">Become an Affiliate</p></a></div><div class="flex"><a aria-label="https://learn.educative.io/educative-answers" href="https://learn.educative.io/educative-answers"><p class="text-gray-500 dark:text-gray-600 hover:text-white focus:text-white hover:cursor-pointer focus:cursor-pointer font-normal mb-4 leading-6">Become a Contributor</p></a></div></div><div class="mt-12 sm:w-48 sm:shrink-0 " style="max-width:186px"><div class="text-xs font-semibold tracking-widest uppercase mb-4 text-white dark:text-dark-contrastText leading-5" style="letter-spacing:2.5px">RESOURCES</div><div class="flex"><a aria-label="educative.io/blog" href="/blog"><p class="text-gray-500 dark:text-gray-600 hover:text-white focus:text-white hover:cursor-pointer focus:cursor-pointer font-normal mb-4 leading-6">Educative Blog</p></a></div><div class="flex"><a aria-label="https://emhub.io/" href="https://emhub.io/"><p class="text-gray-500 dark:text-gray-600 hover:text-white focus:text-white hover:cursor-pointer focus:cursor-pointer font-normal mb-4 leading-6">EM Hub</p></a></div><div class="flex"><a aria-label="https://www.youtube.com/channel/UCT_8FqzTIr2Q1BOtvX_DPPw" href="https://www.youtube.com/channel/UCT_8FqzTIr2Q1BOtvX_DPPw"><p class="text-gray-500 dark:text-gray-600 hover:text-white focus:text-white hover:cursor-pointer focus:cursor-pointer font-normal mb-4 leading-6">Educative Sessions</p></a></div><div class="flex"><a aria-label="educative.io/answers" href="/answers"><p class="text-gray-500 dark:text-gray-600 hover:text-white focus:text-white hover:cursor-pointer focus:cursor-pointer font-normal mb-4 leading-6">Educative Answers</p></a></div></div><div class="mt-12 sm:w-48 sm:shrink-0 " style="max-width:186px"><div class="text-xs font-semibold tracking-widest uppercase mb-4 text-white dark:text-dark-contrastText leading-5" style="letter-spacing:2.5px">ABOUT US</div><div class="flex"><a aria-label="educative.io/team" href="/team"><p class="text-gray-500 dark:text-gray-600 hover:text-white focus:text-white hover:cursor-pointer focus:cursor-pointer font-normal mb-4 leading-6">Our Team</p></a></div><div class="flex"><a aria-label="educative.io/careers" href="/careers"><p class="text-gray-500 dark:text-gray-600 hover:text-white focus:text-white hover:cursor-pointer focus:cursor-pointer font-normal mb-4 leading-6">Careers</p></a><div class="inline-flex h-5 items-center justify-center align-middle px-1 bg-primary text-white font-bold tracking-wide text-xs rounded-sm ml-2" style="min-width:20px">Hiring</div></div><div class="flex"><a aria-label="educative.io/courses/educative-faq" href="/courses/educative-faq"><p class="text-gray-500 dark:text-gray-600 hover:text-white focus:text-white hover:cursor-pointer focus:cursor-pointer font-normal mb-4 leading-6">Frequently Asked Questions</p></a></div><div class="flex"><a aria-label="educative.io/contactUs" href="/contactUs"><p class="text-gray-500 dark:text-gray-600 hover:text-white focus:text-white hover:cursor-pointer focus:cursor-pointer font-normal mb-4 leading-6">Contact Us</p></a></div><div class="flex"><a aria-label="educative.io/press" href="/press"><p class="text-gray-500 dark:text-gray-600 hover:text-white focus:text-white hover:cursor-pointer focus:cursor-pointer font-normal mb-4 leading-6">Press</p></a></div></div><div class="mt-12 sm:w-48 sm:shrink-0 " style="max-width:186px"><div class="text-xs font-semibold tracking-widest uppercase mb-4 text-white dark:text-dark-contrastText leading-5" style="letter-spacing:2.5px">MORE</div><div class="flex"><a aria-label="educative.io/github-students" href="/github-students"><p class="text-gray-500 dark:text-gray-600 hover:text-white focus:text-white hover:cursor-pointer focus:cursor-pointer font-normal mb-4 leading-6">GitHub Students Scholarship</p></a></div><div class="flex"><a aria-label="educative.io/explore" href="/explore"><p class="text-gray-500 dark:text-gray-600 hover:text-white focus:text-white hover:cursor-pointer focus:cursor-pointer font-normal mb-4 leading-6">Course Catalog</p></a></div><div class="flex"><a aria-label="educative.io/explore/early-access" href="/explore/early-access"><p class="text-gray-500 dark:text-gray-600 hover:text-white focus:text-white hover:cursor-pointer focus:cursor-pointer font-normal mb-4 leading-6">Early Access Courses</p></a></div><div class="flex"><a aria-label="educative.io/refer-a-friend" href="/refer-a-friend"><p class="text-gray-500 dark:text-gray-600 hover:text-white focus:text-white hover:cursor-pointer focus:cursor-pointer font-normal mb-4 leading-6">Earn Referral Credits</p></a></div><div class="flex"><a aria-label="https://codinginterview.com" href="https://codinginterview.com"><p class="text-gray-500 dark:text-gray-600 hover:text-white focus:text-white hover:cursor-pointer focus:cursor-pointer font-normal mb-4 leading-6">CodingInterview.com</p></a></div></div></div><div class="w-full self-center flex bg-gray-A400 mt-6"><div class="border-b border-0 border-solid border-gray-200 dark:border-dark-70 "></div></div><div class="flex justify-center lg:justify-between mt-10 sm:mt-4 mb-4 lg:mb-14 self-center w-full flex-col lg:flex-row items-center lg:items-start" style="max-width:1140px"><div class="mt-4 ml-4 lg:ml-0 flex items-center justify-start"><a href="//facebook.com/educativeinc" target="_blank" rel="noopener noreferrer" aria-label="Facebook" class="mb-4 text-gray-50 fill-current hover:text-primary focus:text-primary dark:hover:text-primary-light dark:focus:text-primary-light hover:cursor-pointer focus:cursor-pointer"><span class="mr-1 flex justify-center h-12 w-12"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg></span></a><a href="//linkedin.com/company/educative-inc/" target="_blank" rel="noopener noreferrer" aria-label="Linkedin" class="mb-4 text-gray-50 fill-current hover:text-primary focus:text-primary dark:hover:text-primary-light dark:focus:text-primary-light hover:cursor-pointer focus:cursor-pointer"><span class="mr-1 flex justify-center h-12 w-12"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg></span></a><a href="//twitter.com/educativeinc" target="_blank" rel="noopener noreferrer" aria-label="Twitter" class="mb-4 text-gray-50 fill-current hover:text-primary focus:text-primary dark:hover:text-primary-light dark:focus:text-primary-light hover:cursor-pointer focus:cursor-pointer"><span class="mr-1 flex justify-center h-12 w-12"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg></span></a><a href="//www.youtube.com/channel/UCT_8FqzTIr2Q1BOtvX_DPPw/?sub_confirmation=1" target="_blank" rel="noopener noreferrer" aria-label="YouTube" class="mb-4 text-gray-50 fill-current hover:text-primary focus:text-primary dark:hover:text-primary-light dark:focus:text-primary-light hover:cursor-pointer focus:cursor-pointer"><span class="mr-1 flex justify-center h-12 w-12"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon></svg></span></a><a href="//educativesessions.podbean.com" target="_blank" rel="noopener noreferrer" aria-label="Podcast" class="mb-4 text-gray-50 fill-current hover:text-primary focus:text-primary dark:hover:text-primary-light dark:focus:text-primary-light hover:cursor-pointer focus:cursor-pointer"><span class="mr-1 flex justify-center h-12 w-12"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" class="w-5 h-5"><path d="M0 0h24v24H0z" fill="none"></path><path d="M12 14a3 3 0 003-3V5a3 3 0 10-6 0v6a3 3 0 003 3zm-1.2-9.1c0-.7.5-1.2 1.2-1.2s1.2.5 1.2 1.2v6.2a1.2 1.2 0 11-2.4 0V4.9zm6.5 6.1c0 3-2.5 5.1-5.3 5.1S6.7 14 6.7 11H5a7 7 0 006 6.7V21h2v-3.3a7 7 0 006-6.7h-1.7z"></path></svg></span></a></div><div class="flex items-center text-left text-gray-500 flex-col-reverse lg:flex-row -mt-2 lg:mt-0"><p class="text-xs font-semibold tracking-wide m-0 mt-2 lg:mt-0">Copyright ©<!-- -->2022<!-- --> Educative, Inc. All rights reserved.</p><img src="/static/imgs/soc2.svg" loading="lazy" alt="soc2" class="m-2 lg:m-0 lg:ml-5 w-12 h-12"/></div></div></div></div></div><div class="fixed bottom-0 right-0 mb-8 mr-6 z-20"><div class="flex items-center transition duration-500 ease-in-out transform hover:-translate-y-1 justify-center w-10 h-10 rounded-full bg-gray-50 dark:bg-dark-80 cursor-pointer hover:border hover:border-solid border-gray-800 dark:border-dark-contrastText"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="dark:hidden w-5 h-5 text-gray-800 dark:text-dark-contrastText "><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg><svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg" class="tailwind-hidden dark:block w-5 h-5 text-gray-800 dark:text-dark-contrastText "><path d="M10.5 7.2c1.81 0 3.3 1.49 3.3 3.3 0 1.81-1.49 3.3-3.3 3.3a3.31 3.31 0 0 1-3.3-3.3c0-1.81 1.49-3.3 3.3-3.3Zm0-2.2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2.86 11.45H.96A.96.96 0 0 1 0 10.5c0-.53.43-.95.95-.95h1.91c.53 0 .96.42.96.95s-.43.95-.96.95ZM20.05 11.45h-1.91a.96.96 0 0 1-.96-.95c0-.53.43-.95.96-.95h1.9c.53 0 .96.42.96.95s-.43.95-.95.95ZM9.55 2.86V.96c0-.53.42-.96.95-.96s.95.43.95.95v1.91c0 .53-.42.96-.95.96a.96.96 0 0 1-.95-.96ZM9.55 20.05v-1.91c0-.53.42-.96.95-.96s.95.43.95.96v1.9c0 .53-.42.96-.95.96a.96.96 0 0 1-.95-.95ZM3.42 3.42a.95.95 0 0 1 1.34 0l1.02 1c.37.37.36.98 0 1.36a.95.95 0 0 1-1.35 0L3.42 4.76a.95.95 0 0 1 0-1.34ZM15.22 15.22a.95.95 0 0 1 1.35 0l1.01 1.02a.95.95 0 1 1-1.34 1.34l-1.01-1a.95.95 0 0 1 0-1.35ZM17.58 3.42c.38.36.38.97 0 1.34l-1 1.02a.95.95 0 1 1-1.35-1.35l1-1.01a.95.95 0 0 1 1.35 0ZM5.78 15.22c.37.37.37.98 0 1.35l-1.02 1.01a.95.95 0 1 1-1.35-1.35l1.02-1a.95.95 0 0 1 1.35 0Z" fill="currentColor"></path></svg></div></div></div></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"content":{"shotId":"5249004872400896","title":"HTML tags for search engine optimization (SEO)","tags":"html5,seo,communitycreator","content":[{"type":"MarkdownEditor","content":{"version":"2.0","text":"**HTML tags** for search engine optimization help to increase the chances of a webpage appearing in search results. These tags help the search engine to find and read the contents of the page and make them available during a search. They also display parts of the webpage that are relevant to the search engine during a search.\n\n## \n### HTML tags for search engine optimization \nNow we will discuss the semantic HTML tags that help search engine optimization. \n\n### \n#### 1. The `\u003ctitle\u003e` tag\n\n* The **`\u003ctitle\u003e` tag** is one of the most important tags on a webpage. It is located at the `\u003chead\u003e` tag. This is the tag that describes the content of a webpage. The `\u003ctitle\u003e` tag helps search keywords to the search engine when a search is made. It is the text that shows up on the tabs of the browser. Check the image illustration below:\n![](/api/edpresso/shot/5249004872400896/image/6270364436398080)\n\n* The `\u003ctitle\u003e` tag is also used to generate the Search Engine Results Page(SERP). When a search matches the top keywords in the title, that page is likely to appear on the search results. Check the image below:\n![](/api/edpresso/shot/5249004872400896/image/5087084538232832)\n\n* The `\u003ctitle\u003e` tag is placed at the `\u003chead\u003e` tag when coding a webpage. Check the code snippet below:","mdHtml":"\u003cp\u003e\u003cstrong\u003eHTML tags\u003c/strong\u003e for search engine optimization help to increase the chances of a webpage appearing in search results. These tags help the search engine to find and read the contents of the page and make them available during a search. They also display parts of the webpage that are relevant to the search engine during a search.\u003c/p\u003e\n\u003ch2\u003e\u003c/h2\u003e\n\u003ch3\u003eHTML tags for search engine optimization\u003c/h3\u003e\n\u003cp\u003eNow we will discuss the semantic HTML tags that help search engine optimization.\u003c/p\u003e\n\u003ch3\u003e\u003c/h3\u003e\n\u003ch4\u003e1. The \u003ccode\u003e\u0026lt;title\u0026gt;\u003c/code\u003e tag\u003c/h4\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003eThe \u003cstrong\u003e\u003ccode\u003e\u0026lt;title\u0026gt;\u003c/code\u003e tag\u003c/strong\u003e is one of the most important tags on a webpage. It is located at the \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e tag. This is the tag that describes the content of a webpage. The \u003ccode\u003e\u0026lt;title\u0026gt;\u003c/code\u003e tag helps search keywords to the search engine when a search is made. It is the text that shows up on the tabs of the browser. Check the image illustration below:\n\u003cimg src=\"/api/edpresso/shot/5249004872400896/image/6270364436398080\" alt=\"\" /\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eThe \u003ccode\u003e\u0026lt;title\u0026gt;\u003c/code\u003e tag is also used to generate the Search Engine Results Page(SERP). When a search matches the top keywords in the title, that page is likely to appear on the search results. Check the image below:\n\u003cimg src=\"/api/edpresso/shot/5249004872400896/image/5087084538232832\" alt=\"\" /\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eThe \u003ccode\u003e\u0026lt;title\u0026gt;\u003c/code\u003e tag is placed at the \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e tag when coding a webpage. Check the code snippet below:\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n","cursorPosition":402,"comp_id":"ndE3XWHBWh86x8wyGyuww"},"iteration":3,"hash":1,"saveVersion":15},{"type":"RunJS","mode":"edit","content":{"version":"11","filename":"","active":"html","jotted":{"pane":"html","height":null,"heightCodepanel":null,"showBlank":false,"hints":null,"hideResult":true,"hideHtml":false,"hideCss":true,"hideJs":true,"hideNav":false,"showBabelTransformPane":false,"codePlaygroundTemplate":"jottedTabs","showLineNumbers":true,"autoRun":true,"runOnLoad":false,"theme":"default","exercise":false,"showSolution":false,"caption":"","toggleState":{"result":true,"html":true,"css":true,"js":true},"readOnlyState":{"html":false,"css":false,"js":false},"solutionPanels":{"js":"","html":"","css":""},"panelsHighlightedLines":{"js":"","html":"","css":"","hiddenjs":""},"plugins":[{"name":"codemirror","options":{"lineNumbers":true}}],"files":[{"type":"html","content":"\u003chtml\u003e\r\n \u003chead\u003e\r\n \u003ctitle\u003eHTML tags for search engine optimization\u003c/title\u003e\r\n \u003c/head\u003e\r\n \u003cbody\u003e\r\n \u003cdiv id=\"content\"/\u003e\r\n \u003c/body\u003e\r\n\u003c/html\u003e"},{"type":"js","content":"document.addEventListener(\"DOMContentLoaded\", function () {\r\n pTag = document.querySelector(\"div\");\r\n newVal = document.createElement(\"p\");\r\n newVal.innerHTML = 'Hello, Hello';\r\n pTag.appendChild(newVal);\r\n});\r\n\r\n// Async Tests Example\r\n/*\r\nwindow.onModulesLoaded = new Promise( function( resolve, reject ) {\r\n setTimeout(function() {\r\n pTag = document.querySelector(\"div\");\r\n pTag.innerHTML = '';\r\n newVal = document.createElement(\"p\");\r\n newVal.innerHTML = 'Hello World';\r\n pTag.appendChild(newVal);\r\n resolve();\r\n }, 100)\r\n});\r\n*/"},{"type":"hiddenjs","content":"\n\n"},{"type":"exercise","content":"var TestResult = function() {\r\n this.succeeded = false;\r\n this.reason = \"\";\r\n this.input = \"\";\r\n this.expected_output = \"\";\r\n this.actual_output = \"\";\r\n};\r\n\r\nvar executeTests = function(\r\n userJsCode,\r\n userCssCode,\r\n userHtmlCode,\r\n userHtmlPage\r\n) {\r\n var results = [];\r\n\r\n const jsdom = require(\"jsdom\");\r\n const { JSDOM } = jsdom;\r\n const dom2 = new JSDOM(userHtmlPage, { runScripts: \"dangerously\" });\r\n\r\n const pTag = dom2.window.document.querySelector(\"p\");\r\n\r\n const result = new TestResult();\r\n result.expected_output = \"Hello World\";\r\n result.input = \"Html page\";\r\n\r\n if (!pTag) {\r\n result.actual_output = \"null\";\r\n result.succeeded = false;\r\n result.reason = \"No p tag found\";\r\n } else {\r\n const pTagText = pTag ? pTag.textContent : \"\";\r\n result.actual_output = pTagText;\r\n if (pTagText.trim() != \"Hello World\") {\r\n result.reason = \"Expected output (Hello World in a p tag) did not match\";\r\n result.succeeded = false;\r\n } else {\r\n result.succeeded = true;\r\n result.reason = \"Found p tag with Hello World\";\r\n }\r\n }\r\n\r\n results.push(result);\r\n\r\n return results;\r\n};\r\n\r\n// Async Tests Example\r\n/*\r\nvar executeTestsAsync = function(\r\n userJsCode,\r\n userCssCode,\r\n userHtmlCode,\r\n userHtmlPage\r\n) {\r\n var results = [];\r\n return new Promise(resolve =\u003e {\r\n\r\n const jsdom = require(\"jsdom\");\r\n const { JSDOM } = jsdom;\r\n const dom2 = new JSDOM(userHtmlPage, { runScripts: \"dangerously\" });\r\n\r\n if (!dom2.window.onModulesLoaded) {\r\n console.log(\"window.onModulesLoaded not found!\");\r\n \tresolve(results);\r\n }\r\n dom2.window.onModulesLoaded.then(()=\u003e{\r\n const pTag = dom2.window.document.querySelector(\"p\");\r\n\r\n const result = new TestResult();\r\n result.expected_output = \"Hello World\";\r\n result.input = \"Html page\";\r\n\r\n if (!pTag) {\r\n result.actual_output = \"null\";\r\n result.succeeded = false;\r\n result.reason = \"No p tag found\";\r\n } else {\r\n const pTagText = pTag ? pTag.textContent : \"\";\r\n result.actual_output = pTagText;\r\n if (pTagText.trim() != \"Hello World\") {\r\n result.reason = \"Expected output (Hello World in a p tag) did not match\";\r\n result.succeeded = false;\r\n } else {\r\n result.succeeded = true;\r\n result.reason = \"Found p tag with Hello World\";\r\n }\r\n }\r\n\r\n results.push(result);\r\n resolve(results);\r\n });\r\n });\r\n};\r\n*/"},{"type":"css","content":""}]},"selectedApiKeys":{},"comp_id":"009gqGKqiqIikmfeMOZWg"},"iteration":0,"hash":3,"saveVersion":1},{"type":"MarkdownEditor","mode":"edit","content":{"version":"2.0","text":"\n\u003ctitle\u003e\n\u003ch1\u003e to \u003ch6\u003e\n\u003cp\u003e\n\u003csection\u003e\n\u003carticle\u003e\n\u003cnav\u003e\n\u003cfooter\u003e\n\u003cform\u003e\n\u003ctable\u003e\n\n","mdHtml":"\u003ctitle\u003e\n\u003ch1\u003e to \u003ch6\u003e\n\u003cp\u003e\n\u003csection\u003e\n\u003carticle\u003e\n\u003cnav\u003e\n\u003cfooter\u003e\n\u003cform\u003e\n\u003ctable\u003e\n","cursorPosition":{"line":0,"ch":0},"comp_id":"_JFAa8zhDr7krTRw2cwOe"},"iteration":0,"hash":2,"saveVersion":1},{"type":"MarkdownEditor","mode":"edit","content":{"version":"2.0","text":"###\n#### 2. The `\u003cmeta description\u003e` tags: \n\n* The **`\u003cmeta description\u003e` tag** is used to give the page more description. It describes in few words what the reader can expect to see on the page. If the right keywords are present in the `\u003cmeta description\u003e` tag and they correspond with the title of the page, then there is a high chance of ranking in SERP. On the SERP, the `\u003cmeta description\u003e` appears immediately after the title. Check the image below:\n\n![](/api/edpresso/shot/5249004872400896/image/6700030179672064)\n\n* In your HTML code, this `\u003cmeta tag\u003e` is also placed at the `\u003chead\u003e`. Check the HTML code below: \n\n\n\n\n","mdHtml":"\u003ch3\u003e\u003c/h3\u003e\n\u003ch4\u003e2. The \u003ccode\u003e\u0026lt;meta description\u0026gt;\u003c/code\u003e tags:\u003c/h4\u003e\n\u003cul\u003e\n\u003cli\u003eThe \u003cstrong\u003e\u003ccode\u003e\u0026lt;meta description\u0026gt;\u003c/code\u003e tag\u003c/strong\u003e is used to give the page more description. It describes in few words what the reader can expect to see on the page. If the right keywords are present in the \u003ccode\u003e\u0026lt;meta description\u0026gt;\u003c/code\u003e tag and they correspond with the title of the page, then there is a high chance of ranking in SERP. On the SERP, the \u003ccode\u003e\u0026lt;meta description\u0026gt;\u003c/code\u003e appears immediately after the title. Check the image below:\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003cimg src=\"/api/edpresso/shot/5249004872400896/image/6700030179672064\" alt=\"\" /\u003e\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eIn your HTML code, this \u003ccode\u003e\u0026lt;meta tag\u0026gt;\u003c/code\u003e is also placed at the \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e. Check the HTML code below:\u003c/li\u003e\n\u003c/ul\u003e\n","cursorPosition":550,"comp_id":"a4Qm1o-XN_LskmHuwwzIg"},"iteration":0,"hash":4,"saveVersion":5},{"type":"RunJS","mode":"edit","content":{"version":"11","filename":"","active":"html","jotted":{"pane":"html","height":null,"heightCodepanel":null,"showBlank":false,"hints":null,"hideResult":true,"hideHtml":false,"hideCss":true,"hideJs":true,"hideNav":false,"showBabelTransformPane":false,"codePlaygroundTemplate":"jottedTabs","showLineNumbers":true,"autoRun":true,"runOnLoad":false,"theme":"default","exercise":false,"showSolution":false,"caption":"","toggleState":{"result":true,"html":true,"css":true,"js":true},"readOnlyState":{"html":false,"css":false,"js":false},"solutionPanels":{"js":"","html":"","css":""},"panelsHighlightedLines":{"js":"","html":"","css":"","hiddenjs":""},"plugins":[{"name":"codemirror","options":{"lineNumbers":true}}],"files":[{"type":"html","content":"\u003chtml\u003e\r\n \u003chead\u003e\r\n \u003cmeta description=\"name\" content=\"Html tags that helps search engine optimization and ranks your page among the search engine results pages\" /\u003e\r\n \u003c/head\u003e\r\n \u003cbody\u003e\r\n \u003cdiv id=\"content\"/\u003e\r\n \u003c/body\u003e\r\n\u003c/html\u003e"},{"type":"js","content":"document.addEventListener(\"DOMContentLoaded\", function () {\r\n pTag = document.querySelector(\"div\");\r\n newVal = document.createElement(\"p\");\r\n newVal.innerHTML = 'Hello, Hello';\r\n pTag.appendChild(newVal);\r\n});\r\n\r\n// Async Tests Example\r\n/*\r\nwindow.onModulesLoaded = new Promise( function( resolve, reject ) {\r\n setTimeout(function() {\r\n pTag = document.querySelector(\"div\");\r\n pTag.innerHTML = '';\r\n newVal = document.createElement(\"p\");\r\n newVal.innerHTML = 'Hello World';\r\n pTag.appendChild(newVal);\r\n resolve();\r\n }, 100)\r\n});\r\n*/"},{"type":"hiddenjs","content":"\n\n"},{"type":"exercise","content":"var TestResult = function() {\r\n this.succeeded = false;\r\n this.reason = \"\";\r\n this.input = \"\";\r\n this.expected_output = \"\";\r\n this.actual_output = \"\";\r\n};\r\n\r\nvar executeTests = function(\r\n userJsCode,\r\n userCssCode,\r\n userHtmlCode,\r\n userHtmlPage\r\n) {\r\n var results = [];\r\n\r\n const jsdom = require(\"jsdom\");\r\n const { JSDOM } = jsdom;\r\n const dom2 = new JSDOM(userHtmlPage, { runScripts: \"dangerously\" });\r\n\r\n const pTag = dom2.window.document.querySelector(\"p\");\r\n\r\n const result = new TestResult();\r\n result.expected_output = \"Hello World\";\r\n result.input = \"Html page\";\r\n\r\n if (!pTag) {\r\n result.actual_output = \"null\";\r\n result.succeeded = false;\r\n result.reason = \"No p tag found\";\r\n } else {\r\n const pTagText = pTag ? pTag.textContent : \"\";\r\n result.actual_output = pTagText;\r\n if (pTagText.trim() != \"Hello World\") {\r\n result.reason = \"Expected output (Hello World in a p tag) did not match\";\r\n result.succeeded = false;\r\n } else {\r\n result.succeeded = true;\r\n result.reason = \"Found p tag with Hello World\";\r\n }\r\n }\r\n\r\n results.push(result);\r\n\r\n return results;\r\n};\r\n\r\n// Async Tests Example\r\n/*\r\nvar executeTestsAsync = function(\r\n userJsCode,\r\n userCssCode,\r\n userHtmlCode,\r\n userHtmlPage\r\n) {\r\n var results = [];\r\n return new Promise(resolve =\u003e {\r\n\r\n const jsdom = require(\"jsdom\");\r\n const { JSDOM } = jsdom;\r\n const dom2 = new JSDOM(userHtmlPage, { runScripts: \"dangerously\" });\r\n\r\n if (!dom2.window.onModulesLoaded) {\r\n console.log(\"window.onModulesLoaded not found!\");\r\n \tresolve(results);\r\n }\r\n dom2.window.onModulesLoaded.then(()=\u003e{\r\n const pTag = dom2.window.document.querySelector(\"p\");\r\n\r\n const result = new TestResult();\r\n result.expected_output = \"Hello World\";\r\n result.input = \"Html page\";\r\n\r\n if (!pTag) {\r\n result.actual_output = \"null\";\r\n result.succeeded = false;\r\n result.reason = \"No p tag found\";\r\n } else {\r\n const pTagText = pTag ? pTag.textContent : \"\";\r\n result.actual_output = pTagText;\r\n if (pTagText.trim() != \"Hello World\") {\r\n result.reason = \"Expected output (Hello World in a p tag) did not match\";\r\n result.succeeded = false;\r\n } else {\r\n result.succeeded = true;\r\n result.reason = \"Found p tag with Hello World\";\r\n }\r\n }\r\n\r\n results.push(result);\r\n resolve(results);\r\n });\r\n });\r\n};\r\n*/"},{"type":"css","content":""}]},"selectedApiKeys":{},"comp_id":"iwq0joJRKVOsoZKy5yxA9"},"iteration":0,"hash":5,"saveVersion":2},{"type":"MarkdownEditor","mode":"edit","content":{"version":"2.0","text":"###\n#### 3. The `\u003ch1\u003e` to `\u003ch6\u003e` heading tags\n\n* The **`heading` tags** are used to structure the contents of the page. They place the contents in a hierarchy or order of importance. These headings, when properly used, help the search engine and human readers make meaning out of your page. Instead of using a bunch of divs try to use headings.\n\n* In a webpage, your `\u003ch1\u003e` should be one. Then the subheadings are placed in `\u003ch2\u003e`. Each `\u003ch2\u003e` will now have `\u003ch3\u003e` and so on. When your headings are properly written, the search engine can present different parts of your page in search results. Thereby, generating traffic.\n\n* The headings are written in the `\u003cbody\u003e` tag. Check the code snippet below:\n","mdHtml":"\u003ch3\u003e\u003c/h3\u003e\n\u003ch4\u003e3. The \u003ccode\u003e\u0026lt;h1\u0026gt;\u003c/code\u003e to \u003ccode\u003e\u0026lt;h6\u0026gt;\u003c/code\u003e heading tags\u003c/h4\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003eThe \u003cstrong\u003e\u003ccode\u003eheading\u003c/code\u003e tags\u003c/strong\u003e are used to structure the contents of the page. They place the contents in a hierarchy or order of importance. These headings, when properly used, help the search engine and human readers make meaning out of your page. Instead of using a bunch of divs try to use headings.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eIn a webpage, your \u003ccode\u003e\u0026lt;h1\u0026gt;\u003c/code\u003e should be one. Then the subheadings are placed in \u003ccode\u003e\u0026lt;h2\u0026gt;\u003c/code\u003e. Each \u003ccode\u003e\u0026lt;h2\u0026gt;\u003c/code\u003e will now have \u003ccode\u003e\u0026lt;h3\u0026gt;\u003c/code\u003e and so on. When your headings are properly written, the search engine can present different parts of your page in search results. Thereby, generating traffic.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eThe headings are written in the \u003ccode\u003e\u0026lt;body\u0026gt;\u003c/code\u003e tag. Check the code snippet below:\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n","cursorPosition":392,"comp_id":"kdv56pZSKunkCovr8q4o3"},"iteration":0,"hash":6,"saveVersion":2},{"type":"RunJS","mode":"edit","content":{"version":"11","filename":"","active":"html","jotted":{"pane":"html","height":null,"heightCodepanel":null,"showBlank":false,"hints":null,"hideResult":true,"hideHtml":false,"hideCss":true,"hideJs":true,"hideNav":false,"showBabelTransformPane":false,"codePlaygroundTemplate":"jottedTabs","showLineNumbers":true,"autoRun":true,"runOnLoad":false,"theme":"default","exercise":false,"showSolution":false,"caption":"","toggleState":{"result":true,"html":true,"css":true,"js":true},"readOnlyState":{"html":false,"css":false,"js":false},"solutionPanels":{"js":"","html":"","css":""},"panelsHighlightedLines":{"js":"","html":"","css":"","hiddenjs":""},"plugins":[{"name":"codemirror","options":{"lineNumbers":true}}],"files":[{"type":"html","content":"\u003chtml\u003e\r\n \u003chead\u003e\r\n \u003c/head\u003e\r\n \u003cbody\u003e\r\n \u003ch1\u003eHTML tags for search engine optimization\u003c/h1\u003e\r\n \u003ch2\u003eWhat is html?\u003c/h2\u003e\r\n \u003ch3\u003eWhat tags make up HTML?\u003c/h3\u003e\r\n \u003ch3\u003eExamples of semantic tags\u003ch3\u003e\r\n \u003ch3\u003eExamples of non-semantic HTML\u003c/h3\u003e\r\n\r\n \u003ch2\u003eWhat is search engine optimization?\u003c/h2\u003e\r\n \u003ch3\u003eDoes SEO matter?\u003c/h3\u003e\r\n \u003ch3\u003eTools to help SEO\u003ch3\u003e\r\n \u003ch3\u003eWhy you cannot do without SEO\u003c/h3\u003e\r\n \u003ch2\u003e...\u003c/h2\u003e\r\n \u003ch3\u003e...\u003c/h3\u003e\r\n \u003ch4\u003e...\u003c/h4\u003e\r\n \u003ch3\u003e...\u003c/h3\u003e\r\n \u003ch4\u003e...\u003c/h4\u003e\r\n \u003ch3\u003e...\u003c/h3\u003e\r\n \u003ch4\u003e...\u003c/h4\u003e\r\n \u003c/body\u003e\r\n\u003c/html\u003e"},{"type":"js","content":"document.addEventListener(\"DOMContentLoaded\", function () {\r\n pTag = document.querySelector(\"div\");\r\n newVal = document.createElement(\"p\");\r\n newVal.innerHTML = 'Hello, Hello';\r\n pTag.appendChild(newVal);\r\n});\r\n\r\n// Async Tests Example\r\n/*\r\nwindow.onModulesLoaded = new Promise( function( resolve, reject ) {\r\n setTimeout(function() {\r\n pTag = document.querySelector(\"div\");\r\n pTag.innerHTML = '';\r\n newVal = document.createElement(\"p\");\r\n newVal.innerHTML = 'Hello World';\r\n pTag.appendChild(newVal);\r\n resolve();\r\n }, 100)\r\n});\r\n*/"},{"type":"hiddenjs","content":"\n\n"},{"type":"exercise","content":"var TestResult = function() {\r\n this.succeeded = false;\r\n this.reason = \"\";\r\n this.input = \"\";\r\n this.expected_output = \"\";\r\n this.actual_output = \"\";\r\n};\r\n\r\nvar executeTests = function(\r\n userJsCode,\r\n userCssCode,\r\n userHtmlCode,\r\n userHtmlPage\r\n) {\r\n var results = [];\r\n\r\n const jsdom = require(\"jsdom\");\r\n const { JSDOM } = jsdom;\r\n const dom2 = new JSDOM(userHtmlPage, { runScripts: \"dangerously\" });\r\n\r\n const pTag = dom2.window.document.querySelector(\"p\");\r\n\r\n const result = new TestResult();\r\n result.expected_output = \"Hello World\";\r\n result.input = \"Html page\";\r\n\r\n if (!pTag) {\r\n result.actual_output = \"null\";\r\n result.succeeded = false;\r\n result.reason = \"No p tag found\";\r\n } else {\r\n const pTagText = pTag ? pTag.textContent : \"\";\r\n result.actual_output = pTagText;\r\n if (pTagText.trim() != \"Hello World\") {\r\n result.reason = \"Expected output (Hello World in a p tag) did not match\";\r\n result.succeeded = false;\r\n } else {\r\n result.succeeded = true;\r\n result.reason = \"Found p tag with Hello World\";\r\n }\r\n }\r\n\r\n results.push(result);\r\n\r\n return results;\r\n};\r\n\r\n// Async Tests Example\r\n/*\r\nvar executeTestsAsync = function(\r\n userJsCode,\r\n userCssCode,\r\n userHtmlCode,\r\n userHtmlPage\r\n) {\r\n var results = [];\r\n return new Promise(resolve =\u003e {\r\n\r\n const jsdom = require(\"jsdom\");\r\n const { JSDOM } = jsdom;\r\n const dom2 = new JSDOM(userHtmlPage, { runScripts: \"dangerously\" });\r\n\r\n if (!dom2.window.onModulesLoaded) {\r\n console.log(\"window.onModulesLoaded not found!\");\r\n \tresolve(results);\r\n }\r\n dom2.window.onModulesLoaded.then(()=\u003e{\r\n const pTag = dom2.window.document.querySelector(\"p\");\r\n\r\n const result = new TestResult();\r\n result.expected_output = \"Hello World\";\r\n result.input = \"Html page\";\r\n\r\n if (!pTag) {\r\n result.actual_output = \"null\";\r\n result.succeeded = false;\r\n result.reason = \"No p tag found\";\r\n } else {\r\n const pTagText = pTag ? pTag.textContent : \"\";\r\n result.actual_output = pTagText;\r\n if (pTagText.trim() != \"Hello World\") {\r\n result.reason = \"Expected output (Hello World in a p tag) did not match\";\r\n result.succeeded = false;\r\n } else {\r\n result.succeeded = true;\r\n result.reason = \"Found p tag with Hello World\";\r\n }\r\n }\r\n\r\n results.push(result);\r\n resolve(results);\r\n });\r\n });\r\n};\r\n*/"},{"type":"css","content":""}]},"selectedApiKeys":{},"comp_id":"Ejy5kwSA2EcTUtl35TVhe"},"iteration":0,"hash":7,"saveVersion":2},{"type":"MarkdownEditor","mode":"edit","content":{"version":"2.0","text":"###\n#### 4. The image `alt` attribute\n* The **`alt`(alternative) attribute** is used to describe the images in a webpage. The alt is important for screen readers and when the page is unable to load properly. The search engine equally uses it for indexing during search results.\n\n* When a search is made, the images on the webpage are found under the images category. These attributes help the ranking of your webpage. The image `title` and `alt` attributes are placed within an `\u003cimg\u003e` tag in the `\u003cbody\u003e` tag. The `alt` is usually descriptive. Check the code snippet below:\n\n\n","mdHtml":"\u003ch3\u003e\u003c/h3\u003e\n\u003ch4\u003e4. The image \u003ccode\u003ealt\u003c/code\u003e attribute\u003c/h4\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003eThe \u003cstrong\u003e\u003ccode\u003ealt\u003c/code\u003e(alternative) attribute\u003c/strong\u003e is used to describe the images in a webpage. The alt is important for screen readers and when the page is unable to load properly. The search engine equally uses it for indexing during search results.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eWhen a search is made, the images on the webpage are found under the images category. These attributes help the ranking of your webpage. The image \u003ccode\u003etitle\u003c/code\u003e and \u003ccode\u003ealt\u003c/code\u003e attributes are placed within an \u003ccode\u003e\u0026lt;img\u0026gt;\u003c/code\u003e tag in the \u003ccode\u003e\u0026lt;body\u0026gt;\u003c/code\u003e tag. The \u003ccode\u003ealt\u003c/code\u003e is usually descriptive. Check the code snippet below:\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n","cursorPosition":448,"comp_id":"BvFi1EuEGi67JFd2LvnoL"},"iteration":0,"hash":8,"saveVersion":2},{"type":"RunJS","mode":"edit","content":{"version":"11","filename":"","active":"html","jotted":{"pane":"html","height":null,"heightCodepanel":null,"showBlank":false,"hints":null,"hideResult":true,"hideHtml":false,"hideCss":true,"hideJs":true,"hideNav":false,"showBabelTransformPane":false,"codePlaygroundTemplate":"jottedTabs","showLineNumbers":true,"autoRun":true,"runOnLoad":false,"theme":"default","exercise":false,"showSolution":false,"caption":"","toggleState":{"result":true,"html":true,"css":true,"js":true},"readOnlyState":{"html":false,"css":false,"js":false},"solutionPanels":{"js":"","html":"","css":""},"panelsHighlightedLines":{"js":"","html":"","css":"","hiddenjs":""},"plugins":[{"name":"codemirror","options":{"lineNumbers":true}}],"files":[{"type":"html","content":"\u003chtml\u003e\r\n \u003chead\u003e\r\n \u003c/head\u003e\r\n \u003cbody\u003e\r\n \u003cimg src=\"./webpage.jpg\" title=\"webpage image\" alt=\"an image of a webpage showing search results\"/\u003e\r\n \u003c/body\u003e\r\n\u003c/html\u003e"},{"type":"js","content":"document.addEventListener(\"DOMContentLoaded\", function () {\r\n pTag = document.querySelector(\"div\");\r\n newVal = document.createElement(\"p\");\r\n newVal.innerHTML = 'Hello, Hello';\r\n pTag.appendChild(newVal);\r\n});\r\n\r\n// Async Tests Example\r\n/*\r\nwindow.onModulesLoaded = new Promise( function( resolve, reject ) {\r\n setTimeout(function() {\r\n pTag = document.querySelector(\"div\");\r\n pTag.innerHTML = '';\r\n newVal = document.createElement(\"p\");\r\n newVal.innerHTML = 'Hello World';\r\n pTag.appendChild(newVal);\r\n resolve();\r\n }, 100)\r\n});\r\n*/"},{"type":"hiddenjs","content":"\n\n"},{"type":"exercise","content":"var TestResult = function() {\r\n this.succeeded = false;\r\n this.reason = \"\";\r\n this.input = \"\";\r\n this.expected_output = \"\";\r\n this.actual_output = \"\";\r\n};\r\n\r\nvar executeTests = function(\r\n userJsCode,\r\n userCssCode,\r\n userHtmlCode,\r\n userHtmlPage\r\n) {\r\n var results = [];\r\n\r\n const jsdom = require(\"jsdom\");\r\n const { JSDOM } = jsdom;\r\n const dom2 = new JSDOM(userHtmlPage, { runScripts: \"dangerously\" });\r\n\r\n const pTag = dom2.window.document.querySelector(\"p\");\r\n\r\n const result = new TestResult();\r\n result.expected_output = \"Hello World\";\r\n result.input = \"Html page\";\r\n\r\n if (!pTag) {\r\n result.actual_output = \"null\";\r\n result.succeeded = false;\r\n result.reason = \"No p tag found\";\r\n } else {\r\n const pTagText = pTag ? pTag.textContent : \"\";\r\n result.actual_output = pTagText;\r\n if (pTagText.trim() != \"Hello World\") {\r\n result.reason = \"Expected output (Hello World in a p tag) did not match\";\r\n result.succeeded = false;\r\n } else {\r\n result.succeeded = true;\r\n result.reason = \"Found p tag with Hello World\";\r\n }\r\n }\r\n\r\n results.push(result);\r\n\r\n return results;\r\n};\r\n\r\n// Async Tests Example\r\n/*\r\nvar executeTestsAsync = function(\r\n userJsCode,\r\n userCssCode,\r\n userHtmlCode,\r\n userHtmlPage\r\n) {\r\n var results = [];\r\n return new Promise(resolve =\u003e {\r\n\r\n const jsdom = require(\"jsdom\");\r\n const { JSDOM } = jsdom;\r\n const dom2 = new JSDOM(userHtmlPage, { runScripts: \"dangerously\" });\r\n\r\n if (!dom2.window.onModulesLoaded) {\r\n console.log(\"window.onModulesLoaded not found!\");\r\n \tresolve(results);\r\n }\r\n dom2.window.onModulesLoaded.then(()=\u003e{\r\n const pTag = dom2.window.document.querySelector(\"p\");\r\n\r\n const result = new TestResult();\r\n result.expected_output = \"Hello World\";\r\n result.input = \"Html page\";\r\n\r\n if (!pTag) {\r\n result.actual_output = \"null\";\r\n result.succeeded = false;\r\n result.reason = \"No p tag found\";\r\n } else {\r\n const pTagText = pTag ? pTag.textContent : \"\";\r\n result.actual_output = pTagText;\r\n if (pTagText.trim() != \"Hello World\") {\r\n result.reason = \"Expected output (Hello World in a p tag) did not match\";\r\n result.succeeded = false;\r\n } else {\r\n result.succeeded = true;\r\n result.reason = \"Found p tag with Hello World\";\r\n }\r\n }\r\n\r\n results.push(result);\r\n resolve(results);\r\n });\r\n });\r\n};\r\n*/"},{"type":"css","content":""}]},"selectedApiKeys":{},"comp_id":"LnLDt6whzMWXlMFYiru9O"},"iteration":0,"hash":9,"saveVersion":2},{"type":"MarkdownEditor","mode":"edit","content":{"version":"2.0","text":"### \n#### 5. The `no-follow` link attribute\n\n* A **`no-follow` tag** is an attribute that tells the search engine not to count points for the inbound links on the page. This is to help stop spammers from posting irrelevant links just to get SERP point. Simply add a `no-follow` attribute to the inbound links. Check the code below: ","mdHtml":"\u003ch3\u003e\u003c/h3\u003e\n\u003ch4\u003e5. The \u003ccode\u003eno-follow\u003c/code\u003e link attribute\u003c/h4\u003e\n\u003cul\u003e\n\u003cli\u003eA \u003cstrong\u003e\u003ccode\u003eno-follow\u003c/code\u003e tag\u003c/strong\u003e is an attribute that tells the search engine not to count points for the inbound links on the page. This is to help stop spammers from posting irrelevant links just to get SERP point. Simply add a \u003ccode\u003eno-follow\u003c/code\u003e attribute to the inbound links. Check the code below:\u003c/li\u003e\n\u003c/ul\u003e\n","cursorPosition":36,"comp_id":"JjyG3XOeCBpNrcm-UXmmd"},"iteration":0,"hash":10,"saveVersion":2},{"type":"RunJS","mode":"edit","content":{"version":"11","filename":"","active":"html","jotted":{"pane":"html","height":null,"heightCodepanel":null,"showBlank":false,"hints":null,"hideResult":true,"hideHtml":false,"hideCss":true,"hideJs":true,"hideNav":false,"showBabelTransformPane":false,"codePlaygroundTemplate":"jottedTabs","showLineNumbers":true,"autoRun":true,"runOnLoad":false,"theme":"default","exercise":false,"showSolution":false,"caption":"","toggleState":{"result":true,"html":true,"css":true,"js":true},"readOnlyState":{"html":false,"css":false,"js":false},"solutionPanels":{"js":"","html":"","css":""},"panelsHighlightedLines":{"js":"","html":"","css":"","hiddenjs":""},"plugins":[{"name":"codemirror","options":{"lineNumbers":true}}],"files":[{"type":"html","content":"\u003chtml\u003e\r\n \u003chead\u003e\r\n \u003c/head\u003e\r\n \u003cbody\u003e\r\n \u003ca href=”http://www.siteexample.com/” rel=”nofollow”\u003eLink Text\u003c/a\u003e\r\n \u003c/body\u003e\r\n\u003c/html\u003e"},{"type":"js","content":"document.addEventListener(\"DOMContentLoaded\", function () {\r\n pTag = document.querySelector(\"div\");\r\n newVal = document.createElement(\"p\");\r\n newVal.innerHTML = 'Hello, Hello';\r\n pTag.appendChild(newVal);\r\n});\r\n\r\n// Async Tests Example\r\n/*\r\nwindow.onModulesLoaded = new Promise( function( resolve, reject ) {\r\n setTimeout(function() {\r\n pTag = document.querySelector(\"div\");\r\n pTag.innerHTML = '';\r\n newVal = document.createElement(\"p\");\r\n newVal.innerHTML = 'Hello World';\r\n pTag.appendChild(newVal);\r\n resolve();\r\n }, 100)\r\n});\r\n*/"},{"type":"hiddenjs","content":"\n\n"},{"type":"exercise","content":"var TestResult = function() {\r\n this.succeeded = false;\r\n this.reason = \"\";\r\n this.input = \"\";\r\n this.expected_output = \"\";\r\n this.actual_output = \"\";\r\n};\r\n\r\nvar executeTests = function(\r\n userJsCode,\r\n userCssCode,\r\n userHtmlCode,\r\n userHtmlPage\r\n) {\r\n var results = [];\r\n\r\n const jsdom = require(\"jsdom\");\r\n const { JSDOM } = jsdom;\r\n const dom2 = new JSDOM(userHtmlPage, { runScripts: \"dangerously\" });\r\n\r\n const pTag = dom2.window.document.querySelector(\"p\");\r\n\r\n const result = new TestResult();\r\n result.expected_output = \"Hello World\";\r\n result.input = \"Html page\";\r\n\r\n if (!pTag) {\r\n result.actual_output = \"null\";\r\n result.succeeded = false;\r\n result.reason = \"No p tag found\";\r\n } else {\r\n const pTagText = pTag ? pTag.textContent : \"\";\r\n result.actual_output = pTagText;\r\n if (pTagText.trim() != \"Hello World\") {\r\n result.reason = \"Expected output (Hello World in a p tag) did not match\";\r\n result.succeeded = false;\r\n } else {\r\n result.succeeded = true;\r\n result.reason = \"Found p tag with Hello World\";\r\n }\r\n }\r\n\r\n results.push(result);\r\n\r\n return results;\r\n};\r\n\r\n// Async Tests Example\r\n/*\r\nvar executeTestsAsync = function(\r\n userJsCode,\r\n userCssCode,\r\n userHtmlCode,\r\n userHtmlPage\r\n) {\r\n var results = [];\r\n return new Promise(resolve =\u003e {\r\n\r\n const jsdom = require(\"jsdom\");\r\n const { JSDOM } = jsdom;\r\n const dom2 = new JSDOM(userHtmlPage, { runScripts: \"dangerously\" });\r\n\r\n if (!dom2.window.onModulesLoaded) {\r\n console.log(\"window.onModulesLoaded not found!\");\r\n \tresolve(results);\r\n }\r\n dom2.window.onModulesLoaded.then(()=\u003e{\r\n const pTag = dom2.window.document.querySelector(\"p\");\r\n\r\n const result = new TestResult();\r\n result.expected_output = \"Hello World\";\r\n result.input = \"Html page\";\r\n\r\n if (!pTag) {\r\n result.actual_output = \"null\";\r\n result.succeeded = false;\r\n result.reason = \"No p tag found\";\r\n } else {\r\n const pTagText = pTag ? pTag.textContent : \"\";\r\n result.actual_output = pTagText;\r\n if (pTagText.trim() != \"Hello World\") {\r\n result.reason = \"Expected output (Hello World in a p tag) did not match\";\r\n result.succeeded = false;\r\n } else {\r\n result.succeeded = true;\r\n result.reason = \"Found p tag with Hello World\";\r\n }\r\n }\r\n\r\n results.push(result);\r\n resolve(results);\r\n });\r\n });\r\n};\r\n*/"},{"type":"css","content":""}]},"selectedApiKeys":{},"comp_id":"zASdruNvz5iTrB9BRutjk"},"iteration":0,"hash":11,"saveVersion":1},{"type":"MarkdownEditor","mode":"edit","content":{"version":"2.0","text":"###\n#### 6. The anchor `\u003ca\u003e` tag text\n\n* The **anchor tag text** is the text added to a link to describe what the link is about. It is good for SEO because it helps the search engine recognize what the link is about. Check the code snippet below:\n","mdHtml":"\u003ch3\u003e\u003c/h3\u003e\n\u003ch4\u003e6. The anchor \u003ccode\u003e\u0026lt;a\u0026gt;\u003c/code\u003e tag text\u003c/h4\u003e\n\u003cul\u003e\n\u003cli\u003eThe \u003cstrong\u003eanchor tag text\u003c/strong\u003e is the text added to a link to describe what the link is about. It is good for SEO because it helps the search engine recognize what the link is about. Check the code snippet below:\u003c/li\u003e\n\u003c/ul\u003e\n","cursorPosition":234,"comp_id":"nNUUdxy-5Pr3AngzmPVJl"},"iteration":0,"hash":12,"saveVersion":1},{"type":"RunJS","mode":"edit","content":{"version":"11","filename":"","active":"html","jotted":{"pane":"html","height":null,"heightCodepanel":null,"showBlank":false,"hints":null,"hideResult":true,"hideHtml":false,"hideCss":true,"hideJs":true,"hideNav":false,"showBabelTransformPane":false,"codePlaygroundTemplate":"jottedTabs","showLineNumbers":true,"autoRun":true,"runOnLoad":false,"theme":"default","exercise":false,"showSolution":false,"caption":"","toggleState":{"result":true,"html":true,"css":true,"js":true},"readOnlyState":{"html":false,"css":false,"js":false},"solutionPanels":{"js":"","html":"","css":""},"panelsHighlightedLines":{"js":"","html":"","css":"","hiddenjs":""},"plugins":[{"name":"codemirror","options":{"lineNumbers":true}}],"files":[{"type":"html","content":"\u003chtml\u003e\r\n \u003chead\u003e\r\n \u003c/head\u003e\r\n \u003cbody\u003e\r\n \u003ca href=\"http://examplewebsite.com/\" rel=\"nofollow\"\u003eyour anchor text\u003c/a\u003e\r\n \u003c/body\u003e\r\n\u003c/html\u003e"},{"type":"js","content":"document.addEventListener(\"DOMContentLoaded\", function () {\r\n pTag = document.querySelector(\"div\");\r\n newVal = document.createElement(\"p\");\r\n newVal.innerHTML = 'Hello, Hello';\r\n pTag.appendChild(newVal);\r\n});\r\n\r\n// Async Tests Example\r\n/*\r\nwindow.onModulesLoaded = new Promise( function( resolve, reject ) {\r\n setTimeout(function() {\r\n pTag = document.querySelector(\"div\");\r\n pTag.innerHTML = '';\r\n newVal = document.createElement(\"p\");\r\n newVal.innerHTML = 'Hello World';\r\n pTag.appendChild(newVal);\r\n resolve();\r\n }, 100)\r\n});\r\n*/"},{"type":"hiddenjs","content":"\n\n"},{"type":"exercise","content":"var TestResult = function() {\r\n this.succeeded = false;\r\n this.reason = \"\";\r\n this.input = \"\";\r\n this.expected_output = \"\";\r\n this.actual_output = \"\";\r\n};\r\n\r\nvar executeTests = function(\r\n userJsCode,\r\n userCssCode,\r\n userHtmlCode,\r\n userHtmlPage\r\n) {\r\n var results = [];\r\n\r\n const jsdom = require(\"jsdom\");\r\n const { JSDOM } = jsdom;\r\n const dom2 = new JSDOM(userHtmlPage, { runScripts: \"dangerously\" });\r\n\r\n const pTag = dom2.window.document.querySelector(\"p\");\r\n\r\n const result = new TestResult();\r\n result.expected_output = \"Hello World\";\r\n result.input = \"Html page\";\r\n\r\n if (!pTag) {\r\n result.actual_output = \"null\";\r\n result.succeeded = false;\r\n result.reason = \"No p tag found\";\r\n } else {\r\n const pTagText = pTag ? pTag.textContent : \"\";\r\n result.actual_output = pTagText;\r\n if (pTagText.trim() != \"Hello World\") {\r\n result.reason = \"Expected output (Hello World in a p tag) did not match\";\r\n result.succeeded = false;\r\n } else {\r\n result.succeeded = true;\r\n result.reason = \"Found p tag with Hello World\";\r\n }\r\n }\r\n\r\n results.push(result);\r\n\r\n return results;\r\n};\r\n\r\n// Async Tests Example\r\n/*\r\nvar executeTestsAsync = function(\r\n userJsCode,\r\n userCssCode,\r\n userHtmlCode,\r\n userHtmlPage\r\n) {\r\n var results = [];\r\n return new Promise(resolve =\u003e {\r\n\r\n const jsdom = require(\"jsdom\");\r\n const { JSDOM } = jsdom;\r\n const dom2 = new JSDOM(userHtmlPage, { runScripts: \"dangerously\" });\r\n\r\n if (!dom2.window.onModulesLoaded) {\r\n console.log(\"window.onModulesLoaded not found!\");\r\n \tresolve(results);\r\n }\r\n dom2.window.onModulesLoaded.then(()=\u003e{\r\n const pTag = dom2.window.document.querySelector(\"p\");\r\n\r\n const result = new TestResult();\r\n result.expected_output = \"Hello World\";\r\n result.input = \"Html page\";\r\n\r\n if (!pTag) {\r\n result.actual_output = \"null\";\r\n result.succeeded = false;\r\n result.reason = \"No p tag found\";\r\n } else {\r\n const pTagText = pTag ? pTag.textContent : \"\";\r\n result.actual_output = pTagText;\r\n if (pTagText.trim() != \"Hello World\") {\r\n result.reason = \"Expected output (Hello World in a p tag) did not match\";\r\n result.succeeded = false;\r\n } else {\r\n result.succeeded = true;\r\n result.reason = \"Found p tag with Hello World\";\r\n }\r\n }\r\n\r\n results.push(result);\r\n resolve(results);\r\n });\r\n });\r\n};\r\n*/"},{"type":"css","content":""}]},"selectedApiKeys":{},"comp_id":"vln35NpnS2DoEU4Y616BR"},"iteration":0,"hash":13,"saveVersion":1},{"type":"MarkdownEditor","mode":"edit","content":{"version":"2.0","text":"###\n#### 7. The `canonical` tag\n* The **`canonical` tag** helps to tell the search engine to rank the page where this tag is placed as the primary page from all look-alike pages.","mdHtml":"\u003ch3\u003e\u003c/h3\u003e\n\u003ch4\u003e7. The \u003ccode\u003ecanonical\u003c/code\u003e tag\u003c/h4\u003e\n\u003cul\u003e\n\u003cli\u003eThe \u003cstrong\u003e\u003ccode\u003ecanonical\u003c/code\u003e tag\u003c/strong\u003e helps to tell the search engine to rank the page where this tag is placed as the primary page from all look-alike pages.\u003c/li\u003e\n\u003c/ul\u003e\n","cursorPosition":{"line":0,"ch":0},"comp_id":"rROZhO-wsBQT9MAdVlEmh"},"iteration":0,"hash":14,"saveVersion":2},{"type":"RunJS","mode":"edit","content":{"version":"11","filename":"","active":"html","jotted":{"pane":"html","height":null,"heightCodepanel":null,"showBlank":false,"hints":null,"hideResult":true,"hideHtml":false,"hideCss":true,"hideJs":true,"hideNav":false,"showBabelTransformPane":false,"codePlaygroundTemplate":"jottedTabs","showLineNumbers":true,"autoRun":true,"runOnLoad":false,"theme":"default","exercise":false,"showSolution":false,"caption":"","toggleState":{"result":true,"html":true,"css":true,"js":true},"readOnlyState":{"html":false,"css":false,"js":false},"solutionPanels":{"js":"","html":"","css":""},"panelsHighlightedLines":{"js":"","html":"","css":"","hiddenjs":""},"plugins":[{"name":"codemirror","options":{"lineNumbers":true}}],"files":[{"type":"html","content":"\u003chtml\u003e\r\n \u003chead\u003e\r\n \u003c/head\u003e\r\n \u003cbody\u003e\r\n \u003clink rel=\"canonical\" href=\"https://examplewebsite.com/\"\u003e\r\n \u003c/body\u003e\r\n\u003c/html\u003e"},{"type":"js","content":"document.addEventListener(\"DOMContentLoaded\", function () {\r\n pTag = document.querySelector(\"div\");\r\n newVal = document.createElement(\"p\");\r\n newVal.innerHTML = 'Hello, Hello';\r\n pTag.appendChild(newVal);\r\n});\r\n\r\n// Async Tests Example\r\n/*\r\nwindow.onModulesLoaded = new Promise( function( resolve, reject ) {\r\n setTimeout(function() {\r\n pTag = document.querySelector(\"div\");\r\n pTag.innerHTML = '';\r\n newVal = document.createElement(\"p\");\r\n newVal.innerHTML = 'Hello World';\r\n pTag.appendChild(newVal);\r\n resolve();\r\n }, 100)\r\n});\r\n*/"},{"type":"hiddenjs","content":"\n\n"},{"type":"exercise","content":"var TestResult = function() {\r\n this.succeeded = false;\r\n this.reason = \"\";\r\n this.input = \"\";\r\n this.expected_output = \"\";\r\n this.actual_output = \"\";\r\n};\r\n\r\nvar executeTests = function(\r\n userJsCode,\r\n userCssCode,\r\n userHtmlCode,\r\n userHtmlPage\r\n) {\r\n var results = [];\r\n\r\n const jsdom = require(\"jsdom\");\r\n const { JSDOM } = jsdom;\r\n const dom2 = new JSDOM(userHtmlPage, { runScripts: \"dangerously\" });\r\n\r\n const pTag = dom2.window.document.querySelector(\"p\");\r\n\r\n const result = new TestResult();\r\n result.expected_output = \"Hello World\";\r\n result.input = \"Html page\";\r\n\r\n if (!pTag) {\r\n result.actual_output = \"null\";\r\n result.succeeded = false;\r\n result.reason = \"No p tag found\";\r\n } else {\r\n const pTagText = pTag ? pTag.textContent : \"\";\r\n result.actual_output = pTagText;\r\n if (pTagText.trim() != \"Hello World\") {\r\n result.reason = \"Expected output (Hello World in a p tag) did not match\";\r\n result.succeeded = false;\r\n } else {\r\n result.succeeded = true;\r\n result.reason = \"Found p tag with Hello World\";\r\n }\r\n }\r\n\r\n results.push(result);\r\n\r\n return results;\r\n};\r\n\r\n// Async Tests Example\r\n/*\r\nvar executeTestsAsync = function(\r\n userJsCode,\r\n userCssCode,\r\n userHtmlCode,\r\n userHtmlPage\r\n) {\r\n var results = [];\r\n return new Promise(resolve =\u003e {\r\n\r\n const jsdom = require(\"jsdom\");\r\n const { JSDOM } = jsdom;\r\n const dom2 = new JSDOM(userHtmlPage, { runScripts: \"dangerously\" });\r\n\r\n if (!dom2.window.onModulesLoaded) {\r\n console.log(\"window.onModulesLoaded not found!\");\r\n \tresolve(results);\r\n }\r\n dom2.window.onModulesLoaded.then(()=\u003e{\r\n const pTag = dom2.window.document.querySelector(\"p\");\r\n\r\n const result = new TestResult();\r\n result.expected_output = \"Hello World\";\r\n result.input = \"Html page\";\r\n\r\n if (!pTag) {\r\n result.actual_output = \"null\";\r\n result.succeeded = false;\r\n result.reason = \"No p tag found\";\r\n } else {\r\n const pTagText = pTag ? pTag.textContent : \"\";\r\n result.actual_output = pTagText;\r\n if (pTagText.trim() != \"Hello World\") {\r\n result.reason = \"Expected output (Hello World in a p tag) did not match\";\r\n result.succeeded = false;\r\n } else {\r\n result.succeeded = true;\r\n result.reason = \"Found p tag with Hello World\";\r\n }\r\n }\r\n\r\n results.push(result);\r\n resolve(results);\r\n });\r\n });\r\n};\r\n*/"},{"type":"css","content":""}]},"selectedApiKeys":{},"comp_id":"9ox9BczAPsSx9kjSR4NsB"},"iteration":0,"hash":15,"saveVersion":2},{"type":"MarkdownEditor","mode":"edit","content":{"version":"2.0","text":"##\n### Conclusion\nUsing HTML tags that are SEO friendly helps your page rank more on SERP. I will advise you not to take them for granted even if you have placed your page on adverts. Hope this article has been helpful.","mdHtml":"\u003ch2\u003e\u003c/h2\u003e\n\u003ch3\u003eConclusion\u003c/h3\u003e\n\u003cp\u003eUsing HTML tags that are SEO friendly helps your page rank more on SERP. I will advise you not to take them for granted even if you have placed your page on adverts. Hope this article has been helpful.\u003c/p\u003e\n","cursorPosition":{"line":0,"ch":0},"comp_id":"QJBxcGNT4Pm-q23awsjuZ"},"iteration":0,"hash":16,"saveVersion":4}],"url":"html-tags-for-search-engine-optimization-seo","docker":{"container":{"file":{},"imageName":"","buildStatusUrl":"","buildLogUrl":""},"jobs":[],"envs":[],"version":3,"loaded":true},"canonical_url":"","darkModeContent":[{"type":"MarkdownEditor","content":{"version":"2.0","text":"**HTML tags** for search engine optimization help to increase the chances of a webpage appearing in search results. These tags help the search engine to find and read the contents of the page and make them available during a search. They also display parts of the webpage that are relevant to the search engine during a search.\n\n## \n### HTML tags for search engine optimization \nNow we will discuss the semantic HTML tags that help search engine optimization. \n\n### \n#### 1. The `\u003ctitle\u003e` tag\n\n* The **`\u003ctitle\u003e` tag** is one of the most important tags on a webpage. It is located at the `\u003chead\u003e` tag. This is the tag that describes the content of a webpage. The `\u003ctitle\u003e` tag helps search keywords to the search engine when a search is made. It is the text that shows up on the tabs of the browser. Check the image illustration below:\n![](/api/edpresso/shot/5249004872400896/image/6270364436398080)\n\n* The `\u003ctitle\u003e` tag is also used to generate the Search Engine Results Page(SERP). When a search matches the top keywords in the title, that page is likely to appear on the search results. Check the image below:\n![](/api/edpresso/shot/5249004872400896/image/5087084538232832)\n\n* The `\u003ctitle\u003e` tag is placed at the `\u003chead\u003e` tag when coding a webpage. Check the code snippet below:","mdHtml":"\u003cp\u003e\u003cstrong\u003eHTML tags\u003c/strong\u003e for search engine optimization help to increase the chances of a webpage appearing in search results. These tags help the search engine to find and read the contents of the page and make them available during a search. They also display parts of the webpage that are relevant to the search engine during a search.\u003c/p\u003e\n\u003ch2\u003e\u003c/h2\u003e\n\u003ch3\u003eHTML tags for search engine optimization\u003c/h3\u003e\n\u003cp\u003eNow we will discuss the semantic HTML tags that help search engine optimization.\u003c/p\u003e\n\u003ch3\u003e\u003c/h3\u003e\n\u003ch4\u003e1. The \u003ccode\u003e\u0026lt;title\u0026gt;\u003c/code\u003e tag\u003c/h4\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003eThe \u003cstrong\u003e\u003ccode\u003e\u0026lt;title\u0026gt;\u003c/code\u003e tag\u003c/strong\u003e is one of the most important tags on a webpage. It is located at the \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e tag. This is the tag that describes the content of a webpage. The \u003ccode\u003e\u0026lt;title\u0026gt;\u003c/code\u003e tag helps search keywords to the search engine when a search is made. It is the text that shows up on the tabs of the browser. Check the image illustration below:\n\u003cimg src=\"/api/edpresso/shot/5249004872400896/image/6270364436398080\" alt=\"\" /\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eThe \u003ccode\u003e\u0026lt;title\u0026gt;\u003c/code\u003e tag is also used to generate the Search Engine Results Page(SERP). When a search matches the top keywords in the title, that page is likely to appear on the search results. Check the image below:\n\u003cimg src=\"/api/edpresso/shot/5249004872400896/image/5087084538232832\" alt=\"\" /\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eThe \u003ccode\u003e\u0026lt;title\u0026gt;\u003c/code\u003e tag is placed at the \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e tag when coding a webpage. Check the code snippet below:\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n","cursorPosition":402,"comp_id":"ndE3XWHBWh86x8wyGyuww"},"iteration":3,"hash":1,"saveVersion":15},{"type":"RunJS","mode":"edit","content":{"version":"11","filename":"","active":"html","jotted":{"pane":"html","height":null,"heightCodepanel":null,"showBlank":false,"hints":null,"hideResult":true,"hideHtml":false,"hideCss":true,"hideJs":true,"hideNav":false,"showBabelTransformPane":false,"codePlaygroundTemplate":"jottedTabs","showLineNumbers":true,"autoRun":true,"runOnLoad":false,"theme":"default","exercise":false,"showSolution":false,"caption":"","toggleState":{"result":true,"html":true,"css":true,"js":true},"readOnlyState":{"html":false,"css":false,"js":false},"solutionPanels":{"js":"","html":"","css":""},"panelsHighlightedLines":{"js":"","html":"","css":"","hiddenjs":""},"plugins":[{"name":"codemirror","options":{"lineNumbers":true}}],"files":[{"type":"html","content":"\u003chtml\u003e\r\n \u003chead\u003e\r\n \u003ctitle\u003eHTML tags for search engine optimization\u003c/title\u003e\r\n \u003c/head\u003e\r\n \u003cbody\u003e\r\n \u003cdiv id=\"content\"/\u003e\r\n \u003c/body\u003e\r\n\u003c/html\u003e"},{"type":"js","content":"document.addEventListener(\"DOMContentLoaded\", function () {\r\n pTag = document.querySelector(\"div\");\r\n newVal = document.createElement(\"p\");\r\n newVal.innerHTML = 'Hello, Hello';\r\n pTag.appendChild(newVal);\r\n});\r\n\r\n// Async Tests Example\r\n/*\r\nwindow.onModulesLoaded = new Promise( function( resolve, reject ) {\r\n setTimeout(function() {\r\n pTag = document.querySelector(\"div\");\r\n pTag.innerHTML = '';\r\n newVal = document.createElement(\"p\");\r\n newVal.innerHTML = 'Hello World';\r\n pTag.appendChild(newVal);\r\n resolve();\r\n }, 100)\r\n});\r\n*/"},{"type":"hiddenjs","content":"\n\n"},{"type":"exercise","content":"var TestResult = function() {\r\n this.succeeded = false;\r\n this.reason = \"\";\r\n this.input = \"\";\r\n this.expected_output = \"\";\r\n this.actual_output = \"\";\r\n};\r\n\r\nvar executeTests = function(\r\n userJsCode,\r\n userCssCode,\r\n userHtmlCode,\r\n userHtmlPage\r\n) {\r\n var results = [];\r\n\r\n const jsdom = require(\"jsdom\");\r\n const { JSDOM } = jsdom;\r\n const dom2 = new JSDOM(userHtmlPage, { runScripts: \"dangerously\" });\r\n\r\n const pTag = dom2.window.document.querySelector(\"p\");\r\n\r\n const result = new TestResult();\r\n result.expected_output = \"Hello World\";\r\n result.input = \"Html page\";\r\n\r\n if (!pTag) {\r\n result.actual_output = \"null\";\r\n result.succeeded = false;\r\n result.reason = \"No p tag found\";\r\n } else {\r\n const pTagText = pTag ? pTag.textContent : \"\";\r\n result.actual_output = pTagText;\r\n if (pTagText.trim() != \"Hello World\") {\r\n result.reason = \"Expected output (Hello World in a p tag) did not match\";\r\n result.succeeded = false;\r\n } else {\r\n result.succeeded = true;\r\n result.reason = \"Found p tag with Hello World\";\r\n }\r\n }\r\n\r\n results.push(result);\r\n\r\n return results;\r\n};\r\n\r\n// Async Tests Example\r\n/*\r\nvar executeTestsAsync = function(\r\n userJsCode,\r\n userCssCode,\r\n userHtmlCode,\r\n userHtmlPage\r\n) {\r\n var results = [];\r\n return new Promise(resolve =\u003e {\r\n\r\n const jsdom = require(\"jsdom\");\r\n const { JSDOM } = jsdom;\r\n const dom2 = new JSDOM(userHtmlPage, { runScripts: \"dangerously\" });\r\n\r\n if (!dom2.window.onModulesLoaded) {\r\n console.log(\"window.onModulesLoaded not found!\");\r\n \tresolve(results);\r\n }\r\n dom2.window.onModulesLoaded.then(()=\u003e{\r\n const pTag = dom2.window.document.querySelector(\"p\");\r\n\r\n const result = new TestResult();\r\n result.expected_output = \"Hello World\";\r\n result.input = \"Html page\";\r\n\r\n if (!pTag) {\r\n result.actual_output = \"null\";\r\n result.succeeded = false;\r\n result.reason = \"No p tag found\";\r\n } else {\r\n const pTagText = pTag ? pTag.textContent : \"\";\r\n result.actual_output = pTagText;\r\n if (pTagText.trim() != \"Hello World\") {\r\n result.reason = \"Expected output (Hello World in a p tag) did not match\";\r\n result.succeeded = false;\r\n } else {\r\n result.succeeded = true;\r\n result.reason = \"Found p tag with Hello World\";\r\n }\r\n }\r\n\r\n results.push(result);\r\n resolve(results);\r\n });\r\n });\r\n};\r\n*/"},{"type":"css","content":""}]},"selectedApiKeys":{},"comp_id":"009gqGKqiqIikmfeMOZWg"},"iteration":0,"hash":3,"saveVersion":1},{"type":"MarkdownEditor","mode":"edit","content":{"version":"2.0","text":"\n\u003ctitle\u003e\n\u003ch1\u003e to \u003ch6\u003e\n\u003cp\u003e\n\u003csection\u003e\n\u003carticle\u003e\n\u003cnav\u003e\n\u003cfooter\u003e\n\u003cform\u003e\n\u003ctable\u003e\n\n","mdHtml":"\u003ctitle\u003e\n\u003ch1\u003e to \u003ch6\u003e\n\u003cp\u003e\n\u003csection\u003e\n\u003carticle\u003e\n\u003cnav\u003e\n\u003cfooter\u003e\n\u003cform\u003e\n\u003ctable\u003e\n","cursorPosition":{"line":0,"ch":0},"comp_id":"_JFAa8zhDr7krTRw2cwOe"},"iteration":0,"hash":2,"saveVersion":1},{"type":"MarkdownEditor","mode":"edit","content":{"version":"2.0","text":"###\n#### 2. The `\u003cmeta description\u003e` tags: \n\n* The **`\u003cmeta description\u003e` tag** is used to give the page more description. It describes in few words what the reader can expect to see on the page. If the right keywords are present in the `\u003cmeta description\u003e` tag and they correspond with the title of the page, then there is a high chance of ranking in SERP. On the SERP, the `\u003cmeta description\u003e` appears immediately after the title. Check the image below:\n\n![](/api/edpresso/shot/5249004872400896/image/6700030179672064)\n\n* In your HTML code, this `\u003cmeta tag\u003e` is also placed at the `\u003chead\u003e`. Check the HTML code below: \n\n\n\n\n","mdHtml":"\u003ch3\u003e\u003c/h3\u003e\n\u003ch4\u003e2. The \u003ccode\u003e\u0026lt;meta description\u0026gt;\u003c/code\u003e tags:\u003c/h4\u003e\n\u003cul\u003e\n\u003cli\u003eThe \u003cstrong\u003e\u003ccode\u003e\u0026lt;meta description\u0026gt;\u003c/code\u003e tag\u003c/strong\u003e is used to give the page more description. It describes in few words what the reader can expect to see on the page. If the right keywords are present in the \u003ccode\u003e\u0026lt;meta description\u0026gt;\u003c/code\u003e tag and they correspond with the title of the page, then there is a high chance of ranking in SERP. On the SERP, the \u003ccode\u003e\u0026lt;meta description\u0026gt;\u003c/code\u003e appears immediately after the title. Check the image below:\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003cimg src=\"/api/edpresso/shot/5249004872400896/image/6700030179672064\" alt=\"\" /\u003e\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eIn your HTML code, this \u003ccode\u003e\u0026lt;meta tag\u0026gt;\u003c/code\u003e is also placed at the \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e. Check the HTML code below:\u003c/li\u003e\n\u003c/ul\u003e\n","cursorPosition":550,"comp_id":"a4Qm1o-XN_LskmHuwwzIg"},"iteration":0,"hash":4,"saveVersion":5},{"type":"RunJS","mode":"edit","content":{"version":"11","filename":"","active":"html","jotted":{"pane":"html","height":null,"heightCodepanel":null,"showBlank":false,"hints":null,"hideResult":true,"hideHtml":false,"hideCss":true,"hideJs":true,"hideNav":false,"showBabelTransformPane":false,"codePlaygroundTemplate":"jottedTabs","showLineNumbers":true,"autoRun":true,"runOnLoad":false,"theme":"default","exercise":false,"showSolution":false,"caption":"","toggleState":{"result":true,"html":true,"css":true,"js":true},"readOnlyState":{"html":false,"css":false,"js":false},"solutionPanels":{"js":"","html":"","css":""},"panelsHighlightedLines":{"js":"","html":"","css":"","hiddenjs":""},"plugins":[{"name":"codemirror","options":{"lineNumbers":true}}],"files":[{"type":"html","content":"\u003chtml\u003e\r\n \u003chead\u003e\r\n \u003cmeta description=\"name\" content=\"Html tags that helps search engine optimization and ranks your page among the search engine results pages\" /\u003e\r\n \u003c/head\u003e\r\n \u003cbody\u003e\r\n \u003cdiv id=\"content\"/\u003e\r\n \u003c/body\u003e\r\n\u003c/html\u003e"},{"type":"js","content":"document.addEventListener(\"DOMContentLoaded\", function () {\r\n pTag = document.querySelector(\"div\");\r\n newVal = document.createElement(\"p\");\r\n newVal.innerHTML = 'Hello, Hello';\r\n pTag.appendChild(newVal);\r\n});\r\n\r\n// Async Tests Example\r\n/*\r\nwindow.onModulesLoaded = new Promise( function( resolve, reject ) {\r\n setTimeout(function() {\r\n pTag = document.querySelector(\"div\");\r\n pTag.innerHTML = '';\r\n newVal = document.createElement(\"p\");\r\n newVal.innerHTML = 'Hello World';\r\n pTag.appendChild(newVal);\r\n resolve();\r\n }, 100)\r\n});\r\n*/"},{"type":"hiddenjs","content":"\n\n"},{"type":"exercise","content":"var TestResult = function() {\r\n this.succeeded = false;\r\n this.reason = \"\";\r\n this.input = \"\";\r\n this.expected_output = \"\";\r\n this.actual_output = \"\";\r\n};\r\n\r\nvar executeTests = function(\r\n userJsCode,\r\n userCssCode,\r\n userHtmlCode,\r\n userHtmlPage\r\n) {\r\n var results = [];\r\n\r\n const jsdom = require(\"jsdom\");\r\n const { JSDOM } = jsdom;\r\n const dom2 = new JSDOM(userHtmlPage, { runScripts: \"dangerously\" });\r\n\r\n const pTag = dom2.window.document.querySelector(\"p\");\r\n\r\n const result = new TestResult();\r\n result.expected_output = \"Hello World\";\r\n result.input = \"Html page\";\r\n\r\n if (!pTag) {\r\n result.actual_output = \"null\";\r\n result.succeeded = false;\r\n result.reason = \"No p tag found\";\r\n } else {\r\n const pTagText = pTag ? pTag.textContent : \"\";\r\n result.actual_output = pTagText;\r\n if (pTagText.trim() != \"Hello World\") {\r\n result.reason = \"Expected output (Hello World in a p tag) did not match\";\r\n result.succeeded = false;\r\n } else {\r\n result.succeeded = true;\r\n result.reason = \"Found p tag with Hello World\";\r\n }\r\n }\r\n\r\n results.push(result);\r\n\r\n return results;\r\n};\r\n\r\n// Async Tests Example\r\n/*\r\nvar executeTestsAsync = function(\r\n userJsCode,\r\n userCssCode,\r\n userHtmlCode,\r\n userHtmlPage\r\n) {\r\n var results = [];\r\n return new Promise(resolve =\u003e {\r\n\r\n const jsdom = require(\"jsdom\");\r\n const { JSDOM } = jsdom;\r\n const dom2 = new JSDOM(userHtmlPage, { runScripts: \"dangerously\" });\r\n\r\n if (!dom2.window.onModulesLoaded) {\r\n console.log(\"window.onModulesLoaded not found!\");\r\n \tresolve(results);\r\n }\r\n dom2.window.onModulesLoaded.then(()=\u003e{\r\n const pTag = dom2.window.document.querySelector(\"p\");\r\n\r\n const result = new TestResult();\r\n result.expected_output = \"Hello World\";\r\n result.input = \"Html page\";\r\n\r\n if (!pTag) {\r\n result.actual_output = \"null\";\r\n result.succeeded = false;\r\n result.reason = \"No p tag found\";\r\n } else {\r\n const pTagText = pTag ? pTag.textContent : \"\";\r\n result.actual_output = pTagText;\r\n if (pTagText.trim() != \"Hello World\") {\r\n result.reason = \"Expected output (Hello World in a p tag) did not match\";\r\n result.succeeded = false;\r\n } else {\r\n result.succeeded = true;\r\n result.reason = \"Found p tag with Hello World\";\r\n }\r\n }\r\n\r\n results.push(result);\r\n resolve(results);\r\n });\r\n });\r\n};\r\n*/"},{"type":"css","content":""}]},"selectedApiKeys":{},"comp_id":"iwq0joJRKVOsoZKy5yxA9"},"iteration":0,"hash":5,"saveVersion":2},{"type":"MarkdownEditor","mode":"edit","content":{"version":"2.0","text":"###\n#### 3. The `\u003ch1\u003e` to `\u003ch6\u003e` heading tags\n\n* The **`heading` tags** are used to structure the contents of the page. They place the contents in a hierarchy or order of importance. These headings, when properly used, help the search engine and human readers make meaning out of your page. Instead of using a bunch of divs try to use headings.\n\n* In a webpage, your `\u003ch1\u003e` should be one. Then the subheadings are placed in `\u003ch2\u003e`. Each `\u003ch2\u003e` will now have `\u003ch3\u003e` and so on. When your headings are properly written, the search engine can present different parts of your page in search results. Thereby, generating traffic.\n\n* The headings are written in the `\u003cbody\u003e` tag. Check the code snippet below:\n","mdHtml":"\u003ch3\u003e\u003c/h3\u003e\n\u003ch4\u003e3. The \u003ccode\u003e\u0026lt;h1\u0026gt;\u003c/code\u003e to \u003ccode\u003e\u0026lt;h6\u0026gt;\u003c/code\u003e heading tags\u003c/h4\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003eThe \u003cstrong\u003e\u003ccode\u003eheading\u003c/code\u003e tags\u003c/strong\u003e are used to structure the contents of the page. They place the contents in a hierarchy or order of importance. These headings, when properly used, help the search engine and human readers make meaning out of your page. Instead of using a bunch of divs try to use headings.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eIn a webpage, your \u003ccode\u003e\u0026lt;h1\u0026gt;\u003c/code\u003e should be one. Then the subheadings are placed in \u003ccode\u003e\u0026lt;h2\u0026gt;\u003c/code\u003e. Each \u003ccode\u003e\u0026lt;h2\u0026gt;\u003c/code\u003e will now have \u003ccode\u003e\u0026lt;h3\u0026gt;\u003c/code\u003e and so on. When your headings are properly written, the search engine can present different parts of your page in search results. Thereby, generating traffic.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eThe headings are written in the \u003ccode\u003e\u0026lt;body\u0026gt;\u003c/code\u003e tag. Check the code snippet below:\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n","cursorPosition":392,"comp_id":"kdv56pZSKunkCovr8q4o3"},"iteration":0,"hash":6,"saveVersion":2},{"type":"RunJS","mode":"edit","content":{"version":"11","filename":"","active":"html","jotted":{"pane":"html","height":null,"heightCodepanel":null,"showBlank":false,"hints":null,"hideResult":true,"hideHtml":false,"hideCss":true,"hideJs":true,"hideNav":false,"showBabelTransformPane":false,"codePlaygroundTemplate":"jottedTabs","showLineNumbers":true,"autoRun":true,"runOnLoad":false,"theme":"default","exercise":false,"showSolution":false,"caption":"","toggleState":{"result":true,"html":true,"css":true,"js":true},"readOnlyState":{"html":false,"css":false,"js":false},"solutionPanels":{"js":"","html":"","css":""},"panelsHighlightedLines":{"js":"","html":"","css":"","hiddenjs":""},"plugins":[{"name":"codemirror","options":{"lineNumbers":true}}],"files":[{"type":"html","content":"\u003chtml\u003e\r\n \u003chead\u003e\r\n \u003c/head\u003e\r\n \u003cbody\u003e\r\n \u003ch1\u003eHTML tags for search engine optimization\u003c/h1\u003e\r\n \u003ch2\u003eWhat is html?\u003c/h2\u003e\r\n \u003ch3\u003eWhat tags make up HTML?\u003c/h3\u003e\r\n \u003ch3\u003eExamples of semantic tags\u003ch3\u003e\r\n \u003ch3\u003eExamples of non-semantic HTML\u003c/h3\u003e\r\n\r\n \u003ch2\u003eWhat is search engine optimization?\u003c/h2\u003e\r\n \u003ch3\u003eDoes SEO matter?\u003c/h3\u003e\r\n \u003ch3\u003eTools to help SEO\u003ch3\u003e\r\n \u003ch3\u003eWhy you cannot do without SEO\u003c/h3\u003e\r\n \u003ch2\u003e...\u003c/h2\u003e\r\n \u003ch3\u003e...\u003c/h3\u003e\r\n \u003ch4\u003e...\u003c/h4\u003e\r\n \u003ch3\u003e...\u003c/h3\u003e\r\n \u003ch4\u003e...\u003c/h4\u003e\r\n \u003ch3\u003e...\u003c/h3\u003e\r\n \u003ch4\u003e...\u003c/h4\u003e\r\n \u003c/body\u003e\r\n\u003c/html\u003e"},{"type":"js","content":"document.addEventListener(\"DOMContentLoaded\", function () {\r\n pTag = document.querySelector(\"div\");\r\n newVal = document.createElement(\"p\");\r\n newVal.innerHTML = 'Hello, Hello';\r\n pTag.appendChild(newVal);\r\n});\r\n\r\n// Async Tests Example\r\n/*\r\nwindow.onModulesLoaded = new Promise( function( resolve, reject ) {\r\n setTimeout(function() {\r\n pTag = document.querySelector(\"div\");\r\n pTag.innerHTML = '';\r\n newVal = document.createElement(\"p\");\r\n newVal.innerHTML = 'Hello World';\r\n pTag.appendChild(newVal);\r\n resolve();\r\n }, 100)\r\n});\r\n*/"},{"type":"hiddenjs","content":"\n\n"},{"type":"exercise","content":"var TestResult = function() {\r\n this.succeeded = false;\r\n this.reason = \"\";\r\n this.input = \"\";\r\n this.expected_output = \"\";\r\n this.actual_output = \"\";\r\n};\r\n\r\nvar executeTests = function(\r\n userJsCode,\r\n userCssCode,\r\n userHtmlCode,\r\n userHtmlPage\r\n) {\r\n var results = [];\r\n\r\n const jsdom = require(\"jsdom\");\r\n const { JSDOM } = jsdom;\r\n const dom2 = new JSDOM(userHtmlPage, { runScripts: \"dangerously\" });\r\n\r\n const pTag = dom2.window.document.querySelector(\"p\");\r\n\r\n const result = new TestResult();\r\n result.expected_output = \"Hello World\";\r\n result.input = \"Html page\";\r\n\r\n if (!pTag) {\r\n result.actual_output = \"null\";\r\n result.succeeded = false;\r\n result.reason = \"No p tag found\";\r\n } else {\r\n const pTagText = pTag ? pTag.textContent : \"\";\r\n result.actual_output = pTagText;\r\n if (pTagText.trim() != \"Hello World\") {\r\n result.reason = \"Expected output (Hello World in a p tag) did not match\";\r\n result.succeeded = false;\r\n } else {\r\n result.succeeded = true;\r\n result.reason = \"Found p tag with Hello World\";\r\n }\r\n }\r\n\r\n results.push(result);\r\n\r\n return results;\r\n};\r\n\r\n// Async Tests Example\r\n/*\r\nvar executeTestsAsync = function(\r\n userJsCode,\r\n userCssCode,\r\n userHtmlCode,\r\n userHtmlPage\r\n) {\r\n var results = [];\r\n return new Promise(resolve =\u003e {\r\n\r\n const jsdom = require(\"jsdom\");\r\n const { JSDOM } = jsdom;\r\n const dom2 = new JSDOM(userHtmlPage, { runScripts: \"dangerously\" });\r\n\r\n if (!dom2.window.onModulesLoaded) {\r\n console.log(\"window.onModulesLoaded not found!\");\r\n \tresolve(results);\r\n }\r\n dom2.window.onModulesLoaded.then(()=\u003e{\r\n const pTag = dom2.window.document.querySelector(\"p\");\r\n\r\n const result = new TestResult();\r\n result.expected_output = \"Hello World\";\r\n result.input = \"Html page\";\r\n\r\n if (!pTag) {\r\n result.actual_output = \"null\";\r\n result.succeeded = false;\r\n result.reason = \"No p tag found\";\r\n } else {\r\n const pTagText = pTag ? pTag.textContent : \"\";\r\n result.actual_output = pTagText;\r\n if (pTagText.trim() != \"Hello World\") {\r\n result.reason = \"Expected output (Hello World in a p tag) did not match\";\r\n result.succeeded = false;\r\n } else {\r\n result.succeeded = true;\r\n result.reason = \"Found p tag with Hello World\";\r\n }\r\n }\r\n\r\n results.push(result);\r\n resolve(results);\r\n });\r\n });\r\n};\r\n*/"},{"type":"css","content":""}]},"selectedApiKeys":{},"comp_id":"Ejy5kwSA2EcTUtl35TVhe"},"iteration":0,"hash":7,"saveVersion":2},{"type":"MarkdownEditor","mode":"edit","content":{"version":"2.0","text":"###\n#### 4. The image `alt` attribute\n* The **`alt`(alternative) attribute** is used to describe the images in a webpage. The alt is important for screen readers and when the page is unable to load properly. The search engine equally uses it for indexing during search results.\n\n* When a search is made, the images on the webpage are found under the images category. These attributes help the ranking of your webpage. The image `title` and `alt` attributes are placed within an `\u003cimg\u003e` tag in the `\u003cbody\u003e` tag. The `alt` is usually descriptive. Check the code snippet below:\n\n\n","mdHtml":"\u003ch3\u003e\u003c/h3\u003e\n\u003ch4\u003e4. The image \u003ccode\u003ealt\u003c/code\u003e attribute\u003c/h4\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003eThe \u003cstrong\u003e\u003ccode\u003ealt\u003c/code\u003e(alternative) attribute\u003c/strong\u003e is used to describe the images in a webpage. The alt is important for screen readers and when the page is unable to load properly. The search engine equally uses it for indexing during search results.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eWhen a search is made, the images on the webpage are found under the images category. These attributes help the ranking of your webpage. The image \u003ccode\u003etitle\u003c/code\u003e and \u003ccode\u003ealt\u003c/code\u003e attributes are placed within an \u003ccode\u003e\u0026lt;img\u0026gt;\u003c/code\u003e tag in the \u003ccode\u003e\u0026lt;body\u0026gt;\u003c/code\u003e tag. The \u003ccode\u003ealt\u003c/code\u003e is usually descriptive. Check the code snippet below:\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n","cursorPosition":448,"comp_id":"BvFi1EuEGi67JFd2LvnoL"},"iteration":0,"hash":8,"saveVersion":2},{"type":"RunJS","mode":"edit","content":{"version":"11","filename":"","active":"html","jotted":{"pane":"html","height":null,"heightCodepanel":null,"showBlank":false,"hints":null,"hideResult":true,"hideHtml":false,"hideCss":true,"hideJs":true,"hideNav":false,"showBabelTransformPane":false,"codePlaygroundTemplate":"jottedTabs","showLineNumbers":true,"autoRun":true,"runOnLoad":false,"theme":"default","exercise":false,"showSolution":false,"caption":"","toggleState":{"result":true,"html":true,"css":true,"js":true},"readOnlyState":{"html":false,"css":false,"js":false},"solutionPanels":{"js":"","html":"","css":""},"panelsHighlightedLines":{"js":"","html":"","css":"","hiddenjs":""},"plugins":[{"name":"codemirror","options":{"lineNumbers":true}}],"files":[{"type":"html","content":"\u003chtml\u003e\r\n \u003chead\u003e\r\n \u003c/head\u003e\r\n \u003cbody\u003e\r\n \u003cimg src=\"./webpage.jpg\" title=\"webpage image\" alt=\"an image of a webpage showing search results\"/\u003e\r\n \u003c/body\u003e\r\n\u003c/html\u003e"},{"type":"js","content":"document.addEventListener(\"DOMContentLoaded\", function () {\r\n pTag = document.querySelector(\"div\");\r\n newVal = document.createElement(\"p\");\r\n newVal.innerHTML = 'Hello, Hello';\r\n pTag.appendChild(newVal);\r\n});\r\n\r\n// Async Tests Example\r\n/*\r\nwindow.onModulesLoaded = new Promise( function( resolve, reject ) {\r\n setTimeout(function() {\r\n pTag = document.querySelector(\"div\");\r\n pTag.innerHTML = '';\r\n newVal = document.createElement(\"p\");\r\n newVal.innerHTML = 'Hello World';\r\n pTag.appendChild(newVal);\r\n resolve();\r\n }, 100)\r\n});\r\n*/"},{"type":"hiddenjs","content":"\n\n"},{"type":"exercise","content":"var TestResult = function() {\r\n this.succeeded = false;\r\n this.reason = \"\";\r\n this.input = \"\";\r\n this.expected_output = \"\";\r\n this.actual_output = \"\";\r\n};\r\n\r\nvar executeTests = function(\r\n userJsCode,\r\n userCssCode,\r\n userHtmlCode,\r\n userHtmlPage\r\n) {\r\n var results = [];\r\n\r\n const jsdom = require(\"jsdom\");\r\n const { JSDOM } = jsdom;\r\n const dom2 = new JSDOM(userHtmlPage, { runScripts: \"dangerously\" });\r\n\r\n const pTag = dom2.window.document.querySelector(\"p\");\r\n\r\n const result = new TestResult();\r\n result.expected_output = \"Hello World\";\r\n result.input = \"Html page\";\r\n\r\n if (!pTag) {\r\n result.actual_output = \"null\";\r\n result.succeeded = false;\r\n result.reason = \"No p tag found\";\r\n } else {\r\n const pTagText = pTag ? pTag.textContent : \"\";\r\n result.actual_output = pTagText;\r\n if (pTagText.trim() != \"Hello World\") {\r\n result.reason = \"Expected output (Hello World in a p tag) did not match\";\r\n result.succeeded = false;\r\n } else {\r\n result.succeeded = true;\r\n result.reason = \"Found p tag with Hello World\";\r\n }\r\n }\r\n\r\n results.push(result);\r\n\r\n return results;\r\n};\r\n\r\n// Async Tests Example\r\n/*\r\nvar executeTestsAsync = function(\r\n userJsCode,\r\n userCssCode,\r\n userHtmlCode,\r\n userHtmlPage\r\n) {\r\n var results = [];\r\n return new Promise(resolve =\u003e {\r\n\r\n const jsdom = require(\"jsdom\");\r\n const { JSDOM } = jsdom;\r\n const dom2 = new JSDOM(userHtmlPage, { runScripts: \"dangerously\" });\r\n\r\n if (!dom2.window.onModulesLoaded) {\r\n console.log(\"window.onModulesLoaded not found!\");\r\n \tresolve(results);\r\n }\r\n dom2.window.onModulesLoaded.then(()=\u003e{\r\n const pTag = dom2.window.document.querySelector(\"p\");\r\n\r\n const result = new TestResult();\r\n result.expected_output = \"Hello World\";\r\n result.input = \"Html page\";\r\n\r\n if (!pTag) {\r\n result.actual_output = \"null\";\r\n result.succeeded = false;\r\n result.reason = \"No p tag found\";\r\n } else {\r\n const pTagText = pTag ? pTag.textContent : \"\";\r\n result.actual_output = pTagText;\r\n if (pTagText.trim() != \"Hello World\") {\r\n result.reason = \"Expected output (Hello World in a p tag) did not match\";\r\n result.succeeded = false;\r\n } else {\r\n result.succeeded = true;\r\n result.reason = \"Found p tag with Hello World\";\r\n }\r\n }\r\n\r\n results.push(result);\r\n resolve(results);\r\n });\r\n });\r\n};\r\n*/"},{"type":"css","content":""}]},"selectedApiKeys":{},"comp_id":"LnLDt6whzMWXlMFYiru9O"},"iteration":0,"hash":9,"saveVersion":2},{"type":"MarkdownEditor","mode":"edit","content":{"version":"2.0","text":"### \n#### 5. The `no-follow` link attribute\n\n* A **`no-follow` tag** is an attribute that tells the search engine not to count points for the inbound links on the page. This is to help stop spammers from posting irrelevant links just to get SERP point. Simply add a `no-follow` attribute to the inbound links. Check the code below: ","mdHtml":"\u003ch3\u003e\u003c/h3\u003e\n\u003ch4\u003e5. The \u003ccode\u003eno-follow\u003c/code\u003e link attribute\u003c/h4\u003e\n\u003cul\u003e\n\u003cli\u003eA \u003cstrong\u003e\u003ccode\u003eno-follow\u003c/code\u003e tag\u003c/strong\u003e is an attribute that tells the search engine not to count points for the inbound links on the page. This is to help stop spammers from posting irrelevant links just to get SERP point. Simply add a \u003ccode\u003eno-follow\u003c/code\u003e attribute to the inbound links. Check the code below:\u003c/li\u003e\n\u003c/ul\u003e\n","cursorPosition":36,"comp_id":"JjyG3XOeCBpNrcm-UXmmd"},"iteration":0,"hash":10,"saveVersion":2},{"type":"RunJS","mode":"edit","content":{"version":"11","filename":"","active":"html","jotted":{"pane":"html","height":null,"heightCodepanel":null,"showBlank":false,"hints":null,"hideResult":true,"hideHtml":false,"hideCss":true,"hideJs":true,"hideNav":false,"showBabelTransformPane":false,"codePlaygroundTemplate":"jottedTabs","showLineNumbers":true,"autoRun":true,"runOnLoad":false,"theme":"default","exercise":false,"showSolution":false,"caption":"","toggleState":{"result":true,"html":true,"css":true,"js":true},"readOnlyState":{"html":false,"css":false,"js":false},"solutionPanels":{"js":"","html":"","css":""},"panelsHighlightedLines":{"js":"","html":"","css":"","hiddenjs":""},"plugins":[{"name":"codemirror","options":{"lineNumbers":true}}],"files":[{"type":"html","content":"\u003chtml\u003e\r\n \u003chead\u003e\r\n \u003c/head\u003e\r\n \u003cbody\u003e\r\n \u003ca href=”http://www.siteexample.com/” rel=”nofollow”\u003eLink Text\u003c/a\u003e\r\n \u003c/body\u003e\r\n\u003c/html\u003e"},{"type":"js","content":"document.addEventListener(\"DOMContentLoaded\", function () {\r\n pTag = document.querySelector(\"div\");\r\n newVal = document.createElement(\"p\");\r\n newVal.innerHTML = 'Hello, Hello';\r\n pTag.appendChild(newVal);\r\n});\r\n\r\n// Async Tests Example\r\n/*\r\nwindow.onModulesLoaded = new Promise( function( resolve, reject ) {\r\n setTimeout(function() {\r\n pTag = document.querySelector(\"div\");\r\n pTag.innerHTML = '';\r\n newVal = document.createElement(\"p\");\r\n newVal.innerHTML = 'Hello World';\r\n pTag.appendChild(newVal);\r\n resolve();\r\n }, 100)\r\n});\r\n*/"},{"type":"hiddenjs","content":"\n\n"},{"type":"exercise","content":"var TestResult = function() {\r\n this.succeeded = false;\r\n this.reason = \"\";\r\n this.input = \"\";\r\n this.expected_output = \"\";\r\n this.actual_output = \"\";\r\n};\r\n\r\nvar executeTests = function(\r\n userJsCode,\r\n userCssCode,\r\n userHtmlCode,\r\n userHtmlPage\r\n) {\r\n var results = [];\r\n\r\n const jsdom = require(\"jsdom\");\r\n const { JSDOM } = jsdom;\r\n const dom2 = new JSDOM(userHtmlPage, { runScripts: \"dangerously\" });\r\n\r\n const pTag = dom2.window.document.querySelector(\"p\");\r\n\r\n const result = new TestResult();\r\n result.expected_output = \"Hello World\";\r\n result.input = \"Html page\";\r\n\r\n if (!pTag) {\r\n result.actual_output = \"null\";\r\n result.succeeded = false;\r\n result.reason = \"No p tag found\";\r\n } else {\r\n const pTagText = pTag ? pTag.textContent : \"\";\r\n result.actual_output = pTagText;\r\n if (pTagText.trim() != \"Hello World\") {\r\n result.reason = \"Expected output (Hello World in a p tag) did not match\";\r\n result.succeeded = false;\r\n } else {\r\n result.succeeded = true;\r\n result.reason = \"Found p tag with Hello World\";\r\n }\r\n }\r\n\r\n results.push(result);\r\n\r\n return results;\r\n};\r\n\r\n// Async Tests Example\r\n/*\r\nvar executeTestsAsync = function(\r\n userJsCode,\r\n userCssCode,\r\n userHtmlCode,\r\n userHtmlPage\r\n) {\r\n var results = [];\r\n return new Promise(resolve =\u003e {\r\n\r\n const jsdom = require(\"jsdom\");\r\n const { JSDOM } = jsdom;\r\n const dom2 = new JSDOM(userHtmlPage, { runScripts: \"dangerously\" });\r\n\r\n if (!dom2.window.onModulesLoaded) {\r\n console.log(\"window.onModulesLoaded not found!\");\r\n \tresolve(results);\r\n }\r\n dom2.window.onModulesLoaded.then(()=\u003e{\r\n const pTag = dom2.window.document.querySelector(\"p\");\r\n\r\n const result = new TestResult();\r\n result.expected_output = \"Hello World\";\r\n result.input = \"Html page\";\r\n\r\n if (!pTag) {\r\n result.actual_output = \"null\";\r\n result.succeeded = false;\r\n result.reason = \"No p tag found\";\r\n } else {\r\n const pTagText = pTag ? pTag.textContent : \"\";\r\n result.actual_output = pTagText;\r\n if (pTagText.trim() != \"Hello World\") {\r\n result.reason = \"Expected output (Hello World in a p tag) did not match\";\r\n result.succeeded = false;\r\n } else {\r\n result.succeeded = true;\r\n result.reason = \"Found p tag with Hello World\";\r\n }\r\n }\r\n\r\n results.push(result);\r\n resolve(results);\r\n });\r\n });\r\n};\r\n*/"},{"type":"css","content":""}]},"selectedApiKeys":{},"comp_id":"zASdruNvz5iTrB9BRutjk"},"iteration":0,"hash":11,"saveVersion":1},{"type":"MarkdownEditor","mode":"edit","content":{"version":"2.0","text":"###\n#### 6. The anchor `\u003ca\u003e` tag text\n\n* The **anchor tag text** is the text added to a link to describe what the link is about. It is good for SEO because it helps the search engine recognize what the link is about. Check the code snippet below:\n","mdHtml":"\u003ch3\u003e\u003c/h3\u003e\n\u003ch4\u003e6. The anchor \u003ccode\u003e\u0026lt;a\u0026gt;\u003c/code\u003e tag text\u003c/h4\u003e\n\u003cul\u003e\n\u003cli\u003eThe \u003cstrong\u003eanchor tag text\u003c/strong\u003e is the text added to a link to describe what the link is about. It is good for SEO because it helps the search engine recognize what the link is about. Check the code snippet below:\u003c/li\u003e\n\u003c/ul\u003e\n","cursorPosition":234,"comp_id":"nNUUdxy-5Pr3AngzmPVJl"},"iteration":0,"hash":12,"saveVersion":1},{"type":"RunJS","mode":"edit","content":{"version":"11","filename":"","active":"html","jotted":{"pane":"html","height":null,"heightCodepanel":null,"showBlank":false,"hints":null,"hideResult":true,"hideHtml":false,"hideCss":true,"hideJs":true,"hideNav":false,"showBabelTransformPane":false,"codePlaygroundTemplate":"jottedTabs","showLineNumbers":true,"autoRun":true,"runOnLoad":false,"theme":"default","exercise":false,"showSolution":false,"caption":"","toggleState":{"result":true,"html":true,"css":true,"js":true},"readOnlyState":{"html":false,"css":false,"js":false},"solutionPanels":{"js":"","html":"","css":""},"panelsHighlightedLines":{"js":"","html":"","css":"","hiddenjs":""},"plugins":[{"name":"codemirror","options":{"lineNumbers":true}}],"files":[{"type":"html","content":"\u003chtml\u003e\r\n \u003chead\u003e\r\n \u003c/head\u003e\r\n \u003cbody\u003e\r\n \u003ca href=\"http://examplewebsite.com/\" rel=\"nofollow\"\u003eyour anchor text\u003c/a\u003e\r\n \u003c/body\u003e\r\n\u003c/html\u003e"},{"type":"js","content":"document.addEventListener(\"DOMContentLoaded\", function () {\r\n pTag = document.querySelector(\"div\");\r\n newVal = document.createElement(\"p\");\r\n newVal.innerHTML = 'Hello, Hello';\r\n pTag.appendChild(newVal);\r\n});\r\n\r\n// Async Tests Example\r\n/*\r\nwindow.onModulesLoaded = new Promise( function( resolve, reject ) {\r\n setTimeout(function() {\r\n pTag = document.querySelector(\"div\");\r\n pTag.innerHTML = '';\r\n newVal = document.createElement(\"p\");\r\n newVal.innerHTML = 'Hello World';\r\n pTag.appendChild(newVal);\r\n resolve();\r\n }, 100)\r\n});\r\n*/"},{"type":"hiddenjs","content":"\n\n"},{"type":"exercise","content":"var TestResult = function() {\r\n this.succeeded = false;\r\n this.reason = \"\";\r\n this.input = \"\";\r\n this.expected_output = \"\";\r\n this.actual_output = \"\";\r\n};\r\n\r\nvar executeTests = function(\r\n userJsCode,\r\n userCssCode,\r\n userHtmlCode,\r\n userHtmlPage\r\n) {\r\n var results = [];\r\n\r\n const jsdom = require(\"jsdom\");\r\n const { JSDOM } = jsdom;\r\n const dom2 = new JSDOM(userHtmlPage, { runScripts: \"dangerously\" });\r\n\r\n const pTag = dom2.window.document.querySelector(\"p\");\r\n\r\n const result = new TestResult();\r\n result.expected_output = \"Hello World\";\r\n result.input = \"Html page\";\r\n\r\n if (!pTag) {\r\n result.actual_output = \"null\";\r\n result.succeeded = false;\r\n result.reason = \"No p tag found\";\r\n } else {\r\n const pTagText = pTag ? pTag.textContent : \"\";\r\n result.actual_output = pTagText;\r\n if (pTagText.trim() != \"Hello World\") {\r\n result.reason = \"Expected output (Hello World in a p tag) did not match\";\r\n result.succeeded = false;\r\n } else {\r\n result.succeeded = true;\r\n result.reason = \"Found p tag with Hello World\";\r\n }\r\n }\r\n\r\n results.push(result);\r\n\r\n return results;\r\n};\r\n\r\n// Async Tests Example\r\n/*\r\nvar executeTestsAsync = function(\r\n userJsCode,\r\n userCssCode,\r\n userHtmlCode,\r\n userHtmlPage\r\n) {\r\n var results = [];\r\n return new Promise(resolve =\u003e {\r\n\r\n const jsdom = require(\"jsdom\");\r\n const { JSDOM } = jsdom;\r\n const dom2 = new JSDOM(userHtmlPage, { runScripts: \"dangerously\" });\r\n\r\n if (!dom2.window.onModulesLoaded) {\r\n console.log(\"window.onModulesLoaded not found!\");\r\n \tresolve(results);\r\n }\r\n dom2.window.onModulesLoaded.then(()=\u003e{\r\n const pTag = dom2.window.document.querySelector(\"p\");\r\n\r\n const result = new TestResult();\r\n result.expected_output = \"Hello World\";\r\n result.input = \"Html page\";\r\n\r\n if (!pTag) {\r\n result.actual_output = \"null\";\r\n result.succeeded = false;\r\n result.reason = \"No p tag found\";\r\n } else {\r\n const pTagText = pTag ? pTag.textContent : \"\";\r\n result.actual_output = pTagText;\r\n if (pTagText.trim() != \"Hello World\") {\r\n result.reason = \"Expected output (Hello World in a p tag) did not match\";\r\n result.succeeded = false;\r\n } else {\r\n result.succeeded = true;\r\n result.reason = \"Found p tag with Hello World\";\r\n }\r\n }\r\n\r\n results.push(result);\r\n resolve(results);\r\n });\r\n });\r\n};\r\n*/"},{"type":"css","content":""}]},"selectedApiKeys":{},"comp_id":"vln35NpnS2DoEU4Y616BR"},"iteration":0,"hash":13,"saveVersion":1},{"type":"MarkdownEditor","mode":"edit","content":{"version":"2.0","text":"###\n#### 7. The `canonical` tag\n* The **`canonical` tag** helps to tell the search engine to rank the page where this tag is placed as the primary page from all look-alike pages.","mdHtml":"\u003ch3\u003e\u003c/h3\u003e\n\u003ch4\u003e7. The \u003ccode\u003ecanonical\u003c/code\u003e tag\u003c/h4\u003e\n\u003cul\u003e\n\u003cli\u003eThe \u003cstrong\u003e\u003ccode\u003ecanonical\u003c/code\u003e tag\u003c/strong\u003e helps to tell the search engine to rank the page where this tag is placed as the primary page from all look-alike pages.\u003c/li\u003e\n\u003c/ul\u003e\n","cursorPosition":{"line":0,"ch":0},"comp_id":"rROZhO-wsBQT9MAdVlEmh"},"iteration":0,"hash":14,"saveVersion":2},{"type":"RunJS","mode":"edit","content":{"version":"11","filename":"","active":"html","jotted":{"pane":"html","height":null,"heightCodepanel":null,"showBlank":false,"hints":null,"hideResult":true,"hideHtml":false,"hideCss":true,"hideJs":true,"hideNav":false,"showBabelTransformPane":false,"codePlaygroundTemplate":"jottedTabs","showLineNumbers":true,"autoRun":true,"runOnLoad":false,"theme":"default","exercise":false,"showSolution":false,"caption":"","toggleState":{"result":true,"html":true,"css":true,"js":true},"readOnlyState":{"html":false,"css":false,"js":false},"solutionPanels":{"js":"","html":"","css":""},"panelsHighlightedLines":{"js":"","html":"","css":"","hiddenjs":""},"plugins":[{"name":"codemirror","options":{"lineNumbers":true}}],"files":[{"type":"html","content":"\u003chtml\u003e\r\n \u003chead\u003e\r\n \u003c/head\u003e\r\n \u003cbody\u003e\r\n \u003clink rel=\"canonical\" href=\"https://examplewebsite.com/\"\u003e\r\n \u003c/body\u003e\r\n\u003c/html\u003e"},{"type":"js","content":"document.addEventListener(\"DOMContentLoaded\", function () {\r\n pTag = document.querySelector(\"div\");\r\n newVal = document.createElement(\"p\");\r\n newVal.innerHTML = 'Hello, Hello';\r\n pTag.appendChild(newVal);\r\n});\r\n\r\n// Async Tests Example\r\n/*\r\nwindow.onModulesLoaded = new Promise( function( resolve, reject ) {\r\n setTimeout(function() {\r\n pTag = document.querySelector(\"div\");\r\n pTag.innerHTML = '';\r\n newVal = document.createElement(\"p\");\r\n newVal.innerHTML = 'Hello World';\r\n pTag.appendChild(newVal);\r\n resolve();\r\n }, 100)\r\n});\r\n*/"},{"type":"hiddenjs","content":"\n\n"},{"type":"exercise","content":"var TestResult = function() {\r\n this.succeeded = false;\r\n this.reason = \"\";\r\n this.input = \"\";\r\n this.expected_output = \"\";\r\n this.actual_output = \"\";\r\n};\r\n\r\nvar executeTests = function(\r\n userJsCode,\r\n userCssCode,\r\n userHtmlCode,\r\n userHtmlPage\r\n) {\r\n var results = [];\r\n\r\n const jsdom = require(\"jsdom\");\r\n const { JSDOM } = jsdom;\r\n const dom2 = new JSDOM(userHtmlPage, { runScripts: \"dangerously\" });\r\n\r\n const pTag = dom2.window.document.querySelector(\"p\");\r\n\r\n const result = new TestResult();\r\n result.expected_output = \"Hello World\";\r\n result.input = \"Html page\";\r\n\r\n if (!pTag) {\r\n result.actual_output = \"null\";\r\n result.succeeded = false;\r\n result.reason = \"No p tag found\";\r\n } else {\r\n const pTagText = pTag ? pTag.textContent : \"\";\r\n result.actual_output = pTagText;\r\n if (pTagText.trim() != \"Hello World\") {\r\n result.reason = \"Expected output (Hello World in a p tag) did not match\";\r\n result.succeeded = false;\r\n } else {\r\n result.succeeded = true;\r\n result.reason = \"Found p tag with Hello World\";\r\n }\r\n }\r\n\r\n results.push(result);\r\n\r\n return results;\r\n};\r\n\r\n// Async Tests Example\r\n/*\r\nvar executeTestsAsync = function(\r\n userJsCode,\r\n userCssCode,\r\n userHtmlCode,\r\n userHtmlPage\r\n) {\r\n var results = [];\r\n return new Promise(resolve =\u003e {\r\n\r\n const jsdom = require(\"jsdom\");\r\n const { JSDOM } = jsdom;\r\n const dom2 = new JSDOM(userHtmlPage, { runScripts: \"dangerously\" });\r\n\r\n if (!dom2.window.onModulesLoaded) {\r\n console.log(\"window.onModulesLoaded not found!\");\r\n \tresolve(results);\r\n }\r\n dom2.window.onModulesLoaded.then(()=\u003e{\r\n const pTag = dom2.window.document.querySelector(\"p\");\r\n\r\n const result = new TestResult();\r\n result.expected_output = \"Hello World\";\r\n result.input = \"Html page\";\r\n\r\n if (!pTag) {\r\n result.actual_output = \"null\";\r\n result.succeeded = false;\r\n result.reason = \"No p tag found\";\r\n } else {\r\n const pTagText = pTag ? pTag.textContent : \"\";\r\n result.actual_output = pTagText;\r\n if (pTagText.trim() != \"Hello World\") {\r\n result.reason = \"Expected output (Hello World in a p tag) did not match\";\r\n result.succeeded = false;\r\n } else {\r\n result.succeeded = true;\r\n result.reason = \"Found p tag with Hello World\";\r\n }\r\n }\r\n\r\n results.push(result);\r\n resolve(results);\r\n });\r\n });\r\n};\r\n*/"},{"type":"css","content":""}]},"selectedApiKeys":{},"comp_id":"9ox9BczAPsSx9kjSR4NsB"},"iteration":0,"hash":15,"saveVersion":2},{"type":"MarkdownEditor","mode":"edit","content":{"version":"2.0","text":"##\n### Conclusion\nUsing HTML tags that are SEO friendly helps your page rank more on SERP. I will advise you not to take them for granted even if you have placed your page on adverts. Hope this article has been helpful.","mdHtml":"\u003ch2\u003e\u003c/h2\u003e\n\u003ch3\u003eConclusion\u003c/h3\u003e\n\u003cp\u003eUsing HTML tags that are SEO friendly helps your page rank more on SERP. I will advise you not to take them for granted even if you have placed your page on adverts. Hope this article has been helpful.\u003c/p\u003e\n","cursorPosition":{"line":0,"ch":0},"comp_id":"QJBxcGNT4Pm-q23awsjuZ"},"iteration":0,"hash":16,"saveVersion":4}]},"creatorId":5495460376084480,"tags":"html5,seo,communitycreator","totalCreatorPublishedShots":2,"creatorName":"Ugorji Miracle","creatorImageUrl":"/v2api/author/profile/5495460376084480/image/5231563257675776","attributions":[],"license":9002,"publishDate":"2021-10-01T23:42:43.061Z","modifiedDate":"2022-08-13T10:05:03.763Z","specifiedRelatedCourses":"[]","specialSubscriptionDiscount":false,"edpressoBannerDetails":{"edpressoBanner":"🔊 Keep up to date ","edpressoTitleLoggedIn":"Sign-up for the Edpresso bi-weekly newsletter! Stay up to date on the latest shots.","edpressoTitleLoggedOut":"Sign-up for the Edpresso bi-weekly newsletter! Stay up to date on the latest shots.","edpressoMessageLoggedIn":"Stay up to date on the latest shots and our Top contributors!","edpressoMessageLoggedOut":"Stay up to date on the latest shots and our Top contributors!","edpressoButtonText":"Sign-up","edpressoButtonUrl":"","isEdpressoNewsBanner":false}},"__N_SSP":true},"page":"/answers/[answerUrl]","query":{"answerUrl":"html-tags-for-search-engine-optimization-seo"},"buildId":"220811-1200-5649490","assetPrefix":"/static","isFallback":false,"dynamicIds":["/G1I","8293","9gnl","D7lL","IVf/","KssR","SIHl","TtMJ","Uvjh","WKCH","XDgg","cp1L","efW5","ettj","f6rT","k5vr","lFpj","ozM1","qJ5Y","qecL","txxo","wDgU","wr1Z","2ue5","+hyB","13h9","2uSk","BLAN","Co2B","CtBV","OB/l","Pb3W","TzAj","XaDY","ey9w","ntqH","tMYL","tffP","vByF","1Ua+","ISQA","LdwO","W3D4","WkoY","Wm40","fAI4","neBe","oa1R","qKbl","","+Dp1","0Gbl","0fOc","1LFi","2cuI","364U","3Epe","788I","7D3C","7ZwO","B6ik","BlQg","CjAr","Cqs1","G9bJ","GIkF","I/SN","ICES","IQmq","IkcQ","JJit","JRsS","L3z2","L8zY","LByC","LOQ0","LXcb","Lvaw","MUZ+","Meye","NC75","O5Qo","PS9J","Q8Pk","SiOM","SoYv","SvKN","TcaZ","Ue6C","W4O0","Wi4d","YeS0","Z7cO","ZywG","b8YG","bhid","bjFo","c9xx","dQ+Y","eE7b","eggO","fFjG","gIz7","h2yo","j/9p","j5Sa","jThV","kzvQ","ldD7","lgpG","ls0w","m5F/","mFGQ","mSIx","nluZ","oadT","p36Y","pDPa","q6vP","rUxu","rW5j","ukoL","upKo","w0uM","xIJD","z9V8","v9g3","2M62","3Mta","4W4d","594e","7VwS","7vSI","8Ngs","D6q+","DLhn","ETws","Fa0R","GMzb","Gj5m","J62x","LyM3","Mmk5","ND77","POMm","XY2L","ZWTW","b2FJ","bfNC","bv9y","eNQB","fxmX","fzlm","hp+g","hyYz","ltSp","qdLl","sQqM","ungW","v3KY","zVml"],"gssp":true}</script><script nomodule="" src="/static/_next/static/chunks/polyfills-7cf77f76556af90922e4.js"></script><script async="" src="/static/_next/static/chunks/318.91182d0e6413b8bffba7.js"></script><script async="" src="/static/_next/static/chunks/a89c09af.2f2f22b1c175494a5c57.js"></script><script async="" src="/static/_next/static/chunks/302.9c7c6285ae32efbf00e5.js"></script><script src="/static/_next/static/chunks/webpack-7406a21c7460d3b0f295.js" async=""></script><script src="/static/_next/static/chunks/framework.80e82460b8d365e5822b.js" async=""></script><script src="/static/_next/static/chunks/fb532cb6e524313f54dbddc65c9f67bd96431141.b15c4c5a8ba496d4ba86.js" async=""></script><script src="/static/_next/static/chunks/main-74f69168a47a6a8a2056.js" async=""></script><script src="/static/_next/static/chunks/98600bef.7e0aa7004d122466ad18.js" async=""></script><script src="/static/_next/static/chunks/37e49c94.760a8f2f7a4ec89fce1f.js" async=""></script><script src="/static/_next/static/chunks/04e992cf499439b93913a715347a708562f0d121.70380f6fa2e020a8866a.js" async=""></script><script src="/static/_next/static/chunks/76362ecdde58ede9b3d0adcf357d953de77597ea.9c81e64feed255aae9f8.js" async=""></script><script src="/static/_next/static/chunks/6754aaf14d44a5e608763acb339f6ac2859e79f3.4591f254cab82d27eb75.js" async=""></script><script src="/static/_next/static/chunks/f552d41e36a9e6172bb343ad99611be4ad740fa0.4845ceb9e32863fac8b3.js" async=""></script><script src="/static/_next/static/chunks/4c416d38aa0816746de401134f4a44472195f3c6.71ea4171295c39697ebb.js" async=""></script><script src="/static/_next/static/chunks/4cae4b9e95ec253eca8fcfdaf8b4f98f6e73d435.4f336a9e76c5f70a3796.js" async=""></script><script src="/static/_next/static/chunks/c0c4620823ad44d6adc4e04178019b007fe7de13.2784d78eae7b5cb89439.js" async=""></script><script src="/static/_next/static/chunks/4f81c8306f7713275f11ee600dcf2606350c78c9.1941529e5431f3597557.js" async=""></script><script src="/static/_next/static/chunks/d77d7c61f2c5c8a3c98b211591fd67a3a2aa565e.349de5e65c63cde47519.js" async=""></script><script src="/static/_next/static/chunks/7f2378019da9f45bd0ea49cf9d612a83ca5f66a9.3ffc57142d6acd7b8e08.js" async=""></script><script src="/static/_next/static/chunks/8d2f657045fff872b922ccacdb336706a724bcf7.4d164b9729b81268879f.js" async=""></script><script src="/static/_next/static/chunks/e4f964379ecca536fd6a67d8dcc1f5ed17fe6f11.674776bc3ea55401a5b2.js" async=""></script><script src="/static/_next/static/chunks/31b613fc9104298bc46b40304f750e2b8f8d9699.c4914d23ff2a899eacae.js" async=""></script><script src="/static/_next/static/chunks/bfa820907033431ba125be2300ad2276011ba870.80dbd2a74587c6756dcf.js" async=""></script><script src="/static/_next/static/chunks/b5b3aa2811c117f077f4e79682039c9de7f9ba1f.b0e8bc90a27adec46e59.js" async=""></script><script src="/static/_next/static/chunks/683ee1a444f30340eab4367c669ed6025f926c60.c5e7229c1b8fa32b410c.js" async=""></script><script src="/static/_next/static/chunks/pages/_app-8e41a2fdc2b371752893.js" async=""></script><script src="/static/_next/static/chunks/a85169a179f168ef2ede7cc5dcbe342fd7ead128.351a9ff11323a971a53a.js" async=""></script><script src="/static/_next/static/chunks/e1bee57b83b7a640829e0efb732817752ffe96e6.678578e4f46bff1ec59d.js" async=""></script><script src="/static/_next/static/chunks/c4397031915afa4000ed868d08c2101ea4e21f25.505be22b2614dd0c6d7c.js" async=""></script><script src="/static/_next/static/chunks/01ed77285c36a121e956da58383037d12771e327.b4167f8bc6efd13e58e4.js" async=""></script><script src="/static/_next/static/chunks/8e5d7745df6e477feff3cddd5b08dfafdb0b90f2.6f9bcec4fa3719eae87a.js" async=""></script><script src="/static/_next/static/chunks/af5f2b9017d49c6b37a8e32eee214d51cfe9802e.8a82a18a063d0d0bdbc2.js" async=""></script><script src="/static/_next/static/chunks/1672645d3c9a4e570aca5f70ad24bc4e18235705.88834dfaf4d11da3559e.js" async=""></script><script src="/static/_next/static/chunks/02e22000cacfcba9accc6ac8cb4c9705f8de5c14.24ca2228a0e94bc3c725.js" async=""></script><script src="/static/_next/static/chunks/pages/answers/%5BanswerUrl%5D-d7e466d0cf9b5c5d8783.js" async=""></script><script src="/static/_next/static/220811-1200-5649490/_buildManifest.js" async=""></script><script src="/static/_next/static/220811-1200-5649490/_ssgManifest.js" async=""></script></body></html><script defer src="https://static.cloudflareinsights.com/beacon.min.js/v652eace1692a40cfa3763df669d7439c1639079717194" integrity="sha512-Gi7xpJR8tSkrpF7aordPZQlW2DLtzUlZcumS8dMQjwDHEnw9I7ZLyiOj/6tZStRBGtGgN6ceN6cMH8z7etPGlw==" data-cf-beacon='{"rayId":"73a56ce30e0982c6","token":"7ceca3b2478f402fbe1337eadbfd7be5","version":"2022.6.0","si":100}' crossorigin="anonymous"></script>