{"componentChunkName":"component---node-modules-rocketseat-gatsby-theme-docs-core-src-templates-docs-query-js","path":"/html/contents","result":{"data":{"mdx":{"id":"204ee556-fb27-57b9-8f21-556c4e7048d7","excerpt":"01.Introduction to HTML Watch these couple of videos as an introduction to HTML. Don't worry if some things don't make a lot of sense, everything will sink in…","fields":{"slug":"/html/contents/"},"frontmatter":{"title":"Contents","description":"Contents | HTML | RefugeesCode","image":null,"disableTableOfContents":null},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Contents\",\n  \"description\": \"Contents | HTML | RefugeesCode\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h2\", {\n    \"id\": \"01introduction-to-html\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#01introduction-to-html\",\n    \"aria-label\": \"01introduction to html permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"01.Introduction to HTML\"), mdx(\"p\", null, \"Watch these couple of videos as an introduction to HTML. Don't worry if some things don't make a lot of sense, everything will sink in eventually.\"), mdx(\"p\", null, \"\\uD83D\\uDCFD \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.youtube.com/watch?v=2yIf_mYvprk\"\n  }, \"What is HTML?\")), mdx(\"p\", null, \"\\uD83D\\uDCFD CSS Tricks: \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://css-tricks.com/video-screencasts/58-html-css-the-very-basics/\"\n  }, \"HTML & CSS - The VERY Basics\")), mdx(\"p\", null, \"Read this article until \\\"Understanding Common CSS Terms\\\" to get a general view of HTML. Don't worry if you don't understand, we'll go back to this later.\"), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://learn.shayhowe.com/html-css/building-your-first-web-page/#common-html-terms\"\n  }, \"Building your first web page\")), mdx(\"h3\", {\n    \"id\": \"tags\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#tags\",\n    \"aria-label\": \"tags permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Tags\"), mdx(\"p\", null, \"Read these articles about HTML tags:\"), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.geeksforgeeks.org/html-course-basics-of-html/?ref=rp\"\n  }, \"HTML Basic tags\")), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://learningsolutionsmag.com/articles/basic-tags-intro-to-html-tagging-in-elearning-content\"\n  }, \"A list of the 12 most common tags\")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Can you explain what is a tag?\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"And what is the difference with an element?\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Review the tags list and find one that looks interesting, what is it for?\")), mdx(\"h3\", {\n    \"id\": \"nested-tags\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#nested-tags\",\n    \"aria-label\": \"nested tags permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Nested tags\"), mdx(\"p\", null, \"Tags can be nested inside other tags. To maintain readable code, the parent tags (the outermost ones) should each be on a new line with the nested element indented. This is just for reading purposes, since the browser doesn't care about how your code is indented. However, you should get used to write it so you and anyone who might read it later can understand what's happening in a glance. Read the following articles to dive deeper into nesting tags:\"), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.digitalocean.com/community/tutorials/how-to-nest-html-elements\"\n  }, \"How to nest HTML elements\")), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.lifewire.com/nesting-html-tags-3466475\"\n  }, \"Nesting HTML tags\")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Why is nesting so important in HTML?\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Is your CSS going to improve if you nest your HTML?\")), mdx(\"h3\", {\n    \"id\": \"comments\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#comments\",\n    \"aria-label\": \"comments permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Comments\"), mdx(\"p\", null, \"Comments are an important (and polemic) topic in software programming. The comments speak from themselves. They're just pieces of code that are \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"commented\"), \" out and are not interpreted by the browser whatsoever. Their only purpose is to serve as annotations to you or anyone who might read the code later. We won't start now the argument on whether you should use them or not. However, you should definitely know how to write them. Read the following articles to find out how:\"), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.bitdegree.org/learn/html-comment-tag\"\n  }, \"HTML comment tag\")), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://html.com/tags/comment-tag/\"\n  }, \"The HTML Comment Tag: Here\\u2019s How To Use It In Your Code\")), mdx(\"p\", null, \"Now you know how to comment your code:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Could you explain why comments are important?\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Can you think of advantages and disadvantages of using comments in your applications?\")), mdx(\"h3\", {\n    \"id\": \"exercises\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#exercises\",\n    \"aria-label\": \"exercises permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Exercises\"), mdx(\"p\", null, \"\\u26A0\\uFE0F \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"These exercises are required to complete Refugees Code\"), \". Please log in into your freecodeCamp profile to save the advance. If you have any problems, contact the teachers in Slack\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/\"\n  }, \"Introduction to HTML elements\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/say-hello-to-html-elements\"\n  }, \"Say Hello to HTML Elements\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/headline-with-the-h2-element\"\n  }, \"Headline with the h2 Element\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element\"\n  }, \"Inform with the Paragraph Element\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/fill-in-the-blank-with-placeholder-text\"\n  }, \"Fill in the Blank with Placeholder Text\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/uncomment-html\"\n  }, \"Uncomment HTML\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/comment-out-html\"\n  }, \"Comment out HTML\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/delete-html-elements\"\n  }, \"Delete HTML Elements\"))), mdx(\"hr\", null), mdx(\"h2\", {\n    \"id\": \"02-html-structure-and-basic-tags\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#02-html-structure-and-basic-tags\",\n    \"aria-label\": \"02 html structure and basic tags permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"02. HTML structure and basic tags\"), mdx(\"h3\", {\n    \"id\": \"the-html-tag\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#the-html-tag\",\n    \"aria-label\": \"the html tag permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"The HTML tag\"), mdx(\"p\", null, \"The HTML tag is the tag that rules them all. It is the only tag that needs to be in every HTML document. No matter what the content of that document is, there has to be an \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<html>\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"</html>\"), \" in it.\"), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html\"\n  }, \"The HTML element\")), mdx(\"h3\", {\n    \"id\": \"the-head-tag\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#the-head-tag\",\n    \"aria-label\": \"the head tag permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"The HEAD tag\"), mdx(\"p\", null, \"The head tag is a bit trickier, since it actually contains metadata that will not be displayed on the page, and it only serves information to the browser that the user won't be aware of.\"), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://espirian.co.uk/html-introduction/#head-element\"\n  }, \"Anatomy of a web page - The head element\")), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.dummies.com/web-design-development/html5/anatomy-of-the-head-in-html5/\"\n  }, \"Anatomy of the head in HTML5\")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Why is the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"<head>\"), \" tag so important?\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"What's the main difference between the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"<head>\"), \" and the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"<body>\"), \" tags?\")), mdx(\"h3\", {\n    \"id\": \"html-landmarks\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#html-landmarks\",\n    \"aria-label\": \"html landmarks permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"HTML Landmarks\"), mdx(\"p\", null, \"HTML landmarks are tags in your page to define areas like the main content or a navigation region. It defines semantically the website and also helps users using assistive technologies to navigate comfortably through the website.\"), mdx(\"p\", null, \"Landmarks define the outer structure of our website, defining the areas of the page based on its responsibility\"), mdx(\"p\", null, \"The following readings are a bit longer than usual, but once you've gone through it, you'll be able to understand much better how layouts are built in HTML and what's the purpose of some of the most important tags in the language.\"), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.accessibility-developer-guide.com/knowledge/semantics/meaning/\"\n  }, \"Semantics provide meaning\")), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure\"\n  }, \"Document and website structure\")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"What are semantic tags?\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Why are they important when building your layout?\")), mdx(\"h3\", {\n    \"id\": \"html-text-formatting\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#html-text-formatting\",\n    \"aria-label\": \"html text formatting permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"HTML Text formatting\"), mdx(\"p\", null, \"One of HTML's main jobs is to give text structure and meaning (also known as semantics) so that a browser can display it correctly. This article explains the way HTML can be used to structure a page of text by adding headings and paragraphs, emphasizing words, creating lists, and more.\"), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals\"\n  }, \"HTML text fundamentals\")), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://flaviocopes.com/html-text-tags/\"\n  }, \"HTML text tags\")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"How many \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"<h1>\"), \" tags should be in your document? And \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"<h2>\"), \"?\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"What's the difference between a \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"<p>\"), \" tag and a \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"<span>\"), \" tag?\")), mdx(\"h3\", {\n    \"id\": \"exercises-1\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#exercises-1\",\n    \"aria-label\": \"exercises 1 permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Exercises\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/declare-the-doctype-of-an-html-document\"\n  }, \"Declare the Doctype of an HTML Document\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/define-the-head-and-body-of-an-html-document\"\n  }, \"Define the Head and Body of an HTML Document\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/introduction-to-html5-elements\"\n  }, \"Introduction to HTML5 Elements\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list\"\n  }, \"Create a Bulleted Unordered List\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/create-an-ordered-list\"\n  }, \"Create an Ordered List\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/nest-many-elements-within-a-single-div-element\"\n  }, \"Nest Many Elements within a Single div Element\"))), mdx(\"hr\", null), mdx(\"h2\", {\n    \"id\": \"03-html-advanced-elements-and-properties\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#03-html-advanced-elements-and-properties\",\n    \"aria-label\": \"03 html advanced elements and properties permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"03. HTML advanced elements and properties\"), mdx(\"h3\", {\n    \"id\": \"html-attributes\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#html-attributes\",\n    \"aria-label\": \"html attributes permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"HTML attributes\"), mdx(\"p\", null, \"An attribute extends a tag, changing its behavior or providing metadata. An attribute always has the form \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"name=value\"), \" (the attribute's identifier followed by its associated value).\"), mdx(\"p\", null, \"\\uD83D\\uDCFD \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.youtube.com/watch?v=uIWmPL91Dn4\"\n  }, \"HTML | Attributes\")), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.tutorialrepublic.com/html-tutorial/html-attributes.php\"\n  }, \"HTML Attributes\")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"What are attributes for?\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"How are attributes formed?\")), mdx(\"h3\", {\n    \"id\": \"hyperlinks\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#hyperlinks\",\n    \"aria-label\": \"hyperlinks permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Hyperlinks\"), mdx(\"p\", null, \"A basic link (that is, some element that you can click to be redirected to another website or section in your document) is created by wrapping the text (or other content) you want to turn into a link inside an \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<a>\"), \" element, and giving it an \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"href\"), \" attribute (also known as a Hypertext Reference, or target) that will contain the web address you want the link to point to.\"), mdx(\"p\", null, \"You can read more about hyperlinks in these articles and watch the video below:\"), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks\"\n  }, \"Creating Hyperlinks\")), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://css-tricks.com/a-complete-guide-to-links-and-buttons/\"\n  }, \"A Complete Guide to Links and Buttons\")), mdx(\"p\", null, \"\\uD83D\\uDCFD \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.youtube.com/watch?v=DiSvq5SgLMI&ab_channel=DaniKrossing\"\n  }, \"How to create links in HTML\")), mdx(\"h3\", {\n    \"id\": \"images\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#images\",\n    \"aria-label\": \"images permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Images\"), mdx(\"p\", null, \"The HTML \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<img>\"), \" element embeds an image into the document. Formats could be,\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".jpg\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".gif\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".png\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".svg\"), \". You'll learn later what a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".svg\"), \" file is, and how it can be used together with the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<svg>\"), \" tag. For now, read these articles to get a solid foundation on how images work on the web:\"), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.bitdegree.org/learn/html-image-tag\"\n  }, \"HTML Image Tag\")), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\"\n  }, \"MDN: img: The Image Embed Element\")), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://html.com/tags/img/\"\n  }, \"HTML Tags Guide To Adding Images To Your Web Documents\")), mdx(\"h3\", {\n    \"id\": \"svg\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#svg\",\n    \"aria-label\": \"svg permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"SVG\"), mdx(\"p\", null, \"SVG is a special format for rendering images on the web that differs greatly from what we are used to with normal formats like \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".jpg\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".png\"), \" . These images are formed with vectors instead of pixels, unleashing a whole new range of possibilities for image and data visualization on the web. It can seem daunting at first, and it is, it's a complex topic and there are lots to know about it. Don't worry though, we've prepared a selection of readings that will guide you through it. Remember to ask your mentor if you have any doubts at all. Good reading!\"), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.freecodecamp.org/news/svg-basics-what-are-scalable-vector-graphics-and-how-do-you-use-them/\"\n  }, \"What Is an SVG File? SVG Image and Tags Explained\")), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.freecodecamp.org/news/use-svg-images-in-css-html/\"\n  }, \"How to Use SVG Images in CSS and HTML \\u2013 A Tutorial for Beginners\")), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web\"\n  }, \"Adding vector graphics to the Web\")), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.sitepoint.com/svg-scalable-vector-graphics-overview/\"\n  }, \"Scalable vector graphics - An Overview\")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"What's the difference between an image in \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"jpeg\"), \" and a \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"svg\"), \"?\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"What are the advantages of one against the other?\")), mdx(\"h2\", {\n    \"id\": \"exercises-2\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#exercises-2\",\n    \"aria-label\": \"exercises 2 permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Exercises\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/add-images-to-your-website\"\n  }, \"Add Images to Your Website\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/link-to-external-pages-with-anchor-elements\"\n  }, \"Link to External Pages with Anchor Elements\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/link-to-internal-sections-of-a-page-with-anchor-elements\"\n  }, \"Link to Internal Sections of a Page with Anchor Elements\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph\"\n  }, \"Nest an Anchor Element within a Paragraph\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/turn-an-image-into-a-link\"\n  }, \"Turn an Image into a Link\"))), mdx(\"hr\", null), mdx(\"h2\", {\n    \"id\": \"04-html-forms\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#04-html-forms\",\n    \"aria-label\": \"04 html forms permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"04. HTML forms\"), mdx(\"p\", null, \"We've covered basic HTML elements and attributes. We already know how to create static semantic HTML websites, display information, link pages, etc. Now, we will add a very important part of HTML: forms.\"), mdx(\"p\", null, \"\\uD83D\\uDCA1 Forms are essential to interact and gather data from the user, and it's very important to use semantically correct forms. The data gathered in a form is usually sent to a server, but nowadays, it can be used in JavaScript to create interaction. Don't worry about this now, you'll learn about this in the following modules.\"), mdx(\"p\", null, \"A form is made of multiple HTML elements: labels, text inputs, checkboxes, radio buttons, buttons...etc\"), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.tutorialrepublic.com/html-tutorial/html-forms.php\"\n  }, \"HTML Forms\")), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://html.com/forms/\"\n  }, \"HTML Web Forms Tutorial For Coding Beginners\")), mdx(\"p\", null, \"Now watch this video to see how a form is actually built into a website:\"), mdx(\"p\", null, \"\\uD83D\\uDCFD \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.youtube.com/watch?v=LuKFsFNtZJg\"\n  }, \"HTML Forms\")), mdx(\"p\", null, \"One of the resources that appears on the video is from MDN, as always, this should be one of your reference guides when looking for information in web development. We'll add the link at the end of the section, in case you want to dive deeper into forms.\"), mdx(\"h3\", {\n    \"id\": \"exercises-3\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#exercises-3\",\n    \"aria-label\": \"exercises 3 permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Exercises\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, mdx(\"a\", {\n    parentName: \"strong\",\n    \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/create-a-text-field\"\n  }, \"Create a Text Field\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, mdx(\"a\", {\n    parentName: \"strong\",\n    \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/add-placeholder-text-to-a-text-field\"\n  }, \"Add Placeholder Text to a Text Field\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, mdx(\"a\", {\n    parentName: \"strong\",\n    \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/create-a-form-element\"\n  }, \"Create a Form Element\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, mdx(\"a\", {\n    parentName: \"strong\",\n    \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form\"\n  }, \"Add a Submit Button to a Form\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, mdx(\"a\", {\n    parentName: \"strong\",\n    \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/use-html5-to-require-a-field\"\n  }, \"Use HTML5 to Require a Field\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, mdx(\"a\", {\n    parentName: \"strong\",\n    \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons\"\n  }, \"Create a Set of Radio Buttons\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, mdx(\"a\", {\n    parentName: \"strong\",\n    \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes\"\n  }, \"Create a Set of Checkboxes\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, mdx(\"a\", {\n    parentName: \"strong\",\n    \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes\"\n  }, \"Use the value attribute with Radio Buttons and Checkboxes\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, mdx(\"a\", {\n    parentName: \"strong\",\n    \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default\"\n  }, \"Check Radio Buttons and Checkboxes by Default\")))), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"What's the difference between a checkbox and a radio input?\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"What are the attributes that a form should always have?\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"How do you make sure an input is focused when you click on a label?\")));\n}\n;\nMDXContent.isMDXComponent = true;","headings":[{"depth":2,"value":"01.Introduction to HTML"},{"depth":3,"value":"Tags"},{"depth":3,"value":"Nested tags"},{"depth":3,"value":"Comments"},{"depth":3,"value":"Exercises"},{"depth":2,"value":"02. HTML structure and basic tags"},{"depth":3,"value":"The HTML tag"},{"depth":3,"value":"The HEAD tag"},{"depth":3,"value":"HTML Landmarks"},{"depth":3,"value":"HTML Text formatting"},{"depth":3,"value":"Exercises"},{"depth":2,"value":"03. HTML advanced elements and properties"},{"depth":3,"value":"HTML attributes"},{"depth":3,"value":"Hyperlinks"},{"depth":3,"value":"Images"},{"depth":3,"value":"SVG"},{"depth":2,"value":"Exercises"},{"depth":2,"value":"04. HTML forms"},{"depth":3,"value":"Exercises"}]}},"pageContext":{"slug":"/html/contents/","prev":{"label":"Introduction","link":"/html/introduction"},"next":{"label":"HTML Section project","link":"/html/html-section-project"},"repositoryEditUrl":"https://github.com/rocketseat/gatsby-themes/tree/main/examples/gatsby-theme-docs/src/docs/html/contents.mdx","repositoryProvider":"GitHub"}},"staticQueryHashes":["1954253342","2328931024","2501019404","973074209"]}