HTML elements, attributes list

1. <h1> - Header tag

2. <p> - paragraph

3. Commenting - <!-- TODO: Remove h1 -->

4. HTML5 has some elements that identify different content areas. These elements make your HTML easier to read and help with Search Engine Optimization (SEO) and accessibility. The main element is used to represent the main content of the body of an HTML document. Content inside the main element should be unique to the document and should not be repeated in other parts of the document.

5. You can add images to your website by using the img element. img elements have an opening tag without a closing tag. An element without a closing tag is known as a void element. <img>

6. We can add src, alt attributes to our img element. The alt attribute's text is used for screen readers to improve accessibility and is displayed if the image fails to load. src has the jpg link to picture. <img src="cat.jpg" alt="A cat">

7. You can link to another page with the anchor (a) element. <a href="<https://www.freecodecamp.org>">click here to go to freeCodeCamp.org</a>

8. Target attribute - To open links in a new tab, you can use the target attribute on the anchor (a) element. The target attribute specifies where to open the linked document. target="_blank" opens the linked document in a new tab or window.

9. The section element is used to define sections in a document, such as chapters, headers, footers, or any other sections of the document. It is a semantic element that helps with SEO and accessibility.

10. To create an unordered list of items, you can use the ul element.

11. The li element is used to create a list item in an ordered or unordered list.

12. The figure element represents self-contained content and will allow you to associate an image with a caption.

13. A figure caption (figcaption) element is used to add a caption to describe the image contained within the figure element.

14. To place emphasis on a specific word or phrase, you can use the em element.

15. The code for an ordered list (ol) is similar to an unordered list, but list items in an ordered list are numbered when displayed.

16. The form element is used to get information from a user like their name, email, and other details.

    1. The action attribute indicates where form data should be sent.

    2. The input element allows you several ways to collect data from a web form. Like img elements, input elements are a void element and do not need closing tags.

    3. Create a text field to get text input from a user by adding the type attribute with the value text to the input element.

    4. Placeholder text is used to give people a hint about what kind of information to enter into an input.

    5. To prevent a user from submitting your form when required information is missing, you need to add the required attribute to an input element.

    6. label elements are used to help associate the text for an input element with the input element itself (especially for assistive technologies like screen readers).

    7. The id attribute is used to identify specific HTML elements. Each id attribute's value must be unique from all other id values for the entire page.

    8. Create radio buttons by setting type both radio buttons can be selected at the same time. To make it so selecting one radio button automatically deselects the other, both buttons must have a name attribute with the same value. (While you won't notice this in the browser, doing this makes it easier for a server to process your web form, especially when there are multiple checkboxes.)

    9. If you select the Indoor radio button and submit the form, the form data for the button is based on its name and value attributes. Since your radio buttons do not have a value attribute, the form data will include indoor-outdoor=on, which is not useful when you have multiple buttons.

    10. The fieldset element is used to group related inputs and labels together in a web form. fieldset elements are block-level elements, meaning that they appear on a new line. Nest the Indoor and Outdoor radio buttons within a fieldset element, and don't forget to indent the radio buttons.

    11. The legend element acts as a caption for the content in the fieldset element. It gives users context about what they should enter into that part of the form.

    12. Forms commonly use checkboxes for questions that may have more than one answer. The input element with a type attribute set to checkbox creates a checkbox.

    13. There's another way to associate an input element's text with the element itself. You can nest the text within a label element and add a for attribute with the same value as the input element's id attribute.

    14. In order to make a checkbox checked or radio button selected by default, you need to add the checked attribute to it.

          <h2>Cat Form</h2>
        <form action="<https://freecatphotoapp.com/submit-cat-photo>">
          <fieldset>
            <legend>Is your cat an indoor or outdoor cat?</legend>
            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
          </fieldset>
          <fieldset>
            <legend>What's your cat's personality?</legend>
            <input id="loving" type="checkbox" name="personality" value="loving" checked> <label for="loving">Loving</label>
            <input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>
            <input id="energetic" type="checkbox" name="personality" value="energetic"> <label for="energetic">Energetic</label>
          </fieldset>
          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
          <button type="submit">Submit</button>
        </form>

17. In order to make a checkbox checked or radio button selected by default, you need to add the checked attribute to it.

18. All page content elements that should be rendered to the page go inside the body element. However, other important information goes inside the head element.

19. The html element is the root element of an HTML page and wraps all content on the page. You can also specify the language of your page by adding the lang attribute to the html element.Add the lang attribute with the value en to the opening html tag to specify that the language of the page is English.

20. All pages should begin with <!DOCTYPE html>. This special string is known as a declaration and ensures the browser tries to meet industry-wide specifications. <!DOCTYPE html> tells browsers that the document is an HTML5 document which is the latest version of HTML.

21. You can set browser behavior by adding meta elements in the head. Inside the head element, nest a meta element with an attribute named charset. Set to the value to utf-8 which tells the browser how to encode characters for the page. <meta charset = "UTF-8"> charset is attribute and UTF-8 is an encoding value.

22. The div element is used mainly for design layout purposes unlike the other content elements you have used. It has an id attribute to specify what kind of content is kept.