freeCodeCamp/guide/english/html/tutorials/basic-html/index.md

---
title: Basic HTML
---

## Basic HTML

The basic structure of HTML always starts with a document type declaration: `<!DOCTYPE html>`

You will need to add the `<html>` tag after the document type and close it with a `</html>` tag. This will be your actual HTML document.

The first element you will insert in your HTML will be the `<head>` tag that will contain all metadata from the website such as its title, styles, links and other elements. This element needs to be closed with a `</head>` tag.

The visible part of your HTML lies within the `<body>` tag which will be inside the `<html>` tag, and will also need to be closed with a `</body>` tag.

Below you can see the structure of a basic HTML file:


### Basic Page Structure:
```html
<!DOCTYPE html>
<html>
  <head>
    <!-- other elements -->
  </head>
  <body>
    <!-- other elements -->
  </body>
</html>
```


### Sample HTML Program

```html
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
```

## HTML Headings

HTML headings are with the <h1> to <h6> tags.

Example:
```html
<h1>  Heading 1 </h1>
<h2>  Heading 2 </h2>
<h3>  Heading 3 </h3>
<h4>  Heading 4 </h4>
<h5>  Heading 5 </h5>
<h6>  Heading 6 </h6>
```

## Explanation
The `<!DOCTYPE html>` is to tell the browser you want the page to be rendered using HTML5.

The `<head></head>` is were you want to put things that help the browser and search engines such as `<title></title>` and `<meta>`.

The `<body></body>` is were the tags that will display on the page are such as `<h1></h1>` or `<p></p>`.


#### More Information
<!-- Please add any articles you think might be helpful to read before writing the article -->
 - [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML)
 - [W3schools](https://www.w3schools.com/html/)
fix: change directory structure 2018-10-12 15:37:13 -04:00			`---`
			`title: Basic HTML`
			`---`

Added Explanation. (#23748) * Added Explanation. * corrected title syntax 2018-10-29 15:47:58 -07:00			`## Basic HTML`
fix: change directory structure 2018-10-12 15:37:13 -04:00
tutorial on basic html structure (#26343) Added explanation on how the structure of the html file works and explained it's elements. 2018-12-26 22:40:27 +00:00			The basic structure of HTML always starts with a document type declaration: `<!DOCTYPE html>`

			You will need to add the `<html>` tag after the document type and close it with a `</html>` tag. This will be your actual HTML document.

			The first element you will insert in your HTML will be the `<head>` tag that will contain all metadata from the website such as its title, styles, links and other elements. This element needs to be closed with a `</head>` tag.

			The visible part of your HTML lies within the `<body>` tag which will be inside the `<html>` tag, and will also need to be closed with a `</body>` tag.

			`Below you can see the structure of a basic HTML file:`

Add the text "Basic HTML Program" to the article (#22181) * Add the text "Basic HTML Program" to the article * Fixed formatting 2018-11-20 03:03:21 +05:30
			`### Basic Page Structure:`
fix: change directory structure 2018-10-12 15:37:13 -04:00			```html
Added Explanation. (#23748) * Added Explanation. * corrected title syntax 2018-10-29 15:47:58 -07:00			`<!DOCTYPE html>`
fix: change directory structure 2018-10-12 15:37:13 -04:00			`<html>`
			`<head>`
tutorial on basic html structure (#26343) Added explanation on how the structure of the html file works and explained it's elements. 2018-12-26 22:40:27 +00:00			`<!-- other elements -->`
fix: change directory structure 2018-10-12 15:37:13 -04:00			`</head>`
			`<body>`
tutorial on basic html structure (#26343) Added explanation on how the structure of the html file works and explained it's elements. 2018-12-26 22:40:27 +00:00			`<!-- other elements -->`
fix: change directory structure 2018-10-12 15:37:13 -04:00			`</body>`
Added Explanation. (#23748) * Added Explanation. * corrected title syntax 2018-10-29 15:47:58 -07:00			`</html>`
fix: change directory structure 2018-10-12 15:37:13 -04:00			```

tutorial on basic html structure (#26343) Added explanation on how the structure of the html file works and explained it's elements. 2018-12-26 22:40:27 +00:00
Add the text "Basic HTML Program" to the article (#22181) * Add the text "Basic HTML Program" to the article * Fixed formatting 2018-11-20 03:03:21 +05:30			`### Sample HTML Program`

			```html
			`<html>`
			`<head>`
			`<title>Page Title</title>`
			`</head>`
			`<body>`

			`<h1>This is a Heading</h1>`
			`<p>This is a paragraph.</p>`

			`</body>`
			`</html>`
			```

			`## HTML Headings`

			`HTML headings are with the <h1> to <h6> tags.`
Update index.md (#24264) 2018-11-05 04:42:53 +05:30
Add the text "Basic HTML Program" to the article (#22181) * Add the text "Basic HTML Program" to the article * Fixed formatting 2018-11-20 03:03:21 +05:30			`Example:`
			```html
Update index.md (#24264) 2018-11-05 04:42:53 +05:30			`<h1> Heading 1 </h1>`
			`<h2> Heading 2 </h2>`
			`<h3> Heading 3 </h3>`
			`<h4> Heading 4 </h4>`
			`<h5> Heading 5 </h5>`
			`<h6> Heading 6 </h6>`
Add the text "Basic HTML Program" to the article (#22181) * Add the text "Basic HTML Program" to the article * Fixed formatting 2018-11-20 03:03:21 +05:30			```
Update index.md (#24264) 2018-11-05 04:42:53 +05:30
Add the text "Basic HTML Program" to the article (#22181) * Add the text "Basic HTML Program" to the article * Fixed formatting 2018-11-20 03:03:21 +05:30			`## Explanation`
Added Explanation. (#23748) * Added Explanation. * corrected title syntax 2018-10-29 15:47:58 -07:00			The `<!DOCTYPE html>` is to tell the browser you want the page to be rendered using HTML5.

			The `<head></head>` is were you want to put things that help the browser and search engines such as `<title></title>` and `<meta>`.
fix: change directory structure 2018-10-12 15:37:13 -04:00
Added Explanation. (#23748) * Added Explanation. * corrected title syntax 2018-10-29 15:47:58 -07:00			The `<body></body>` is were the tags that will display on the page are such as `<h1></h1>` or `<p></p>`.
Add the text "Basic HTML Program" to the article (#22181) * Add the text "Basic HTML Program" to the article * Fixed formatting 2018-11-20 03:03:21 +05:30

			`#### More Information`
			`<!-- Please add any articles you think might be helpful to read before writing the article -->`
Added links to sites with more information (#23660) 2018-12-07 22:50:08 -08:00			`- [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML)`
			`- [W3schools](https://www.w3schools.com/html/)`