Dev.to

Code Craft #6 - Basic Structure of an HTML Document

Course Objectives In this module, you will learn about the basic structure of an HTML document, including: The doctype declaration () The main elements (, , ) Important elements within the : , , and How opening and closing tags work. 1. What is HTML? Just a remind, HTML (HyperText Markup Language) is the language used to create web pages. It provides the structure of the page and defines the content that will be displayed in the browser. Each HTML page is composed of a set of "tags" that organize and structure the content. 2. Doctype Declaration The first line of an HTML document should always be the document type declaration, known as DOCTYPE. It tells the browser which version of HTML is being used. For HTML5, the correct declaration is: The declaration indicates that the document is using HTML5, which is the latest and most widely used version. This line is not a traditional HTML tag but an instruction that helps the browser render the content correctly. Why is it important? Ensures the browser follows the HTML5 standard. Avoids compatibility issues between different browsers. 3. Basic Structure of an HTML Document A basic HTML document follows a simple structure, composed of opening and closing tags. Below is the minimal structure of an HTML document: My Page Welcome to my page! This is a simple HTML example. 4. Main Elements of an HTML Document The tag is the root element of an HTML document. Everything on the page, including visible content and header information, must be placed inside this tag. Opening: Closing: The tag can also include the lang attribute to specify the language of the page content: The element contains information about the document, such as metadata, links to external files (CSS, fonts, etc.), and the page title. This data is not displayed directly on the page. Opening: Closing: Inside the , we usually include: : Defines the character encoding used in the document, ensuring special characters (like accents) are displayed correctly. : Ensures the page is responsive, adjusting the layout for different screen sizes. : Defines the page title, which appears in the browser tab. : Used to link external files, such as CSS stylesheets. Example of a complete : My Page The tag contains the visible content of the page, such as text, images, videos, links, tables, etc. Everything the user sees on the page must be inside this tag. Opening: Closing: Example of content inside the : Welcome to my page! This is a simple HTML example. 5. Elements Inside the The element defines the page title, which appears in the browser tab or title bar. The title is crucial for SEO (Search Engine Optimization) and accessibility. Example: My Page The tag provides metadata about the page, such as character encoding, descriptions, keywords, etc. In the example above, we used two important tags: charset: Defines the character encoding of the document (usually UTF-8). viewport: Essential for responsive design, adjusting the page scale on mobile devices. The tag is used to link external files, such as stylesheets (CSS), icons, fonts, etc. The most common use is to include a stylesheet: 6. Opening and Closing Tags In HTML, most elements require an opening tag and a closing tag. The opening tag defines the start of the element, and the closing tag marks its end. Opening Tag: Starts the element and can contain attributes. Example: , , . Closing Tag: Ends the element. Example: , , . Some tags, like and , are self-closing and do not require a closing tag, but it is still important to know them. Example of opening and closing tags: This is a paragraph. Conclusion Now that you know the basic structure of an HTML document, you can start creating your own pages. Remember that while HTML is the foundation, it works in conjunction with other technologies like CSS and JavaScript to create interactive and styled pages. In the next module, we will explore how to add more complex content to your HTML page. Until then!

Mar 21, 2025 - 13:35

Code Craft #6 - Basic Structure of an HTML Document

Course Objectives

In this module, you will learn about the basic structure of an HTML document, including:

The doctype declaration ()
The main elements (, , )
Important elements within the : </code>, <code><meta></code>, and <code><link></code> </li> <li>How opening and closing tags work.</li> </ul> <h3> 1. What is HTML? </h3> Just a remind, HTML (HyperText Markup Language) is the language used to create web pages. It provides the structure of the page and defines the content that will be displayed in the browser. Each HTML page is composed of a set of "tags" that organize and structure the content. <h3> 2. Doctype Declaration </h3> The first line of an HTML document should always be the document type declaration, known as <code>DOCTYPE</code>. It tells the browser which version of HTML is being used. For HTML5, the correct declaration is: <div class="highlight js-code-highlight"> <pre class="highlight html"><code><!DOCTYPE html> </code></pre> </div> The <code><!DOCTYPE html></code> declaration indicates that the document is using HTML5, which is the latest and most widely used version. This line is not a traditional HTML tag but an instruction that helps the browser render the content correctly. <h4> Why is it important? </h4> <ul> <li>Ensures the browser follows the HTML5 standard.</li> <li>Avoids compatibility issues between different browsers.</li> </ul> <h3> 3. Basic Structure of an HTML Document </h3> A basic HTML document follows a simple structure, composed of opening and closing tags. Below is the minimal structure of an HTML document: <div class="highlight js-code-highlight"> <pre class="highlight html"><code><!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Page rel="stylesheet" href="style.css"> Welcome to my page!
This is a simple HTML example.

4. Main Elements of an HTML Document

The tag is the root element of an HTML document. Everything on the page, including visible content and header information, must be placed inside this tag.
- Opening:
- Closing:
- The tag can also include the lang attribute to specify the language of the page content:
```
 lang="pt-br">
```
The element contains information about the document, such as metadata, links to external files (CSS, fonts, etc.), and the page title. This data is not displayed directly on the page.
- Opening:
- Closing:
- Inside the , we usually include:
- : Defines the character encoding used in the document, ensuring special characters (like accents) are displayed correctly.
- : Ensures the page is responsive, adjusting the layout for different screen sizes.
- </code>: Defines the page title, which appears in the browser tab.</li> <li> <code><link></code>: Used to link external files, such as CSS stylesheets.</li> </ul> </li> </ul> Example of a complete <code><head></code>: <div class="highlight js-code-highlight"> <pre class="highlight html"><code> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Page rel="stylesheet" href="style.css">