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:

    <h1>Top level heading: Maybe a page title</h1>
        <p>A paragraph of text. Some information we would like to communicate to the viewer. This can be as long or short as we would like.</p>
                        
            <ol>
                <li>Number one on the list</li>
                <li>Number two</li>
                <li>A third item</li>
                <li>Four</li>
                <li>Five</li>
            </ol>
                    

Becomes:

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.

Remember that in order to start a comment, you need to use <!-- and to end a comment, you need to use -->

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:

    <main>
        <h1>Hello World!</h1>
        <p>Hello World!</p>
    </main>
                    

NOTE: Many of the new HTML5 tags and their benefits are covered in the Applied Accessibility section.

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:

    <img src="https://www.freecatphotoapp.com/your-image.jpg">
                    

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.

You can make elements into links by nesting them within an a element.

An example of this would be:

    <a href="#"><img src="https://bit.ly/fcc-running-cats" alt="Three kittens running towards the camera."></a>
                    

Remember to use # as your a element's href property in order to turn it into a dead link.

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:

    <a href="https://freecodecamp.org">this links to freecodecamp.org</a>
                    

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.

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.

    <a href="#contacts-header">Contacts</a>
    ...
    <h2> id="contacts-header">Contacts</h2>
                    

When users click the Contacts link, they'll be taken to the section of the webpage with the Contact header element.

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.

Replace the href attribute value with a #, also known as a hash symbol, to create a dead link.

For example: href="#"

HTML has another special element for creating ordered lists, or numbered lists.

Ordered lists start with an opening <ol> element, followed by any number of <li> elements. Finally, ordered lists are closed with the </ol> tag.

For example:

    <ol>
        <li>Garfield</li>
        <li>Sylvester</li>
    </ol>
                    

would create a numbered list of "Garfield" and "Sylvester".

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:

    <form form action="/url-where-you-want-to-submit-form-data"></form>
                    

Nest the existing input element inside a form element and assign "https://freecatphotoapp.com/submit-cat-photo" to the action attribute of the form element.

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.

Here's an example of a radio button:

    <label>
        <input type="radio" name="indoor-outdoor">Indoor
    </label>
                    

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:

    <label for="indoor">
        <input id="indoor" type="radio" name="indoor-outdoor">Indoor
    </label>
                    

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:

    <label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</form>
                    

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 <!DOCTYPE ...> tag on the first line, where the ... part is the version of HTML. For HTML5, you use <!DOCTYPE html>.

Next, the rest of your HTML code needs to be wrapped in html tags. The opening <html> goes directly below the <!DOCTYPE html> line, and the closing </html> goes at the end of the page.

Here's an example of the page structure:

    <!DOCTYPE html>
    <html>
        <!-- Your HTML code goes here -->
    </html>
                    

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:

    <!DOCTYPE html>
    <html>
        <head>
            <!-- Metadata elements -->
        </head>
        <body>
            <!-- Page content -->
        </body>
    </html>