Theory 16 tasks, 2 challenges, 1 summary
Let's start by preparing the markup for the blog page, and we will start to understand what tags are used in the markup and what these tags are used for.
2026-03-09 10:55
Diff
<!DOCTYPE html><html lang="en" class="no-js"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><script>var b=document.documentElement.classList;b.remove('no-js');if(!window.Promise||!window.sessionStorage||!!sessionStorage.getItem('muller.v2')){b.add('muller')}</script><link rel="dns-prefetch" href="https://assets.htmlacademy.org"><script async src="https://www.googletagmanager.com/gtag/js?id=G-MXPCRXM48C"></script><script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-MXPCRXM48C');
</script><script type="text/javascript">
(function(e,t){var n=e.amplitude||{_q:[],_iq:{}};var r=t.createElement("script")
;r.type="text/javascript"
;r.integrity="sha384-d/yhnowERvm+7eCU79T/bYjOiMmq4F11ElWYLmt0ktvYEVgqLDazh4+gW9CKMpYW"
;r.crossOrigin="anonymous";r.async=true
;r.src="https://cdn.amplitude.com/libs/amplitude-5.2.2-min.gz.js"
;r.onload=function(){if(!e.amplitude.runQueuedFunctions){
console.log("[Amplitude] Error: could not load SDK")}}
;var i=t.getElementsByTagName("script")[0];i.parentNode.insertBefore(r,i)
;function s(e,t){e.prototype[t]=function(){
this._q.push([t].concat(Array.prototype.slice.call(arguments,0)));return this}}
var o=function(){this._q=[];return this}
;var a=["add","append","clearAll","prepend","set","setOnce","unset"]
;for(var u=0;u<a.length;u++){s(o,a[u])}n.Identify=o;var c=function(){this._q=[]
;return this}
;var l=["setProductId","setQuantity","setPrice","setRevenueType","setEventProperties"]
;for(var p=0;p<l.length;p++){s(c,l[p])}n.Revenue=c
;var d=["init","logEvent","logRevenue","setUserId","setUserProperties","setOptOut","setVersionName","setDomain","setDeviceId","setGlobalUserProperties","identify","clearUserProperties","setGroup","logRevenueV2","regenerateDeviceId","groupIdentify","onInit","logEventWithTimestamp","logEventWithGroups","setSessionId","resetSessionId"]
;function v(e){function t(t){e[t]=function(){
e._q.push([t].concat(Array.prototype.slice.call(arguments,0)))}}
for(var n=0;n<d.length;n++){t(d[n])}}v(n);n.getInstance=function(e){
e=(!e||e.length===0?"$default_instance":e).toLowerCase()
;if(!n._iq.hasOwnProperty(e)){n._iq[e]={_q:[]};v(n._iq[e])}return n._iq[e]}
;e.amplitude=n})(window,document);
amplitude.getInstance().init("df11525b6880a3c5e2af14f9b6238408", null,{
includeUtm: true,
includeGclid: true,
includeReferrer: true,
deviceIdFromUrlParam: true
}, function (instance) {
window.amplitudeLoaded = true;
});
</script><link rel="stylesheet" href="https://assets.htmlacademy.org/css/core.v284.css"><link rel="stylesheet" href="https://assets.htmlacademy.org/css/text.v104.css"><link rel="stylesheet" href="https://assets.htmlacademy.org/css/profile.v236.css"><link rel="stylesheet" href="/css/custom.css"><link rel="stylesheet" href="/css/cookies.css"><link rel="preload" as="script" href="https://assets.htmlacademy.org/js/general.v274.js"><title>Chapter «HTML document structure» — Course «HTML and CSS basics» — HTML Academy</title><meta name="description" content="Let's start by preparing the markup for the blog page, and we will start to understand what tags are used in the markup and what these tags are used for."><meta property="og:type" content="website"><meta property="og:site_name" content="HTML Academy"><meta name="twitter:url" property="og:url" content="https://htmlacademy.org"><meta name="twitter:title" property="og:title" content="Interactive online courses HTML Academy"><meta name="twitter:description" property="og:description" content="Together we’ll learn how to work with real code, solve true-to-life problems, use cutting edge technologies. Minimum of boring theory and lots of practical tasks."><meta name="twitter:image" property="og:image" content="https://htmlacademy.org/og/htmlacademy.png"><meta name="twitter:card" content="summary_large_image"><link rel="canonical" href="/courses/html-css-basics/html-document-structure"><meta name="theme-color" content="#2f358f"></head><body><header class="page-header"><div class="page-header__inner"><div class="page-header__top"><a class="page-header__logo" href="/"><img src="https://assets.htmlacademy.org/img/logo.v2.svg" width="104" height="36" alt="HTML Academy"></a><nav class="main-menu" aria-label="Main navigation" itemscope itemtype="http://schema.org/SiteNavigationElement"><ul class="main-menu__list main-menu__list--main main-menu__list--adaptive"><li class="main-menu__item main-menu__item--logo"><a class="main-menu__link" href="/" title="HTML Academy main page"><img src="https://assets.htmlacademy.org/img/logo.v2.svg" width="104" height="36" alt="HTML Academy"></a></li><li class="main-menu__item"><a class="main-menu__link" href="/courses" title="Courses"><span class="main-menu__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#course"></use></svg></span>Courses</a></li><li class="main-menu__item"><a class="main-menu__link" href="/tutorials" title="Tutorials"><span class="main-menu__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#intensive"></use></svg></span>Tutorials</a></li><li class="main-menu__item"><a class="main-menu__link" href="/blog" title="Blog"><span class="main-menu__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#hat"></use></svg></span>Blog</a></li></ul><button class="main-menu__trigger" type="button" title="Main menu"><span></span></button><div class="main-menu__dropdown" id="main-menu"><div class="main-menu__dropdown-inner"><ul class="main-menu__list main-menu__list--main"><li class="main-menu__item" itemprop="name"><a class="main-menu__link" href="/courses" itemprop="url"><span class="main-menu__icon" aria-hidden="true"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#course"></use></svg></span>Courses</a></li><li class="main-menu__item" itemprop="name"><a class="main-menu__link" href="/tutorials" itemprop="url"><span class="main-menu__icon" aria-hidden="true"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#intensive"></use></svg></span>Tutorials</a></li><li class="main-menu__item" itemprop="name"><a class="main-menu__link" href="/blog" itemprop="url"><span class="main-menu__icon" aria-hidden="true"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#hat"></use></svg></span>Blog</a></li></ul><ul class="main-menu__list main-menu__list--user main-menu__list--user-guest"><li class="main-menu__item" itemprop="name"><a class="main-menu__link" href="/signup?redirect_url=%2Fcourses%2Fhtml-css-basics%2Fhtml-document-structure" title="Sign up" data-modal="open" data-value="register" itemprop="url"><span class="main-menu__icon" aria-hidden="true"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#user"></use></svg></span>Sign up</a></li><li class="main-menu__item main-menu__item--login" itemprop="name"><a class="main-menu__link" href="/login?redirect_url=%2Fcourses%2Fhtml-css-basics%2Fhtml-document-structure" title="Log in" data-modal="open" data-value="login" itemprop="url"><span class="main-menu__icon" aria-hidden="true"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#login"></use></svg></span>Log in</a></li></ul></div></div></nav></div></div></header><div class="page-content page-content--chapter"><div class="page-content__inner"><div class="page-content__left"><aside class="page-content__left-column"><div class="page-content__left-top"><div class="page-content__left-image"><img src="/assets/courses/13/icon.svg" width="100" height="100" alt=""></div><nav class="breadcrumbs breadcrumbs--chapter" itemscope itemtype="http://schema.org/SiteNavigationElement"><ul class="breadcrumbs__list"><li class="breadcrumbs__item" itemprop="name"><a href="/" itemprop="url">Home</a></li><li class="breadcrumbs__item" itemprop="name"><a href="/courses" itemprop="url">Interactive courses</a></li><li class="breadcrumbs__item" itemprop="name"><a href="/courses/html-css-basics" itemprop="url">HTML and CSS basics</a></li></ul></nav></div><ol class="chapter-list"><li class="chapter-list__item chapter-list__item--current"><span
class="chapter-list__link"><span>HTML document structure</span></span><ul class="chapter-list__links"><li class="chapter-list__link chapter-list__link--active"><a >Theory</a><span
class="chapter-list__score chapter-list__score--empty">
0/18
</span></li><li class="chapter-list__link"><a href="/courses/html-css-basics/html-document-structure/practice">Variable practice</a><span class="chapter-list__score">
0/8
</span></li></ul></li><li class="chapter-list__item"><span
class="chapter-list__link"><a href="/courses/html-css-basics/text-markup" >Text markup</a><span
class="chapter-list__score chapter-list__score--empty">
0/20
</span></span></li><li class="chapter-list__item"><span
class="chapter-list__link"><a href="/courses/html-css-basics/links-and-images" >Links and images</a><span
class="chapter-list__score chapter-list__score--empty">
0/16
</span></span></li><li class="chapter-list__item"><span
class="chapter-list__link"><a href="/courses/html-css-basics/css-essentials" >CSS essentials</a><span
class="chapter-list__score chapter-list__score--empty">
0/16
</span></span></li><li class="chapter-list__item"><span
class="chapter-list__link"><a href="/courses/html-css-basics/typography" >Typography</a><span
class="chapter-list__score chapter-list__score--empty">
0/19
</span></span></li></ol></aside></div><div class="page-content__right"><div class="chapter-description"><h1 class="chapter-description__title"><span>Chapter 1: </span>HTML document structure</h1><div class="chapter-description__wrap"><a class="chapter-description__toggle chapter-description__toggle--theory chapter-description__toggle--active"><span class="chapter-description__type">Theory</span></a><a class="chapter-description__toggle chapter-description__toggle--practice" href="/courses/html-css-basics/html-document-structure/practice"><span class="chapter-description__type">Variable practice</span></a></div><div class="chapter-description__content chapter-description__content--theory"><div class="chapter-description__left"><span class="chapter-description__type">Theory</span><span class="chapter-description__info">
16 tasks, 2 challenges, 1 summary
</span><p class="chapter-description__text">Let's start by preparing the markup for the blog page, and we will start to understand what tags are used in the markup and what these tags are used for.</p><div class="chapter-description__controls text-container"><a class="button button--green button--large button--wide" href="/continue/html-css-basics/html-document-structure">
Start </a><br><span class="chapter-description__controls-text"></span></div></div><div class="chapter-tasks"><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/html-document-structure/doctype"><span class="chapter-tasks__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#chapter_arrow"></use></svg></span><span class="chapter-tasks__title">1. The HTML doctype, or document type declaration</span><span class="chapter-tasks__type">
Task
</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/html-document-structure/html-tags"><span class="chapter-tasks__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#chapter_arrow"></use></svg></span><span class="chapter-tasks__title">2. Basic HTML tags</span><span class="chapter-tasks__type">
Task
</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/html-document-structure/head-tag"><span class="chapter-tasks__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#chapter_arrow"></use></svg></span><span class="chapter-tasks__title">3. The head tag, which provides metadata information about the page</span><span class="chapter-tasks__type">
Task
</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/html-document-structure/title-tag"><span class="chapter-tasks__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#chapter_arrow"></use></svg></span><span class="chapter-tasks__title">4. The title tag for page titles</span><span class="chapter-tasks__type">
Task
</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/html-document-structure/main-tag"><span class="chapter-tasks__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#chapter_arrow"></use></svg></span><span class="chapter-tasks__title">5. The main tag for main content</span><span class="chapter-tasks__type">
Task
</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/html-document-structure/header-and-footer"><span class="chapter-tasks__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#chapter_arrow"></use></svg></span><span class="chapter-tasks__title">6. The header and footer tags</span><span class="chapter-tasks__type">
Task
</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/html-document-structure/section-tag"><span class="chapter-tasks__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#chapter_arrow"></use></svg></span><span class="chapter-tasks__title">7. The section tag, which is used for semantic sections</span><span class="chapter-tasks__type">
Task
</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/html-document-structure/nav-tag"><span class="chapter-tasks__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#chapter_arrow"></use></svg></span><span class="chapter-tasks__title">8. The nav tag, which is used to specify the main navigation</span><span class="chapter-tasks__type">
Task
</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/html-document-structure/article-tag"><span class="chapter-tasks__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#chapter_arrow"></use></svg></span><span class="chapter-tasks__title">9. The article tag, which is used to indicate an independent section</span><span class="chapter-tasks__type">
Task
</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/html-document-structure/aside-tag"><span class="chapter-tasks__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#chapter_arrow"></use></svg></span><span class="chapter-tasks__title">10. The aside tag, which is used to specify additional content</span><span class="chapter-tasks__type">
Task
</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/html-document-structure/h1-h6-tags"><span class="chapter-tasks__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#chapter_arrow"></use></svg></span><span class="chapter-tasks__title">11. The h1-h6 and title tags in HTML</span><span class="chapter-tasks__type">
Task
</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/html-document-structure/paragraph-tag"><span class="chapter-tasks__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#chapter_arrow"></use></svg></span><span class="chapter-tasks__title">12. The p tag for paragraphs</span><span class="chapter-tasks__type">
Task
</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/html-document-structure/finish-pages"><span class="chapter-tasks__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#chapter_arrow"></use></svg></span><span class="chapter-tasks__title">13. Let’s finish designing our pages</span><span class="chapter-tasks__type">
Task
</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/html-document-structure/meta-encoding-tag"><span class="chapter-tasks__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#chapter_arrow"></use></svg></span><span class="chapter-tasks__title">14. The meta tag, which is used for page character encoding</span><span class="chapter-tasks__type">
Task
</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/html-document-structure/meta-keywords-tag"><span class="chapter-tasks__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#chapter_arrow"></use></svg></span><span class="chapter-tasks__title">15. The meta tag, which is used for keywords</span><span class="chapter-tasks__type">
Task
</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/html-document-structure/another-frame-page"><span class="chapter-tasks__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#chapter_arrow"></use></svg></span><span class="chapter-tasks__title">16. Let’s connect another frame to the page</span><span class="chapter-tasks__type">
Task
</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/html-document-structure/summary"><span class="chapter-tasks__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#chapter_synopsis"></use></svg></span><span class="chapter-tasks__title">17. Summary of “HTML document structure”</span><span class="chapter-tasks__type">
Summary
</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/html-document-structure/first-challenge"><span class="chapter-tasks__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#chapter_shield"></use></svg></span><span class="chapter-tasks__title">18. First challenge</span><span class="chapter-tasks__type">
Challenge
</span></a></div><div class="chapter-tasks__item"><a class="chapter-tasks__link" href="/courses/html-css-basics/html-document-structure/mastery-challenge"><span class="chapter-tasks__icon"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#chapter_shield"></use></svg></span><span class="chapter-tasks__title">19. First mastery challenge</span><span class="chapter-tasks__type">
Challenge
</span></a></div></div></div></div></div></div></div><footer class="page-footer page-footer--tiny"><div class="page-footer__inner"><p><a href="/docs/cookies">Cookies</a> ∙
<a href="/docs/privacy">Privacy</a> ∙
<a href="/docs/agreement">License Agreement</a> ∙
<a href="/docs/about">About</a> ∙
<a href="/contacts">Contacts</a> ∙
© HTML Academy OÜ, 2019−2026
</p><div class="page-footer__financial"><img src="https://assets.htmlacademy.org/img/visa-white.svg?cs=96e54ec8c587db9d4b1d8d328ffd87c2ebfd9555" alt="VISA" title="VISA" width="35" height="35"><img src="https://assets.htmlacademy.org/img/mastercard-horizontal.v2.svg" alt="Mastercard" title="Mastercard" width="35" height="35"></div></div></footer><div class="modal"><div class="modal__inner"><div class="modal__wrapper js-login hidden"><button class="modal__close icon-close" type="button" title="Close" data-modal="close"></button><h4 class="modal__header">Log in</h4><ul class="modal__social"><li class="modal__social-link modal__social-link--fb"><a href="/login/fb?redirect_url=%2Fcourses%2Fhtml-css-basics%2Fhtml-document-structure" rel="nofollow" title="Log in via Facebook"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#facebook"></use></svg></a></li><li class="modal__social-link modal__social-link--google"><a href="/login/google?redirect_url=%2Fcourses%2Fhtml-css-basics%2Fhtml-document-structure" rel="nofollow" title="Log in via Google"><svg height="30" width="30" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M457.732 216.625c2.628 14.041 4.063 28.743 4.063 44.098C461.796 380.688 381.481 466 260.204 466c-116.023 0-210-93.977-210-210s93.977-210 210-210c56.704 0 104.077 20.867 140.44 54.73l-59.204 59.197v-.135c-22.046-21.002-50-31.762-81.236-31.762-69.297 0-125.604 58.537-125.604 127.841 0 69.29 56.306 127.968 125.604 127.968 62.87 0 105.653-35.965 114.46-85.312h-114.46v-81.902h197.528z"/></svg></a></li></ul><div class="modal__or"><span>or</span></div><form class="modal__form form" action="/login?redirect_url=%2Fcourses%2Fhtml-css-basics%2Fhtml-document-structure" autocomplete="off" method="post" data-submit="o"><input type="hidden" name="csrf_name" value="csrf69aea72cda6d4"><input type="hidden" name="csrf_value" value="6a001494047e4be20e3569260256ff00"><div class="form__group"><label class="sr-only" for="login-email">Email</label><input class="field field--text field--full-width" type="email" name="email" placeholder="Email" value="" id="login-email"></div><div class="form__group"><label class="sr-only" for="login-password">Password</label><input class="field field--text field--full-width ym-disable-keys" type="password" name="password" placeholder="Password" id="login-password"></div><input class="button button--full-width" type="submit" data-submit-text="Logging in…" value="Log in"></form><p class="modal__forgot-password"><a href="/recover" data-modal="open" data-value="recover">Forgot your password?</a></p><a class="modal__bottom-link" href="/signup" data-modal="open" data-value="register">Sign up</a></div><div class="modal__wrapper js-register hidden"><button class="modal__close icon-close" type="button" title="Close" data-modal="close"></button><h4 class="modal__header">Sign up</h4><ul class="modal__social"><li class="modal__social-link modal__social-link--fb"><a href="/login/fb?redirect_url=%2Fcourses%2Fhtml-css-basics%2Fhtml-document-structure" rel="nofollow" title="Log in via Facebook"><svg aria-hidden="true"><use xlink:href="/img/sprites/general.svg#facebook"></use></svg></a></li><li class="modal__social-link modal__social-link--google"><a href="/login/google?redirect_url=%2Fcourses%2Fhtml-css-basics%2Fhtml-document-structure" rel="nofollow" title="Log in via Google"><svg height="30" width="30" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M457.732 216.625c2.628 14.041 4.063 28.743 4.063 44.098C461.796 380.688 381.481 466 260.204 466c-116.023 0-210-93.977-210-210s93.977-210 210-210c56.704 0 104.077 20.867 140.44 54.73l-59.204 59.197v-.135c-22.046-21.002-50-31.762-81.236-31.762-69.297 0-125.604 58.537-125.604 127.841 0 69.29 56.306 127.968 125.604 127.968 62.87 0 105.653-35.965 114.46-85.312h-114.46v-81.902h197.528z"/></svg></a></li></ul><div class="modal__or"><span>or</span></div><form class="modal__form form" action="/signup?redirect_url=%2Fcourses%2Fhtml-css-basics%2Fhtml-document-structure" autocomplete="off" method="post"><input type="hidden" name="csrf_name" value="csrf69aea72cda6d4"><input type="hidden" name="csrf_value" value="6a001494047e4be20e3569260256ff00"><div class="form__group"><label class="sr-only" for="email">
Email
<span class="required"><span class="sr-only">Required field</span><span class="required__star">*</span></span></label><div class="form__group-fields"><input class="field field--text field--full-width" type="email" name="email" value="" id="email" required placeholder="Email"></div></div><div class="form__group"><label class="sr-only" for="password">
Password
<span class="required"><span class="sr-only">Required field</span><span class="required__star">*</span></span></label><div class="form__group-fields"><input class="field field--text field--full-width" type="password" name="password" value="" id="password" required placeholder="Password"></div></div><div class="form__group"><label class="checkbox"><input class="checkbox__input" type="checkbox" name="agreement" value="1" required><span class="checkbox__text"><span>By signing up, you agree to our <a href="/docs/agreement" target="_blank">License Agreement</a> and <a href="/docs/privacy" target="_blank">Privacy Policy</a>.</span></span></label></div><input class="button button--full-width" type="submit" data-submit-text="Signing up…" value="Sign up"></form><a class="modal__bottom-link" href="/login?redirect_url=%2Fcourses%2Fhtml-css-basics%2Fhtml-document-structure" data-modal="open" data-value="login">Log in</a></div><div class="modal__wrapper modal__wrapper--no-btn-bottom js-recover hidden"><button class="modal__close icon-close" type="button" title="Close" data-modal="close"></button><h4 class="modal__header">Restore access</h4><p class="modal__text-accent">Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.</p><form class="modal__form form" action="/recover" autocomplete="off" method="post" data-submit="o"><input type="hidden" name="csrf_name" value="csrf69aea72cda6d4"><input type="hidden" name="csrf_value" value="6a001494047e4be20e3569260256ff00"><div class="form__group"><label class="sr-only" for="recovery-email">Email</label><input class="field field--text field--full-width" type="email" name="email" placeholder="Email" value="" id="recovery-email"></div><script src='https://www.google.com/recaptcha/api.js'></script><div class="form__group"><div class="g-recaptcha" data-sitekey="6LetCTEqAAAAANROWtPzfC7Rfg9iIRiRt2k2FPn7"></div></div><input class="button button--full-width" type="submit" data-submit-text="Sending…" value="Send"></form><p class="modal__text">Forgot to connect your email to the profile? Email us and we’ll help.</p></div></div></div><div class="banner-bottom" id="cookies_disclaimer_container"><div class="banner-bottom__inner"><p>We are using cookies to gather information which will help you use our website most effectively. You can read about this <a href="/docs/cookies">here</a> or disable this feature if you want. By continuing to browse the site, you agree to our use of cookies.</p><button class="button button--green" type="button" id="cookies_disclaimer_button">Agree</button></div></div><script type="text/javascript">
(function (n) {
var c = document.getElementById('cookies_disclaimer_container');
var b = document.getElementById('cookies_disclaimer_button');
b.onclick = function() {
c.remove();
var d = new Date();
d.setTime(d.getTime() + 60 * 60* 24 * 365 * 1000);
document.cookie = n + "=1; path=/; expires=" + d.toUTCString();
};
})('hidden_cookies_disclaimer');
</script><script async src="https://assets.htmlacademy.org/js/general.v274.js" data-assets="https://assets.htmlacademy.org" data-require="modal,form,nav"></script></body></html>