<![CDATA[ boilerplate - freeCodeCamp.org ]]> https://www.freecodecamp.org/news/ https://cdn.freecodecamp.org/universal/favicons/favicon.png <![CDATA[ boilerplate - freeCodeCamp.org ]]> https://www.freecodecamp.org/news/ Eleventy Mon, 11 May 2026 22:40:31 +0000 60 <![CDATA[ HTML Starter Template – A Basic HTML5 Boilerplate for index.html ]]> 66d84f2a4540581f645440f3 Fri, 25 Mar 2022 23:18:46 +0000 By Dillion Megida

HTML has different tags, some of which have semantic meanings. A basic boilerplate for an HTML file looks like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My Website</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="icon" href="./favicon.ico" type="image/x-icon">
  </head>
  <body>
    <main>
        <h1>Welcome to My Website</h1>  
    </main>
    <script src="index.js"></script>
  </body>
</html>

In the rest of this article, I'll explain what each part of this boilerplate means.

HTML Boilerplate Syntax

DOCTYPE

<!DOCTYPE html>

This element is the doctype declaration of the HTML file. <!DOCTYPE html> tells the browser to render the HTML codes as HTML5 (as opposed to some other version of HTML).

This is important, because without this declaration, HTML5 elements like section, article, and so on may not be rendered correctly.

html tag

<html lang="en">
    ...
</html>

The html tag is the root of the HTML document. It houses the head tag, the body tag, and every other HTML element (except the DOCTYPE) used in your website.

It also has the lang attribute, which you can use to specify the language of the text content on a website. The default value is "unknown", so it is recommended that you always specify a language.

Defining a language helps screen readers read words correctly and helps search engines return language-specific search results.

head tag

<head>
    ...
</head>

The head tag houses the metadata of your website. These are visually invisible data to the user, but they provide information about your website's content. Search engines especially use this data to rank your website.

Metadata in the head tag includes meta tags, title tags, link tags, scripts, stylesheets, and more.

meta tags

<meta ... />

The meta tag is a metadata element used to add more metadata to your website than the kind that non-meta tags like title provide.

You can use these tags for various purposes:

  • adding metadata for social media platforms to create link previews
  • adding a description for your website
  • adding a character encoding for your website
  • and many more.

Search engines, social media platforms, and web services use this metadata to understand the content of your website and determine how to present them to users.

title tag

<title>My Website</title>

The title tag is used to specify a title for your website. Your browser uses this to display a title at the title bar:

Image

This tag also helps search engines show titles for your website on their search results:

Image

You use the link tag, as the name implies, to link to another document. Usually, this establishes different kinds of relationships between the current document and a separate document.

<link rel="stylesheet" href="./style.css">

For example, as seen in the code block above, we've established a "stylesheet" document relationship with the styles.css file.

The most common use of this tag is to add stylesheets to a document and to also add favicons to a website:

<link rel="icon" href="./favicon.ico" type="image/x-icon">

A favicon is a small image close to the title of the webpage, as seen below:

Image

body tag

<body>
    ...
</body>

The body tag houses the body content of a website, which is visible to users. Although non-visible elements like style and script can also be added here, most body tags are usually visible.

From headings to paragraphs to media and lots more, those elements are added here. Any element not found here (which could be included in the head tag) will not be shown on the screen.

main tag

<main>
    ...
</main>

The main tag specifies the essential content of a website. This would be the content related to the website's title.

For example, a blog post page. The social media sharing on the left, advertisements on the right, header, and footer are minor parts of the web page. The post itself showing the cover image, the title, and post text content is the central part, which would be in the main element.

h1 tag

HTML has different heading elements which are h1, h2, h3, h4, h5 and h6. Heading elements are used to describe different sections of a web page. And these elements have an order, with the h1 being the highest.

You should only have one h1 element on a webpage as this starts the main section. And then, you have other sections and subsections for which you can use the other heading elements.

Also, note that you shouldn't skip headings. For example, you shouldn't use an h4 element after using an h2 element. A good structure could be like this:

