The Info Docx: Best Starting Code for HTML Project - Template

In this blog you will basic template or starting code for html to start your project with ease. The basic starting code for html is also known as HTML Boilerplate.

Introduction

HTML5 Boilerplate is an HTML, CSS and JavaScript template for creating HTML5 websites with cross-browser compatibility. As you start learning HTML you are likely to make your own HTML staring code so that you can just paste the starting code in you project and start your work. Making a boilerplate will help you a lot and save your valuable time.

For the beginners I have created a basic starting code for HTML from which they can start making their website with ease in no time searching for different CDNs to embed in their site. You can also use the following code as starting code for commercial projects too. I have included following things in the boilerplate:

1. Title

- It includes a title tag which represents the title of the project.

2. Favicon

- Favicon section is added in the boilerplate so that you can easily add favicon to your project.

3. Meta tags

- Meta tags are very much important for your website as it represents what is in your website and what is your website all about.

4. Open Graph Meta Elements for Social Cards

- This section will come in action while you share your website in the social media. You can change the way it looks while sharing your site by going to this section.

5. Font awesome

- Font awesome is an awesome platform to add icons to your website. I have also embedded font awesome in the starting code for html so that you can directly start using the icons from font-awesome. You can visit the site to know more about its usage.

6. Bootstrap

- Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. You can easily build fast, responsive sites with Bootstrap. You can now directly use bootstrap in your html document

7. CSS Files

- I have also included the external CSS files for your HTML so that you can quickly change the file names and add CSS to your project.

8. Google Font

- Your website must get rid of boring font and use free and best great looking fonts to attract your visitors. So I have included Poppins font from the Google Fonts. You can now import your desired font from Google Fonts and embed in your project in the same way.

9. JavaScript Link

- As your project might also use JavaScript so I have embedded an external link to your JS file. You can change the file name and start using JS in the project.

Basic Starting Code for HTML

So this is your starting code, now you can directly use this and begin developing awesome websites.

<!DOCTYPE html>
<html>
<html lang="en">

<head>
    <!-- TITLE -->
    <title>HTML Template by The Info. Docs. </title>

    <!-- FAVICON -->
    <link rel="shortcut icon" href="/FAVICON_FILE_NAME" type="image/x-icon">

    <!-- META TAGS -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="author" content="The Info Docs">
    <meta name="description" content="SOMETING ABOUT YOUR WEBSITE">
    <meta name="title" content="NAME OF YOUR WEBSITE">
    <meta name="keywords" content="KEYWORDS RELATED TO YOUR WEBSITE">

    <!-- Open Graph Meta Elements for Social Cards -->
    <meta property="og:title" content="A Basic HTML5 Template">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://www.example.com">
    <meta property="og:description" content="A simple HTML5 Template for new projects.">
    <meta property="og:image" content="image.png">

    <!-- FONT AWESOME -->
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
        integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

    <!-- BOOTSTRAP -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <!-- CSS FILES -->
    <link rel="stylesheet" href="css/styles.css">

    <!-- JS BOOTSTRAP -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

    <!-- GOOGLE FONT -->
    <!-- Eg -  -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
</head>

<body>

    Best Starting Code for HTML Project by The Info Docs

</body>
<script src="js/scripts.js"></script>

</html>

Bonus section

Here are some of the bonus tools that can be helpful for you in the project.

Materialize

A modern responsive front-end framework based on Material Design

<!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

Conclusion

So you can now use the basic starting code for HTML and build your projects in no time. I have also mentioned some useful tools which can be used while creating your sites.

If you want specific blog on some topic then fell free to mention here. Request Blog

To get latest updates, tips, tricks and coding guides follow The Info Docs.

Best Starting Code for HTML Project - Template | Complete HTML5 Boilerplate