HTML documents include a document type declaration and the `` root element. Nested in the `` element are the document head and document body. While the head of the document isn't visible outside of the code, it's vital for a site to function. It contains all the meta information, including information for search engines and social media results, icons for the browser tab and mobile home screen shortcut, and the behavior and presentation of your content. In this section, you'll discover the components that, while not visible, are present on almost every web page. To create the `MachineLearningWorkshop.com` (MLW) site, start by including the components that should be considered essential for every web page: the type of document, the content's human language, the character set, and, of course, the title or name of the site or application. ## Add to every HTML document There's several elements that are essential for every web page. Browsers render content if these elements are missing, but you should include them. ### `` The first thing in any HTML document is the preamble. For HTML, all you need is ``. This looks like an HTML element, but it's actually special node called a *doctype* . The doctype tells the browser to use standards mode. When omitted, browsers use a different rendering mode known as [quirks mode](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). Including the doctype helps prevent quirks mode. ### `` The `` element is the root element for an HTML document. It's the parent of the `` and ``, containing everything in the HTML document other than the doctype. If omitted, the language is implied, but you should include it to declare the document's language. ### Content language The [`lang` attribute](https://developer.mozilla.org/docs/Web/HTML/Reference/Global_attributes/lang#language_tag_syntax) in the `` tag defines the document's main language. The value is an ISO language code followed by an optional region. For example, French in Canada is `fr-CA`, while in Burkina Faso it's `fr-BF`. This declaration helps screen readers, search engines, and translation services identify the document language. You can use the `lang` attribute on other tags to identify exceptions to the document's primary language. Like its use in the head, the `lang` attribute within the body has no visual effect. It adds semantics, so assistive technologies and automated services can identify the language of specific content. In addition to setting the language for the document and exceptions to that base language, the attribute can be used in CSS selectors. `Ceci n'est pas une pipe.` can be targeted with the attribute and language selectors [`[lang|="fr"]`](https://developer.mozilla.org/docs/Web/CSS/Attribute_selectors#attrvalue_3) and [`:lang(fr)`](https://developer.mozilla.org/docs/Web/CSS/:lang). ### `` Nested between the opening and closing `` tags, we find the two children: `` and ``: ```html ``` The `` contains metadata for a site or application, while the `` contains visible content. The rest of this section focuses on components nested inside the `` element. ## Required components inside the `` The document metadata, including the document title, character set, viewport settings, description, base URL, stylesheet links, and icons, are found in the `` element. While you may not need all these features, always include character set, title, and viewport settings. ### Character encoding The very first element in the `` should be the `charset` character encoding declaration. It comes before the title to ensure the browser can render the characters in that title and all the characters in the rest of the document. The [default encoding](https://html.spec.whatwg.org/multipage/parsing.html#documentEncoding) in most browsers is `windows-1252`, depending on the locale. However, you should use [`UTF-8`](https://developer.mozilla.org/docs/Glossary/UTF-8), which enables one- to four-byte encoding of all characters. To set the character encoding to UTF-8, include: ```html ``` By declaring `UTF-8` (case-insensitive), you can even include emoji in your title. The character encoding is inherited into everything in the document, even ` ``` When using `@import` to import style sheets into your document, optionally into cascade layers, the `@import` statements must be the first statements in your ` ``` > [!NOTE] > **Note:** Styles, the presentation layer, are the purview of CSS, here we are considering how to attach your styles to the content layer, your HTML. If the CSS of the preceding code interests you, look up [cascade layers](https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Cascade_layers) and [custom properties](https://developer.mozilla.org/docs/Web/CSS/Using_CSS_custom_properties). Styles, added with ``, ` ``` You can add inline styles to the `