<h1>Welcome to my website</h1>

<h2>What do I have to offer</h2>

<h3>1. Financial Benefits</h3>

<h3>2. Society improves</h3>

<h4>a. Improving the tax system</h4>

<h4>b. Providing more refuse dumps</h4>

<h2>Who am I</h2>

<h2>Conclusion</h2>

From this code, you can see how the heading levels specify their position in sections and subsections.

Wrap up

In this piece, we've seen an HTML starter boilerplate and what each tag used in this template means.

This list of elements is non-exhaustive as many more elements can be found in the head tag and the body tag, with numerous attributes, too.

]]> <![CDATA[ Basic HTML5 Template: Use This HTML Boilerplate as a Starter for Any Web Dev Project ]]> https://www.freecodecamp.org/news/basic-html5-template-boilerplate-code-example/ 66b8d932ce55d3ba4d93598d Fri, 30 Jul 2021 22:41:08 +0000 When you are building a new website, it is important to have a good starting foundation. In this article, I will explain what an HTML 5 boilerplate is and how to create a basic template to use in your projects.

What is an HTML 5 boilerplate?

According to Wikipedia,

boilerplate code or just boilerplate are sections of code that are repeated in multiple places with little to no variation.

A boilerplate in HTML is a template you will add at the start of your project. You should add this boilerplate to all of your HTML pages.

Example of HTML 5 boilerplate

Let's take a look at a basic example.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <script src="index.js"></script>
  </body>
</html>

What is a doctype in HTML?

The first line in your HTML code should be the doctype declaration. A doctype tells the browser what version of HTML the page is written in. 

<!DOCTYPE html>

If you forget to include this line of code in your file, then some of the HTML 5 tags like <article>, < footer >, and <header> may not be supported by the browser.

What is the HTML root element?

The <html> tag is the top level element of the HTML file. You will nest the <head> and <body> tags inside of it.

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body></body>
</html>

The lang attribute inside the opening <html> tag sets the language for the page. It is also good to include it for accessibility reasons, because screen readers will know how to properly pronounce the text.

What are head tags in HTML?

The <head> tags contain information that is processed by machines. Inside the <head> tags, you will nest metadata which is data that describes the document to the machine. 

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="style.css">
</head>

What is UTF-8 character encoding?

UTF-8 is the standard character encoding you should use in your web pages. This will usually be the first <meta> tag shown in the <head> element.

 <meta charset="UTF-8">

According to the World Wide Web Consortium,

A Unicode-based encoding such as UTF-8 can support many languages and can accommodate pages and forms in any mixture of those languages. Its use also eliminates the need for server-side logic to individually determine the character encoding for each page served or each incoming form submission.

What is the viewport meta tag in HTML?

This tag renders the width of the page to the width of the device's screen size. If you have a mobile device that is 600px wide, then the browser window will also be 600px wide.

The initial-scale controls the zoom level. The value of 1 for the initial-scale prevents the default zoom by browsers. 

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

What does X-UA-Compatible mean?

This <meta> tag specifies the document mode for Internet Explorer. IE=edge is the highest supported mode. 

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

What are HTML title tags?

The <title> tag is the title for the web page. This text is shown in the browser's title bar.

    <title>HTML 5 Boilerplate</title>

Image

CSS stylesheet

This code will link your custom CSS to the HTML page. rel="stylesheet" defines the relationship between the HTML file and the external stylesheet. 

    <link rel="stylesheet" href="style.css">

Script tags in HTML

External script tags will be placed just before the ending body tag. This is where you can link your external JavaScript code. 

    <script src="index.js"></script>

Conclusion

You should add an HTML 5 boilerplate to each of your HTML pages. This starter code contains important information like the doctype, metadata, external stylesheets and script tags.

]]> <![CDATA[ What is boilerplate and why do we use it? Necessity of coding style guide ]]> https://www.freecodecamp.org/news/whats-boilerplate-and-why-do-we-use-it-let-s-check-out-the-coding-style-guide-ac2b6c814ee7/ 66c36635139b845d61e84bc8 Tue, 02 Jan 2018 16:14:41 +0000 By Meet Zaveri

