How to create your first HTML page
Create a new text file in a folder on your computer. You can name it index.html or my-first-page.html. The .html extension is important because it tells the browser that this file is an HTML document.
Add this text to the file:
<!doctype html>
<html>
<head></head>
<body></body>
</html>The <!doctype html> declaration is used to tell the browser that this is an HTML5 document. It is not a tag, but a declaration that must be at the very top of the file. If the file is named index.html, it will be automatically recognized as the main page of a website.
Congratulations! You have just created your first HTML page. Double click it to open it in a browser. If a blank white page shows up, that is a good sign. It means that the browser has successfully loaded your HTML document. Hoorray! 🎉
This is the basic structure of an HTML document. It consists of the following parts:
- The
<!doctype html>declaration, which tells the browser that this is an HTML5 document. - The
<html>element, which is the root element of the document. It contains all the other elements. - The
<head>element, which contains metadata about the document. We will discuss metadata in a later lesson. - The
<body>element, which contains the content of the document. This is where you will add text, images, links, and other elements that make up the web page.
This whole “object”, that consists of tags is called the DOM or Document Object Model. you will often hear this term in web development and in these courses: “Put something on the DOM”, “Manipulate the DOM”, “Access the DOM”. It basically means add tags to the HTML document via scripting languages.
Now let’s talk about the syntax of HTML tags, which are used to create elements in the document before we start adding content to our page.
Recap
A tag is a piece of text that is enclosed in angle brackets. It consists of a tag name, an optional attributes section, and an inner content section. The opening tag starts with < and ends with >, while the closing tag starts with </ and ends with >. Some tags are self-closing and do not have a closing tag.
The HTML document has a basic structure that consists of the <!doctype html> declaration, the <html> element, the <head> element, and the <body> element. The <head> element contains metadata about the document, while the <body> element contains the content of the document.
Questions
About the author
Vasil Kostadinov
Software developer, specializing in React, Next.js and Astro for the frontend, as well as in Supabase and Strapi for the backend. Creates content in all shapes & sizes in his free time.