<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
With HTML files, there are some standard tags and elements that show up on every page and are required to be there. This standard HTML code is called boilerplate code.
An HTML file always starts with the doctype:
Although you won’t interact with the doctype much, it’s still required to be at the top of the file.
After the doctype, the rest of your HTML code is wrapped in an
<html lang="en"> <!-- The rest of your code is in here --> </html>
The first element nested inside the
html element is the head element. The
head element generally contains all the metadata for your web page. Metadata is information that’s associated with your HTML file that isn’t necessarily visible to the user (at least, not on the actual web page).
<head> <!-- Metadata goes here --> </head>
The tag that says
<meta charset="utf-8"> is tells the browser what character set your web page uses. Setting this ensures that the right characters are used when displaying your web page.
<head> <meta charset="utf-8"> </head>
title tag controls what text is displayed in the browser tab when viewing the HTML file in the browser. It’s always nested inside the head element.
<head> <!-- Metadata goes here --> <title>Text to show in browser tab</title> </head>
The second element nested inside the
html element is the
body element. It contains all of the text and visual elements that you want to show in the browser, such as your headings, paragraphs, and links.
<body> <!-- Visual elements go here --> </body>
You can view any of the HTML demos here to see the boilerplate HTML code in action.
HTML basics on MDN