In Information Technology, a boilerplate is a unit of writing that can be reused over and over without change. By extension, the idea is sometimes applied to reusable programming, as in “boilerplate code.”

Legal agreements, including software and hardware terms and conditions, make abundant use of boilerplates.

For instance, a lawyer may give you a five page contract to sign, but most of the contract is boilerplate — meaning it’s the same for everyone who gets that contract, with only a few lines changed here and there.

In computer programming, boilerplate code or boilerplate refers to sections of code that have to be included in many places with little or no alteration. It is often used when referring to languages that are considered verbose, i.e. the programmer must write a lot of code to do minimal jobs.

For example, in web development, simple boilerplate for HTML would look like this:

<!DOCTYPE html>                       <html class="no-js" lang="">                           <head>                                 <meta charset="utf-8">                                 <meta http-equiv="x-ua-compatible" content="ie=edge">         <title></title>                                 <meta name="description" content="">                           <meta name="viewport" content="width=device-width, initial- scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="css/main.css"></head>                           <body>                                 <p>Hello world! This is HTML5 Boilerplate.</p>               <script src="js/vendor/modernizr-{{MODERNIZR_VERSION}}.min.js>     </script>

 </body></html>

You can view the whole repository here :

h5bp/html5-boilerplate
_html5-boilerplate - A professional front-end template for building fast, robust, and adaptable web apps or sites._github.com

In the 1890s, boilerplate was actually cast or stamped in metal ready for the printing press and distributed to newspaper presses and firms around the United States. Until the 1950s, thousands of newspapers received and used this kind of boilerplate from the nation’s largest supplier, the Western Newspaper Union. Some companies also sent out press releases as boilerplate so that they had to be printed as written.

Image

Most professional web developers have created a collection of assets and snippets of code that they reuse on projects to accelerate development. There are some universal or near universal patterns that all websites share in common. Rather than continuously rebuild these, most developers start by copying the code they used for a similar project and then start modifying it.

Some developers recognize the value of these boilerplate starter templates and take the time to make the boilerplate more generic and share them online for others to use.

This is not only limited to web development. It is used beyond in AI/ML as there are more growing frameworks and libraries.

Necessary characteristics of boilerplate for large projects (production ready)

  • Good and Readable Documentation ?
  • Code structure with a deeper abstraction level
  • Follows Proper Coding Standard
  • Has CLI tool (for rapid prototyping and setup)
  • Scalable ?
  • Easy testing tools
  • Necessary API modules
  • Support for Internationalization and Localization ?
  • Code Splitting
  • Server and Client code for setup
  • Proper Navigation and Routing Structure ?

After all these minimum specs, you should start editing and altering the code in order to build your project.

There are some Big Tech Companies who even build their own boilerplate. They use it for respective and similar projects throughout time.

A perfect example for this would be react.js’s boilerplate:

react-boilerplate/react-boilerplate
_react-boilerplate - :fire: A highly scalable, offline-first foundation with the best developer experience and a focus…_github.com

Boilerplate for smaller projects(Scaffolding)

These type of boilerplates are generally kind of “Starter Kits” or in professional way it is called “Scaffolding”. Their main target users are novice developers or new early adopters.

It focuses on fast prototyping by creating the elements which are necessary only for new projects. These require less functionality and are not scalable over time and project.

Their code structure is not much expanded, and doesn’t involve deeper abstraction layer as users only need to build core features. This eliminates the need for extra utilities.

Image Code structure

The simplest example is Facebook’s create-react-app boilerplate:

facebookincubator/create-react-app
_create-react-app - Create React apps with no build configuration._github.com

What’s the difference between a boilerplate and a template?

As Joachim Pense clearly states, boilerplate is something that you copy and paste and just add to a document. It comes up most often in contracts where language is used and reused, spelling out things like conditions and caveats.

