Course Content
HTML Essentials
HTML Essentials
HTML Document Structure
Firstly, we explore the structure of an HTML document.
HTML Document Structure
Each HTML document must adhere to a consistent structure. The elements outlined here establish the foundation for organizing content, defining the page's structure, and enhancing the user experience on the web.
html tag
The <html>
tag is the root element of an HTML document. All other elements will be written inside of it. The opening <html>
tag marks the beginning of the HTML document, while the closing </html>
tag marks the end.
Example:
head tag
The <head>
tag contains meta-information about the HTML document, such as title, character encoding, and external resources like stylesheets and scripts. It does not contain content directly visible to the user on the web page.
Example:
Explanation:
<title>
tag defines the title of a web page. It is displayed in the web browser's title bar or browser tab. The title of a page gives a brief overview of its content, making it easier for users to understand the page's purpose and navigate through multiple tabs more efficiently;<meta charset="UTF-8">
is responsible for specifying the character encoding used in an HTML document. This character encoding is what determines how web browsers interpret and display text;- Some common meta tags include:
<meta name="description" content="Brief description of the page">
: Provides a concise description of the page's content, which may appear in search engine results;<meta name="keywords" content="keyword1, keyword2, ...">
: Specifies keywords relevant to the page's content, helping improve search engine optimization (SEO);<meta name="viewport" content="width=device-width, initial-scale=1.0">
: Defines the viewport settings for responsive design, ensuring proper scaling on different devices.
body tag
The <body>
tag holds the main content visible to users on a web page. This content comprises text, images, links, forms, and other elements that users can interact with while visiting the website. Essentially, the <body>
tag contains what users see and engage with when they browse a website.
Example:
Document type declaration (<!DOCTYPE html>)
The document type declaration informs the web browser about the version of HTML used in the document. This declaration ensures that the web browser correctly renders the document by following the specified HTML standard. For HTML5 documents, the doctype declaration is <!DOCTYPE html>
.
Example:
Resulting structure
To wrap things up, let's gather all the elements we have considered and combine them into a single HTML document.
Below, you can see how the HTML document appears in the web browser.
Video Tutorial
Everything was clear?