DEV Community

Cover image for Basic HTML Structure: HTML in 180 Seconds - Episode 3
Renato Junior
Renato Junior

Posted on • Updated on

Basic HTML Structure: HTML in 180 Seconds - Episode 3


Hello, I'm Renato Junior, and you're here to learn HTML in 180-second videos. In this video, you will learn the basic structure of HTML.

Use the right name index.html

By convention, the homepage of a website in HTML should be named "index.html". To create this file, open Notepad++, click on “File,” and then on “Save As.” In the window that opens, choose the folder where you want to save the file and set the name as "index.html". Make sure the file is saved with this exact name to ensure the homepage functions correctly.

Click on
Click in
Save the file as index.html

Once the file is saved with the correct name, you can now add the basic HTML structure.

Image description

You'll notice that every HTML page begins with a document type declaration, followed by the opening of the HTML tags. Inside the HTML tags, you will find two main sections: the head and the body.

Conventionally, inside the <head> tag, you'll find only metadata, such as information, settings, and other elements that generally do not appear as visible content on the page. The <body> section, on the other hand, contains everything that is visible to users, like text, images, links, and other elements that make up the page's interface.

In this example, within the <head>, we configure the page title, which will appear to the user outside of the main content.

Inside the <body> is where the main content visible to the user will be displayed. To see if your changes have worked, simply click the save button. Go to the folder where you saved the file and double-click to open it in your browser.

And there you have it, you just created your first HTML code.

<!DOCTYPE html>
<html>
    <head>
        <title> The page title </title>
    </head>
    <body>
        Here it is the web page content
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

In the next lesson, you'll learn some new tags for text formatting.

Top comments (0)