<jupyter_start><jupyter_text>Responsive Web Design Certification  Basic HTML and HTML 5  Introduction to Basic HTML and HTML5 HTML, or HyperText Markup Language, is a markup language used to describe the structure of a web page. It uses a special syntax or notation to organize and give information about the page to the browser. Elements usually have opening and closing tags that surround and give meaning to content. For example, there are different tag options to place around text to show whether it is a heading, a paragraph, or a list.For example:```HTMLTop level heading: Maybe a page titleA paragraph of text. Some information we would like to communicate to the viewer. This can be as long or short as we would like.  Number one on the list  Number two  A third item```Becomes:Top level heading: Maybe a page titleA paragraph of text. Some information we would like to communicate to the viewer. This can be as long or short as we would like.        Number one on the list    Number two    A third item    HTML, or HyperText Markup Language, is a markup language used to describe the structure of a web page. It uses a special syntax or notation to organize and give information about the page to the browser. Elements usually have opening and closing tags that surround and give meaning to content. For example, there are different tag options to place around text to show whether it is a heading, a paragraph, or a list.For example:```HTMLTop level heading: Maybe a page titleA paragraph of text. Some information we would like to communicate to the viewer. This can be as long or short as we would like.  Number one on the list  Number two  A third item```Becomes:Top level heading: Maybe a page titleA paragraph of text. Some information we would like to communicate to the viewer. This can be as long or short as we would like.        Number one on the list    Number two    A third item    ---    The HyperText part of HTML comes from the early days of the web and its original use case. Pages usually contained static documents that contained references to other documents. These references contained hypertext links used by the browser to navigate to the reference document so the user could read the reference document without having to manually search for it.As web pages and web applications grow more complex, the W3 Consortium updates the HTML specification to ensure that a webpage can be shown reliably on any browser. The latest version of HTML is HTML5.This section introduces how to use HTML elements to give structure and meaning to your web content.  Say Hello to HTML Elements Welcome to freeCodeCamp's HTML coding challenges. These will walk you through web development step-by-step.First, you'll start by building a simple web page using HTML. You can edit code in your code editor, which is embedded into this web page.Do you see the code in your code editor that says `Hello`? That's an HTML element.Most HTML elements have an opening tag and a closing tag.Opening tags look like this:``Closing tags look like this:``The only difference between opening and closing tags is the forward slash after the opening bracket of a closing tag.Each challenge has tests you can run at any time by clicking the "Run tests" button. When you pass all tests, you'll be prompted to submit your solution and go to the next coding challenge.---To pass the test on this challenge, change your `h1` element's text to say "Hello World". ```HTMLHello World```<jupyter_code>IFrame('./source-solution/01-basic-html-and-html5/000-say-hello-to-html-elements.html', '100%', 250)<jupyter_output><empty_output><jupyter_text>Headline with the h2 Element Over the next few lessons, we'll build an HTML5 cat photo web app piece-by-piece.The `h2` element you will be adding in this step will add a level two heading to the web page.This element tells the browser about the structure of your website. h1 elements are often used for main headings, while `h2` elements are generally used for subheadings. There are also `h3`, `h4`, `h5` and `h6` elements to indicate different levels of subheadings.---Add an `h2` tag that says "CatPhotoApp" to create a second HTML element below your "Hello World" `h1` element. ```HTMLHello WorldCatPhotoApp```<jupyter_code>IFrame('./source-solution/01-basic-html-and-html5/001-headline-with-the-h2-element.html', '100%', 250)<jupyter_output><empty_output><jupyter_text>Inform with the Paragraph Element `p` elements are the preferred element for paragraph text on websites. `p` is short for "paragraph".You can create a paragraph element like this:`I'm a p tag!`---Create a p element below your h2 element, and give it the text "Hello Paragraph".Note: As a convention, all HTML tags are written in lowercase, for example `` and not ``. ```HTMLHello WorldCatPhotoAppHello Paragraph```<jupyter_code>IFrame('./source-solution/01-basic-html-and-html5/002-inform-with-the-paragraph-element.html', '100%', 250)<jupyter_output><empty_output><jupyter_text>Fill in the Blank with Placeholder Text Web developers traditionally use lorem ipsum text as placeholder text. The lorem ipsum text is randomly scraped from a famous passage by Cicero of Ancient Rome.Lorem ipsum text has been used as placeholder text by typesetters since the 16th century, and this tradition continues on the web.Well, 5 centuries is long enough. Since we're building a CatPhotoApp, let's use something called "kitty ipsum text".---Replace the text inside your p element with the first few words of this `kitty ipsum text: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.` ```HTMLHello WorldCatPhotoAppKitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.```<jupyter_code>IFrame('./source-solution/01-basic-html-and-html5/003-fill-in-the-blank-with-placeholder-text.html', '100%', 250)<jupyter_output><empty_output><jupyter_text>Uncomment HTML Commenting is a way that you can leave comments for other developers within your code without affecting the resulting output that is displayed to the end user.Commenting is also a convenient way to make code inactive without having to delete it entirely.Comments in HTML start with ``---Uncomment your `h1`, `h2` and `p` elements. ```HTMLHello WorldCatPhotoAppKitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.```<jupyter_code>IFrame('./source-solution/01-basic-html-and-html5/004-uncomment-html.html', '100%', 250)<jupyter_output><empty_output><jupyter_text>Comment out HTML Remember that in order to start a comment, you need to use ``Here you'll need to end the comment before your `h2` element begins.---Comment out your `h1` element and your `p` element, but not your `h2` element. ```HTMLHello World -->CatPhotoAppKitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. -->```<jupyter_code>IFrame('./source-solution/01-basic-html-and-html5/005-comment-out-html.html', '100%', 250)<jupyter_output><empty_output><jupyter_text>Delete HTML Elements Our phone doesn't have much vertical space.Let's remove the unnecessary elements so we can start building our CatPhotoApp.---Delete your h1 element so we can simplify our view. ```HTMLCatPhotoAppKitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.```<jupyter_code>IFrame('./source-solution/01-basic-html-and-html5/006-delete-html-elements.html', '100%', 250)<jupyter_output><empty_output><jupyter_text>Introduction to HTML5 Elements HTML5 introduces more descriptive HTML tags. These include `main`, `header`, `footer`, `nav`, `video`, `article`, `section` and others.These tags give a descriptive structure to your HTML, make your HTML easier to read, and help with Search Engine Optimization (SEO) and accessibility. The `main` HTML5 tag helps search engines and other developers find the main content of your page.Example usage, a `main` element with two child elements nested inside it:```   Hello World  Hello Paragraph```Note: Many of the new HTML5 tags and their benefits are covered in the Applied Accessibility section.---Create a second p element after the existing `p` element with the following kitty ipsum text: `Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.`Then, create a main element and nest the two `p` elements inside the `main` element. ```HTMLCatPhotoApp    Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.    Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.```<jupyter_code>IFrame('./source-solution/01-basic-html-and-html5/007-introduction-to-html5-elements.html', '100%', 250)<jupyter_output><empty_output><jupyter_text>Add Images to Your Website You can add images to your website by using the `img` element, and point to a specific image's URL using the `src` attribute.An example of this would be:``Note that `img` elements are self-closing.All `img` elements must have an `alt` attribute. The text inside an `alt` attribute is used for screen readers to improve accessibility and is displayed if the image fails to load.Note: If the image is purely decorative, using an empty `alt` attribute is a best practice.Ideally the `alt` attribute should not contain special characters unless needed.Let's add an `alt` attribute to our `img` example above:``---Let's try to add an image to our website:Within the existing main element, insert an `img` element before the existing `p` elements.Now set the `src` attribute so that it points to this url:`https://bit.ly/fcc-relaxing-cat`Finally, don't forget to give your `img` element an `alt` attribute with applicable text. ```HTMLCatPhotoApp  Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.  Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.```<jupyter_code>IFrame('./source-solution/01-basic-html-and-html5/008-add-images-to-your-website.html', '100%', 250)<jupyter_output><empty_output><jupyter_text>Link to External Pages with Anchor Elements You can use `a` (_anchor_) elements to link to content outside of your web page.`a` elements need a destination web address called an `href` attribute. They also need anchor text. Here's an example:`this links to freecodecamp.org`Then your browser will display the text "**this links to freecodecamp.org**" as a link you can click. And that link will take you to the web address **https://www.freecodecamp.org**.---Create an `a` element that links to `http://freecatphotoapp.com` and has "cat photos" as its anchor text. ```HTMLCatPhotoApp  cat photos    Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.  Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.```<jupyter_code>IFrame('./source-solution/01-basic-html-and-html5/009-link-to-external-pages-with-anchor-elements.html', '100%', 250)<jupyter_output><empty_output><jupyter_text>Link to Internal Sections of a Page with Anchor Elements `a` (_anchor_) elements can also be used to create internal links to jump to different sections within a webpage.To create an internal link, you assign a link's `href` attribute to a hash symbol `` plus the value of the `id` attribute for the element that you want to internally link to, usually further down the page. You then need to add the same `id` attribute to the element you are linking to. An `id` is an attribute that uniquely describes an element.Below is an example of an internal anchor link and its target element:```HTMLContacts...Contacts```When users click the Contacts link, they'll be taken to the section of the webpage with the Contacts header element.---Change your external link to an internal link by changing the `href` attribute to "footer" and the text from "cat photos" to "Jump to Bottom".Remove the `target="_blank"` attribute from the anchor tag since this causes the linked document to open in a new window tab.Then add an `id` attribute with a value of "footer" to the `` element at the bottom of the page. ```HTMLCatPhotoApp  Jump to Bottom    Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.  Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.  Meowwww loved it, hated it, loved it, hated it yet spill litter box, scratch at owner, destroy all furniture, especially couch or lay on arms while you're using the keyboard. Missing until dinner time toy mouse squeak roll over. With tail in the air lounge in doorway. Man running from cops stops to pet cats, goes to jail.  Intently stare at the same spot poop in the plant pot but kitten is playing with dead mouse. Get video posted to internet for chasing red dot leave fur on owners clothes meow to be let out and mesmerizing birds leave fur on owners clothes or favor packaging over toy so purr for no reason. Meow to be let out play time intently sniff hand run outside as soon as door open yet destroy couch.Copyright Cat Photo App```<jupyter_code>IFrame('./source-solution/01-basic-html-and-html5/010-link-to-internal-sections-of-a-page-with-anchor-elements.html', '100%', 250)<jupyter_output><empty_output><jupyter_text>Nest an Anchor Element within a Paragraph You can nest links within other text elements.```HTML     Here's a  link to freecodecamp.org for you to follow.```Let's break down the example: Normal text is wrapped in the `p` element:` Here's a ... for you to follow. ` Next is the anchor element `` (which requires a closing tag ``):` ... ` target is an anchor tag attribute that specifies where to open the link and the value `"_blank"` specifies to open the link in a new tab `href` is an anchor tag attribute that contains the URL address of the link:` ... ` The text, **"link to freecodecamp.org"**, within the `a` element called `anchor text`, will display a link to click:`link to freecodecamp.org` The final output of the example will look like this:Here's a [link to freecodecamp.org](http://freecodecamp.org) for you to follow.---Now nest the existing `a` element within a new `p` element (just after the existing main element). The new paragraph should have text that says "View more cat photos", where "cat photos" is a link, and the rest of the text is plain text. ```HTMLCatPhotoApp  View more     cat photos    Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.  Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.```<jupyter_code>IFrame('./source-solution/01-basic-html-and-html5/011-nest-an-anchor-element-within-a-paragraph.html', '100%', 250)<jupyter_output><empty_output><jupyter_text>Make Dead Links Using the Hash Symbol Sometimes you want to add `a` elements to your website before you know where they will link.This is also handy when you're changing the behavior of a link using `JavaScript`, which we'll learn about later.---The current value of the `href` attribute is a link that points to "http://freecatphotoapp.com". Replace the href attribute value with a ``, also known as a hash symbol, to create a dead link.For example: `href=""` ```HTMLCatPhotoApp  Click here to view more cat photos.    Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.  Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.```<jupyter_code>IFrame('./source-solution/01-basic-html-and-html5/012-make-dead-links-using-the-hash-symbol.html', '100%', 250)<jupyter_output><empty_output><jupyter_text>Turn an Image into a Link You can make elements into links by nesting them within an `a` element.Nest your image within an `a` element. Here's an example:``Remember to use `` as your `a` element's `href` property in order to turn it into a dead link.---Place the existing image element within an `a` (_anchor_) element.Once you've done this, hover over your image with your cursor. Your cursor's normal pointer should become the link clicking pointer. The photo is now a link. ```HTMLCatPhotoApp  Click here to view more .  Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.  Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.```<jupyter_code>IFrame('./source-solution/01-basic-html-and-html5/013-turn-an-image-into-a-link.html', '100%', 250)<jupyter_output><empty_output><jupyter_text>Create a Bulleted Unordered List HTML has a special element for creating unordered lists, or bullet point style lists.Unordered lists start with an opening `` element, followed by any number of `` elements. Finally, unordered lists close with a ``For example:```HTML  milk  cheese```would create a bullet point style list of "milk" and "cheese".---Remove the last two `p` elements and create an unordered list of three things that cats love at the bottom of the page. ```HTMLCatPhotoApp  Click here to view more cat photos.        milk    fish    bird  ```<jupyter_code>IFrame('./source-solution/01-basic-html-and-html5/014-create-a-bulleted-unordered-list.html', '100%', 250)<jupyter_output><empty_output><jupyter_text>Create an Ordered List HTML has another special element for creating ordered lists, or numbered lists.Ordered lists start with an opening `` element, followed by any number of `` elements. Finally, ordered lists are closed with the `` tag.For example:```HTML  Garfield  Sylvester```would create a numbered list of "Garfield" and "Sylvester".---Create an ordered list of the top 3 things cats hate the most. ```HTMLCatPhotoApp  Click here to view more cat photos.    Things cats love:      cat nip    laser pointers    lasagna    Top 3 things cats hate:      dog    shower    noise  ```<jupyter_code>IFrame('./source-solution/01-basic-html-and-html5/015-create-an-ordered-list.html', '100%', 250)<jupyter_output><empty_output><jupyter_text>Create a Text Field Now let's create a web form.`input` elements are a convenient way to get input from your user.You can create a text input like this:``Note that `input` elements are self-closing.---Create an `input` element of type `text` below your lists. ```HTMLCatPhotoApp  Click here to view more cat photos.    Things cats love:      cat nip    laser pointers    lasagna    Top 3 things cats hate:      flea treatment    thunder    other cats    ```<jupyter_code>IFrame('./source-solution/01-basic-html-and-html5/016-create-a-text-field.html', '100%', 250)<jupyter_output><empty_output><jupyter_text>Add Placeholder Text to a Text Field Placeholder text is what is displayed in your `input` element before your user has inputted anything.You can create placeholder text like so:``Note: Remember that `input` elements are self-closing.---Set the `placeholder` value of your text `input` to "cat photo URL". ```HTMLCatPhotoApp  Click here to view more cat photos.    Things cats love:      cat nip    laser pointers    lasagna    Top 3 things cats hate:      flea treatment    thunder    other cats    ```<jupyter_code>IFrame('./source-solution/01-basic-html-and-html5/017-add-placeholder-text-to-a-text-field.html', '100%', 250)<jupyter_output><empty_output><jupyter_text>Create a Form Element You can build web forms that actually submit data to a server using nothing more than pure HTML. You can do this by specifying an action on your `form` element.For example:``---Nest your text field inside a `form` element, and add the `action="/submit-cat-photo"` attribute to the form element. ```HTMLCatPhotoApp  Click here to view more cat photos.    Things cats love:      cat nip    laser pointers    lasagna    Top 3 things cats hate:      flea treatment    thunder    other cats          ```<jupyter_code>IFrame('./source-solution/01-basic-html-and-html5/018-create-a-form-element.html', '100%', 250)<jupyter_output><empty_output><jupyter_text>Add a Submit Button to a Form Let's add a `submit` button to your form. Clicking this button will send the data from your form to the URL you specified with your form's `action` attribute.Here's an example submit button:`this button submits the form`---Add a button as the last element of your `form` element with a type of `submit`, and "Submit" as its text. ```HTMLCatPhotoApp  Click here to view more cat photos.    Things cats love:      cat nip    laser pointers    lasagna    Top 3 things cats hate:      flea treatment    thunder    other cats            Submit  ```<jupyter_code>IFrame('./source-solution/01-basic-html-and-html5/019-add-a-submit-button-to-a-form.html', '100%', 250)<jupyter_output><empty_output><jupyter_text>Use HTML5 to Require a Field You can require specific form fields so that your user will not be able to submit your form until he or she has filled them out.For example, if you wanted to make a text input field required, you can just add the attribute `required` within your `input` element, like this: ``---Make your text `input` a `required` field, so that your user can't submit the form without completing this field.Then try to submit the form without inputting any text. See how your HTML5 form notifies you that the field is required? ```HTMLCatPhotoApp  Click here to view more cat photos.    Things cats love:      cat nip    laser pointers    lasagna    Top 3 things cats hate:      flea treatment    thunder    other cats            Submit  ```<jupyter_code>IFrame('./source-solution/01-basic-html-and-html5/020-use-html5-to-require-a-field.html', '100%', 250)<jupyter_output><empty_output><jupyter_text>Create a Set of Radio Buttons You can use _radio buttons_ for questions where you want the user to only give you one answer out of multiple options.Radio buttons are a type of `input`.Each of your radio buttons can be nested within its own `label` element. By wrapping an `input` element inside of a `label` element it will automatically associate the radio button input with the label element surrounding it.All related radio buttons should have the same `name` attribute to create a radio button group. By creating a radio group, selecting any single radio button will automatically deselect the other buttons within the same group ensuring only one answer is provided by the user.Here's an example of a radio button:```HTML   Indoor ```It is considered best practice to set a `for` attribute on the `label` element, with a value that matches the value of the `id` attribute of the `input` element. This allows assistive technologies to create a linked relationship between the label and the child `input` element. For example:```HTML   Indoor ```---Add a pair of radio buttons to your form, each nested in its own `label` element. One should have the option of `indoor` and the other should have the option of `outdoor`. Both should share the name attribute of `indoor-outdoor` to create a radio group. ```HTMLCatPhotoApp  Click here to view more cat photos.    Things cats love:      cat nip    laser pointers    lasagna    Top 3 things cats hate:      flea treatment    thunder    other cats            Submit          Indoor              Outdoor      ```<jupyter_code>IFrame('./source-solution/01-basic-html-and-html5/021-create-a-set-of-radio-buttons.html', '100%', 250)<jupyter_output><empty_output><jupyter_text>Create a Set of Checkboxes Forms commonly use checkboxes for questions that may have more than one answer.Checkboxes are a type of `input`.Each of your checkboxes can be nested within its own `label` element. By wrapping an `input` element inside of a `label` element it will automatically associate the checkbox input with the label element surrounding it.All related checkbox inputs should have the same `name` attribute.It is considered best practice to explicitly define the relationship between a checkbox `input` and its corresponding `label` by setting the `for` attribute on the `label` element to match the `id` attribute of the associated `input` element.Here's an example of a checkbox:` Loving`---Add to your form a set of three checkboxes. Each checkbox should be nested within its own `label` element. All three should share the `name` attribute of `personality`. ```HTMLCatPhotoApp  Click here to view more cat photos.    Things cats love:      cat nip    laser pointers    lasagna    Top 3 things cats hate:      flea treatment    thunder    other cats         Indoor     Outdoor     Loving     Playing     Slacking        Submit  ```<jupyter_code>IFrame('./source-solution/01-basic-html-and-html5/022-create-a-set-of-checkboxes.html', '100%', 250)<jupyter_output><empty_output><jupyter_text>Use the value attribute with Radio Buttons and Checkboxes When a form gets submitted, the data is sent to the server and includes entries for the options selected. Inputs of type `radio` and `checkbox` report their values from the `value` attribute.For example:```HTML   Indoor    Outdoor ```Here, you have two `radio` inputs. When the user submits the form with the `indoor` option selected, the form data will include the line: `indoor-outdoor=indoor`. This is from the `name` and `value` attributes of the "indoor" input.If you omit the `value` attribute, the submitted form data uses the default value, which is `on`. In this scenario, if the user clicked the "indoor" option and submitted the form, the resulting form data would be `indoor-outdoor=on`, which is not useful. So the `value` attribute needs to be set to something to identify the option.---Give each of the `radio` and `checkbox` inputs the `value` attribute. Use the input label text, in lowercase, as the value for the attribute. ```HTMLCatPhotoApp  Click here to view more cat photos.        Things cats love:      cat nip    laser pointers    lasagna    Top 3 things cats hate:      flea treatment    thunder    other cats         Indoor     Outdoor     Loving     Lazy     Energetic        Submit  ```<jupyter_code>IFrame('./source-solution/01-basic-html-and-html5/023-use-the-value-attribute-with-radio-buttons-and-checkboxes.html', '100%', 250)<jupyter_output><empty_output><jupyter_text>Check Radio Buttons and Checkboxes by Default You can set a checkbox or radio button to be checked by default using the `checked` attribute.To do this, just add the word "checked" to the inside of an input element. For example:``---Set the first of your radio buttons and the first of your checkboxes to both be checked by default. ```HTMLCatPhotoApp  Click here to view more cat photos.    Things cats love:      cat nip    laser pointers    lasagna    Top 3 things cats hate:      flea treatment    thunder    other cats         Indoor     Outdoor     Loving     Lazy     Energetic        Submit  ```<jupyter_code>IFrame('./source-solution/01-basic-html-and-html5/024-check-radio-buttons-and-checkboxes-by-default.html', '100%', 250)<jupyter_output><empty_output><jupyter_text>Nest Many Elements within a Single div Element The `div` element, also known as a division element, is a general purpose container for other elements.The `div` element is probably the most commonly used HTML element of all.Just like any other non-self-closing element, you can open a `div` element with `` and close it on another line with ``.---Nest your "Things cats love" and "Things cats hate" lists all within a single `div` element.Hint: Try putting your opening `div` tag above your "Things cats love" `p` element and your closing `div` tag after your closing `ol` tag so that both of your lists are within one `div`. ```HTMLCatPhotoApp  Click here to view more cat photos.        Things cats love:          cat nip      laser pointers      lasagna        Top 3 things cats hate:          flea treatment      thunder      other cats               Indoor     Outdoor     Loving     Lazy     Energetic        Submit  ```<jupyter_code>IFrame('./source-solution/01-basic-html-and-html5/025-nest-many-elements-within-a-single-div-element.html', '100%', 250)<jupyter_output><empty_output><jupyter_text>Declare the Doctype of an HTML Document The challenges so far have covered specific HTML elements and their uses. However, there are a few elements that give overall structure to your page, and should be included in every HTML document.At the top of your document, you need to tell the browser which version of HTML your page is using. HTML is an evolving language, and is updated regularly. Most major browsers support the latest specification, which is HTML5. However, older web pages may use previous versions of the language.You tell the browser this information by adding the `` tag on the first line, where the `...` part is the version of HTML. For HTML5, you use ``.The `!` and uppercase `DOCTYPE` is important, especially for older browsers. The `html` is not case sensitive.Next, the rest of your HTML code needs to be wrapped in `html` tags. The opening `` goes directly below the `` line, and the closing `` goes at the end of the page.Here's an example of the page structure:```HTML  ```---Add a `DOCTYPE` tag for HTML5 to the top of the blank HTML document in the code editor. Under it, add opening and closing `html` tags, which wrap around an `h1` element. The heading can include any text. ```HTML  ```<jupyter_code>IFrame('./source-solution/01-basic-html-and-html5/026-declare-the-doctype-of-an-html-document.html', '100%', 250)<jupyter_output><empty_output><jupyter_text>Define the Head and Body of an HTML Document You can add another level of organization in your HTML document within the `html` tags with the `head` and `body` elements. Any markup with information about your page would go into the `head` tag. Then any markup with the content of the page (what displays for a user) would go into the `body` tag.Metadata elements, such as `link`, `meta`, `title`, and `style`, typically go inside the head element.Here's an example of a page's layout:```HTML                ```---Edit the markup so there's a `head` and a `body`. The `head` element should only include the `title`, and the `body` element should only include the `h1` and `p`. ```HTML      The best page ever        The best page ever    Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn't want to be in there anyway. I like big cats and i can not lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Meow i could pee on this if i had the energy for slap owner's face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.  ```<jupyter_code>IFrame('./source-solution/01-basic-html-and-html5/027-define-the-head-and-body-of-an-html-document.html', '100%', 250)<jupyter_output><empty_output>
{'fraction_non_alphanumeric': 0.07211141993219511, 'fraction_numerical': 0.011881127638129563, 'mean_word_length': 4.381656804733728, 'pattern_counts': {'":': 0, '<': 113, '<?xml version=': 0, '>': 115, 'https://': 2, 'lorem ipsum': 2, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 3, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'chain_length': '28', 'dir': 'jupyter-structured-clean-dedup', 'id': '438719', 'license': 'MIT', 'n_tokens_mistral': 8947, 'n_tokens_neox': 8369, 'n_words': 4516, 'path': 'responsive-web-design/01-basic-html-and-html5.ipynb', 'repo_name': 'bits-zone/freeCodeCamp', 'size': '32741'}