Layman’s Coding: What is the minimum HTML you need for a website?
When I started learning HTML, I ran into this annoying problem where none of the tutorials I watched agreed on what the essential, basic, bare-bones code is for an HTML document. Some would include this <meta> tag with info I’d never seen before, and others would say you absolutely needed a <main> section or <header> and <footer> tags to separate content. Even when these tutorials did agree, they didn’t always explain why I needed a bit of code.
Now that I’ve spent a few months in HTML land, I’ve discovered what the essential building blocks for an HTML document are. I’m referring to what some people might call a boilerplate or skeleton code, but these terms all mean the same thing. Basically, what is the bare minimum code that needs to be in an HTML file for it to work properly?
tl;dr
If you really don’t care about the purpose of the tags, feel free to copy this code right here and you’ll be all set.
<!DOCTYPE>
This tag tells the browser which version of HTML you are using. If you look at code using older versions of HTML (HTML 4.01, for instance), you would see something like this:
Unless you are working on outdated code, you are probably using the latest version (HTML5). In this case, you’ll use this tag: <!DOCTYPE html>. Place it at the very top of your HTML document above everything else.
<html>
The <html> tags are basically just the “containers” for your HTML code. They tell your browser: “Hey, all the stuff in here is HTML.” It’s as simple as that. The most important thing to remember: like most tags in an HTML file, you need to use an opening <html> and closing </html> tag. Place these just below your <!DOCTYPE> tag.
<head>
This is where you essentially build the setup for your website. Within the <head> tags, you will include links to your stylesheets (i.e. your CSS), links to your JavaScript, a title for your website, and metadata. These are all discussed below. Use an opening <head> and closing </head> tag. Place these inside of your <html> tags.
<meta>
This is where all your metadata lives. Metadata is a fancy technical term for “data that describes other data.” Think of it as the settings for your HTML. The most common metadata attribute is charset which describes your file’s character encoding or how a browser reads your files. The vast majority of web browsers know how to read character set utf-8 making it the go-to charset. Long story short, use this tag: <meta charset=’UTF-8’>. Put it inside your <head> tags. Note: You DO NOT need to have a closing tag for <meta>. This means it is a self-closing tag.
<title>
This is maybe the easiest tag to remember. What you put within the <title> tags is what gets displayed in your browser tabs. If I give my website a title of “Doggos R Cute”, this is what it will look like:
Or I could do something like:
Use an opening <title> and closing </title> tag. Put these tags inside the <head> tags.
<body>
This is where all the action happens. The bulk of your HTML code will live within the <body> tags. You can add things like images, paragraphs, headings, sections, videos, music files, and lots of other cool stuff. Use an opening <body> and closing </body> tag. Put these inside of your <html> tags, but outside of your <head> tags. The <head> and <body> should be like two separate sections within your <html> tags.
Linking to CSS and JavaScript
Most people agree that the above code is all that is necessary for a website to function. This is technically correct, but the HTML skeleton code above won’t be pretty or functional without some CSS and JavaScript added to it. Since 99.9% of the websites you visit will have this extra code, we should consider the tags that link to this code as necessary too.
<link>
The <link> tag is how you attach your CSS to your HTML file. Most projects have several files that are created based on the language or the functionality of the code within them. Although you can put CSS directly in your HTML file, chances are good this is not a viable solution for most projects. Instead, you’ll create a separate CSS file that is linked to your HTML file. There are three essential pieces in a <link> tag:
rel dictates the relationship between your HTML file and the file you are linking to. In the case of CSS, use rel=’stylesheet’
type is exactly what it sounds like. It tells the browser the type of file you are linking to. For CSS, use type=’text/css’
href is the location of the file you are linking. Knowing how to link a file requires a bit of knowledge about paths, but a simple way to access a linked file when you are beginning is to make sure all your files are in the same folder. When this is the case, use href=’NameOfCSSFile.css’. For more in depth info on document paths, check out this article.
With all that added in, the full tag will look like this:
<link rel=’stylesheet’ type=’text/css’ href=’MyCSSFile.css’>
Place this tag within the <head> tags. Note: <link> is a self-closing tag meaning you DO NOT need to have a closing tag.
<script>
The <script> tags are used to link your HTML file to your JavaScript. Like CSS, you can technically put your script directly within these tags in your HTML file, but it is best — especially for larger projects — to have your JavaScript in a separate file and use the <script> tags to link to it. There are two necessary pieces in a <script> tag:
type is just like the type attribute used in <link>. For JavaScript, use type=’text/JavaScript’
src is the <script> equivalent of href. This is where you specify your JavaScript file’s location. Use src=’SomeJavaScriptFile.js’.
The full tag will look like this:
<script type=’text/JavaScript’ src=’MyJavaScript.js’></script>
Want $500 off your Bloc tuition?
If you’re serious about learning to code, consider signing up for a coding bootcamp like Bloc. If you send me a message on LinkedIn with your full name and email address, I can refer you. I’ll receive a cash bonus and you get $500 off your tuition cost. No strings attached. Once I’ve submitted your email, a member of Bloc’s team will contact you to get you started.
Like what you read?
Give it some ❤ and follow me! You can also lookout for similar articles in the Layman’s Coding series where I describe coding concepts with very little jargon and lots of pictures. Didn’t like it? It’s cool. We can still be friends.