Writers use templates as models, sometimes with negative effects. In broad terms, a template is a model or pattern used to create new objects. In writing, it is a standardized form of something like a resume that writers can use to flesh out their own versions.

Unlike boilerplates, templates are adapted for a particular use. The problem arose for me when students used Word templates for their resumes, and they all ended up looking the same.

Both templates and boilerplates can make business writing stilted and artificial if used unwisely.

Style Guide for writing code

Regardless of whether you’re using boilerplate or not, there are some standards followed by companies for writing code . One of them is Style Guide. It attempts to explain the basic styles and patterns that are used in various companies or organizations. It’s generally a rule that employees must adopt the coding style guide of their company.

Image

The Style Guide describes tons of rules for writing code, like indentation of tabs and spaces, naming of variables and functions, writing necessary comments, formatting, source file structures, using proper method of data structures, avoiding hoisting, scoping, control statements and a lot more.

Image

Programming styles commonly deal with the visual appearance of source code with the goal of readability. Software has long been available that formats source code automatically, leaving coders to concentrate on naming, logic, and higher techniques.

As a practical point, using a computer to format source code saves time, and it is possible to then enforce company-wide standards without debates. (Source — Wiki).

These are some common debates like: Tabs v Spaces Holy war, choosing the perfect Code IDE, and so on. The interesting thing is that you can get involved in these debates which mostly happen on Reddit. You can also participate in some of the stackoverflow Q&A’s.

Image _source — [https://stackoverflow.blog/2017/06/15/developers-use-spaces-make-money-use-tabs/](https://stackoverflow.blog/2017/06/15/developers-use-spaces-make-money-use-tabs/" rel="noopener" target="blank" title=")

For web developers, the most common style guide for JS is Airbnb’s javascript style guide. It’s open source and everyone can contribute.

airbnb/javascript
_javascript - JavaScript Style Guide_github.com

If anyone is in doubt as to why Javascript needs a style guide, then read this issue’s second answer by Harrison Shoff, who is programmer at Airbnb .

Why does JavaScript need a style guide? · Issue #102 · airbnb/javascript
_One of my favorite parts about the JavaScript community is that people choose to write it in so many different ways…_github.com

Here are some style guides for some of today’s more popular languages:

DotNet Code Formatter

Java: Google-Java-Format

Javascript Standard Style (different from airbnb’s javascript)

PHP Coding Standards Fixer

Python: Google’s YAPF

Ruby: Rubocop

More from Boilerplate: Concept for OOP

In object-oriented programs, classes are often provided with methods for getting and setting instance variables. The definitions of these methods can frequently be regarded as boilerplate.

Although the code will vary from one class to another, it is sufficiently stereotypical in structure that it would be better generated automatically than written by hand.

For example, in the following Java class representing a pet, almost all the code is boilerplate except for the declarations of Pet, name, and owner:

public class Pet {    private String name;    private Person owner;

public Pet(String name, Person owner) {        this.name = name;        this.owner = owner;    }

public String getName() {        return name;    }

public void setName(String name) {        this.name = name;    }

public Person getOwner() {        return owner;    }

public void setOwner(Person owner) {        this.owner = owner;    }}

Boilerplate definition is becoming more global in many other programming languages nowadays. It comes from OOP and hybrid languages that were once procedural but have become OOP. They now have the same goal of repeating the code you build with a model/template/class/object, so they adopt this term. You make a template, and the only things you do for each instance of a template are the individual parameters.

This part is what we call boilerplate. You simply re-use the code you made a template of, but with different parameters.

Boilerplate as an API

Since you’re simply re-using the template code with different parameters, this implies that we could build reusable API’s that only need a change of inputs and outputs.

Conclusion

“Boilerplate code” is any seemingly repetitive code that shows up again and again in order to get a result that seems like it ought to be much simpler.

I wrote this article because I was recently instructed by a Team Lead to learn about the many varieties of boilerplate that might be suitable for our project. So I had to go on a search for the perfect boilerplate.

Any type of feedback will be appreciated! Hustle On!

]]>