Foundation of creating an HTML document. Before going to the main content of this video, I wanted to give a quick overview of an HTML element structure. All HTML tags begin with a less than symbol and end with a greater than symbol. HTML elements that are meant to serve as containers for other elements or texts, have an opening and closing tag.

On the screen, there is an opening and closing paragraph element. The closing tag always has a forward slash after the less than symbol to differentiate it from the opening tag. The content of this paragraph element is the text between the opening and closing tag. Elements that aren't meant to store content or other elements are called void elements. They are considered to be self-closing.

On the screen, there is a line break element, which simply adds a line break to the page. You may encounter it written one of two ways, as now shown. Either way is acceptable. Lastly, HTML elements can have attributes. On the screen, there's a paragraph element. It has an attribute called class, and class has a value of main content. Attributes are used to adjust the behavior of an element or change the way the element is displayed on the page, or sometimes just to store a value.

Now, it's time to dive into the HTML document. HTML is short for HyperText Markup Language, and this markup language is used to define the structure of your webpage. Now, all HTML documents must start with a DOCTYPE declaration. It is written as exclamation point, using capital letters, DOCTYPE html. DOCTYPE is not an element, it is just an instruction to the browser about the document type to ensure proper rendering.

Now that the DOCTYPE declaration is done, next is the HTML element. And this element wraps the content of the entire page, and it's also referred to as the root element. I will begin by typing HTML. Now I'm gonna use the language attribute to declare the default language for this webpage. So lang short for language, =, in quotes en, short for English. And I'm gonna wrap this up by creating the closing tag. Now all remaining elements will go inside of the HTML element.

Next, I will write the head element. The head element acts as a container for the content that isn't displayed on the webpage. And inside of the head element, I'm gonna begin with a meta element. meta charset =, in quotes, utf-8. The charset attribute is short for character set and utf-8 is a set of characters that cover the majority of characters and symbols in the world that could be rendered on the page. And what are meta tags, meta tags define what's called metadata. And this data is just information with regards to the page, such as the page's character set. I'm gonna write out another meta tag because this one has two attributes. There is no limit to the number of attributes an element can have.

I will begin by typing meta name =, in quotes, description, content =, in quotes, this is the page description. The meta name attribute is used to declare the type of meta tag we're using. Not all meta tags have the name attribute, such as charset. The meta description is a meta tag that helps describe your page. The text inside of the content attribute is the description. When search engines index the web page, this text is what is used to describe the page in the search engine result.

Now, the next element I'm gonna use is the title element. I will write the opening tag for title and the content is gonna be, this is the page title. And I will create the closing tag. The title is what defines the title of the document, which is visible on the browser tab.

Now, I'm done setting up the head of the document. There are many other meta tags and other elements that could have been added to the head. Earlier in the video, I mentioned that the head is for elements that aren't displayed on the page. After the closing head tag, I will create the body element. The body element is the container for all the renderable aspects of the document, meaning, the elements and items that you wish to display on the webpage.

And this concludes the foundation of creating an HTML document. Thanks for watching at Cloud Academy.