HTML stands for Hyper Text Markup Language. HTML is used to build the skeleton of the website including which elements (text, images, buttons, etc.) should be included and the order in which they appear. Web browsers like Chrome or Safari know how to interpret HTML files and render their contents as an interactive web page.
HTML files typically contain things like:
The HTML file is the most important file when building a basic website. Some online IDEs like Glitch or Replit, you may notice that a basic website project comes pre-loaded with at least 3 files with the names
Note: Web servers will often default to loading the
index.html file if multiple HTML files are present, unless otherwise specified.
Let’s take a look at a typical boilerplate, or standard template, for an HTML file.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Title of Website</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <script src="script.js"></script> </body> </html>
In HTML, we denote an element by specifying the name of the element in opening brackets
<> and closing brackets
</>. Let’s take the time to highlight the structure of an HTML file and some important elements presented in the boilerplate above.
<!DOCTYPE html>: This specifies the document type and lets the computer know that we will be working in HTML. Most specifically our document will default to HTML5, which is the most recent major HTML version, unless otherwise specified.
<html>: This is where we place all of our elements that comprise the contents of our page.
<head>: This is the container for the elements that have content that does not need to be displayed on the page (like metadata, the title, or, as we will see, scripts and stylesheets).
<meta>: This is a tag for providing metadata (data about our data) to the page. We can use meta tags to display what character set we are using or for SEO (Search Engine Optimization) purposes.
<title>: This tag gives the page a title that can be displayed in the tab of your browser.
<body>: This defines the main content of the HTML page.
You may have noticed that some elements are nested within another, meaning they appear in between the opening and closing tag of another element. As we become more familiar with different types of HTML elements, you will notice that some elements serve as a container or divider to help organize elements together, like the
body element. In fact, it is best to think of the structure of your HTML document like a tree, where elements nested inside another are the “children” of a “parent” element.
<link href="style.css" rel="stylesheet" type="text/css" /> connects the CSS style sheet to our HTML file.
Let’s break down the syntax used to do this action. Learn more on the MDN Web Docs about the
<link>: This element specifies relationships between the current document (the HTML file) and an external resource (the CSS file).
href: This attribute specifies the file path, or location, of our external resource. In this particular example, the CSS file is named
style.cssbut you can name your stylesheet anything. Take note that the file path is surrounded by double quotes,
relstands for relationship. This lets the document know how the resource will interact with the current document, in this case we are linking to a
stylesheet. Learn more on the MDN Web Docs about link types.
type: Similar to the
typeattribute lets the document know the specific type of file that is being linked.
Let’s break down the syntax used to do this action.
<script>: You may be wondering, why do we use the
src: This attribute specifies the file path, or location, of our external resource. In this particular example, the JS file is named
script.jsbut you can name your stylesheet anything. Take note that the file path is surrounded by double quotes,
You may have noticed that the
<script> element is placed inside of the
<body> element. This is different from the
<link> element for CSS files which is in the
<script> element towards the bottom of the HTML file to avoid potential errors.