HTML Boilerplates - Basic
A basic overview of HTML boilerplates
What is it?
A HTML boilerplate is basically the template to start your HTML document that has all the basics. They can range from the really basic that just has all the minimal elements in order to make a document work, to more complex and customized for specific project types.
Why do I need them?
Boilerplates are useful to get a jumpstart on your project and creating a stock of customized ones for specific projects can help save you so much time.
Let’s look at a basic one:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpage Title</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
The first part is your DOCTYPE declaration that every HTML page requires to start. This basically just tells the browser what version of HTML that you are using so it knows how to read it. In the above example, this tells the browser that we are using HTML5. <!DOCTYPE html>
The next part is the html element. This is the root of the document that everything else in the document is nested in. In the example above, we used the lang attribute to define the language that will be used on the page. This is mainly for accessibility purposes.
Next is the head element. This is to contain all meta-related information for the webpage and not for anything to display on the physical page itself.
Nested in the head element is the meta element that assists in the webpage rendering correctly and helps with SEO as well. In the above example, we are just defining the character set, but there are many other meta elements that can be added for different reasons.
Also nested in the head element is the title element. This is not a title that is displayed on the webpage itself, but usually on the browser’s tab, which is important for discoverability.
The next element is the body element. This is not nested in the head element but is still nested in the html element. This is the element that the majority of your content will be in including writing, videos, pictures, links, and other types of the content that you want your visitors to see.
Nested in the body element is just a simple h1 element to place the title of your webpage. This is what you want to appear at the top of your page and be the first thing that your visitors see on the page.
This is the basic boilerplate that all webpages should start off as. There are tons of extras that can be added to cater to specific needs, but I cannot think of one that would not include at least these basic things. This can help you get a jumpstart on your page building, saving you time and a headache.
While I am still just a student, I am loving building my own boilerplates when I am creatively stuck on a project for future use because it helps keep me motivated when starting a new project. Being able to skip past the basics helps my ADHD brain stay on task because I can immediately jump into the fun stuff and get the dopamine without having to do the mundane parts of building the foundation of a page which is where my thought and focus train derails and being able to focus on making the actual display and content of the page.
What are some of your questions that you may have on coding? I am by no means a professional, but writing these mini-tutorials helps me apply my knowledge to help cement the information and keep learning.
About the Creator
Shelbi Thomas
Caffeinated and Hyper-fixated
Keep reading
More stories from Shelbi Thomas and writers in 01 and other communities.
I Need the Lore for Numberblocks
So I have three kids, the oldest being 4. They love this show on Netflix called Number Blocks and at first I thought that it was a cute and educational show just in the passing that I was able to see it, but one day me and my husband sat down and actually watched it with them and we had the exact same thought…wtf is this show?
By Shelbi Thomas10 months ago in Humans
Italian Brainrot: Gen Alpha
If you walk through a bustling piazza in Milan or stand near a school gate in Rome during the afternoon rush, you might hear a conversation that feels like a glitch in the linguistic matrix. You’ll see a group of twelve-year-olds, dressed in matching tech-fleece tracksuits, shouting about "Skibidi," debating who has the most "Aura," and accusing each other of being from "Ohio." To anyone born before the year 2010, this sounds like a collective mental breakdown. But to the architects of this new reality—Generation Alpha—it is the only language that makes sense.
By Teodor Monescu3 days ago in 01
Where's the Glory?
In breaking news, rehabilitated Republican Senator Johnnie Johnson (Pronouns: HE, HIM, HIS) called a press conference from the Men’s room of the New Orleans Louis Armstrong International Airport, Concourse B, across from the Ignatius Reilly’s Lucky Dog stand. The Senator had just returned from a sexual reorientation rehabilitation program in Memphis, TN after being publically disgraced at a Buckee’s Truckstop restroom soliciting sex from an undercover cop three months ago. He is a founding member of the Reformed Christians for Christ, a conservative, pro-family and ex-gay advocacy group. In the spirit of being reborn, Senator Johnson invited reporters to marvel at his plans for a major remodeling of airport bathrooms.
By Cathy Schieffelin5 days ago in Humor
Comments (1)
Hyper txt mark up language is fascinating! Boiler plates is cool!