Getting Started

Layout

Components

Plugins

Design

Form

CSS Helper

JS Helper

Tools

Starter Kit

Our starter kit provides a well-structured HTML skeleton for your web development needs.

HTML |

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--IE Compatibility Meta-->
    <meta http-equiv="X-UA-Compatible" content"IE=edge">

    <meta name="theme-color" content="">

    <title>Title</title>

    <!--SEO-->
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">
    <!--SEO-->

    <!--og SEO -->
    <meta property="og:title" content="">
    <meta property="og:type" content="article" />
    <meta property="og:description" content="">
    <meta property="og:image" content="">
    <meta property="og:url" content="/">
    <!--og SEO -->

    <!-- Twitter card data -->
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="">
    <meta name="twitter:title" content="">
    <meta name="twitter:description" content="">
    <meta name="twitter:creator" content="">
    <meta name="twitter:image" content="">
    <!-- Twitter card data -->

    <link rel="icon" type="image/x-icon" href="">
    <link rel="icon" type="image/png" sizes="48x48" href="">
    <link rel="icon" type="image/png" sizes="62x62" href="">
    <link rel="icon" type="image/png" sizes="72x72" href="">
    <link rel="icon" type="image/png" sizes="96x96" href="">
    <link rel="icon" type="image/png" sizes="114x114" href="">
    <link rel="icon" type="image/png" sizes="120x120" href="">
    <link rel="icon" type="image/png" sizes="144x144" href="">
    <link rel="icon" type="image/png" sizes="152x152" href="">
    <link rel="icon" type="image/png" sizes="160x160" href="">
    <link rel="apple-touch-icon" sizes="57x57" href="">
    <link rel="apple-touch-icon" sizes="60x60" href="">
    <link rel="apple-touch-icon" sizes="72x72" href="">
    <link rel="apple-touch-icon" sizes="76x76" href="">
    <link rel="apple-touch-icon" sizes="114x114" href="">
    <link rel="apple-touch-icon" sizes="120x120" href="">
    <link rel="apple-touch-icon" sizes="144x144" href="">

    <link rel="stylesheet" href="path/to/null-main.css">
    <link rel="stylesheet" href="path/to/null-components.css">
    <link rel="stylesheet" href="path/to/your-style.css">

    <!--Cach-->
    <meta http-equiv="cache-control" content="" />
    <meta http-equiv="expires" content="" />
    <meta http-equiv="expires" content="" />
    <meta http-equiv="pragma" content="" />



    <!-- Google tag (gtag.js) -->

    <!-- Google tag (gtag.js) -->

</head>


<body>

    <script src="path/to/null-main.min.css"></script>
    <script src="path/to/null-components.min.css"></script>

</body>

</html>

This HTML document begins with the <!DOCTYPE html> declaration, signifying to the browser that this is an HTML5 document.
The <html> tag encloses the complete HTML document and is usually followed by a language attribute.
The <head> tag houses all the metadata for the page. This information isn't displayed on the webpage itself but plays a crucial role in how your webpage works. Here's what the <head> tag of this HTML skeleton contains:
Character encoding declaration via <meta charset="UTF-8">, ensuring the correct rendering of the text.
<meta name="viewport"> tag to control layout on mobile browsers.
Internet Explorer compatibility meta tag to dictate how the browser should display the webpage.
<meta name="theme-color"> for defining the color of the toolbars in the user's browser.
A placeholder <title> tag, which will hold the title of your webpage. This is visible in the browser tab and is crucial for SEO.
SEO related meta tags, including 'description', 'keywords', and 'author', used by search engines to understand the content of your webpage.
Open Graph (og) SEO tags, providing enhanced presentation of your webpage when shared on platforms like Facebook.
Twitter Card data, for when your webpage is shared on Twitter, to ensure a rich graphic is generated.
A series of favicon references, for various devices and dimensions. Favicons are the icons that appear next to your webpage title in a browser tab.
CSS stylesheets are linked using the <link rel="stylesheet"> tags.
Cache related meta tags, used for dictating browser caching policies.
Placeholders for Google Tag Manager scripts to track and understand your site's analytics.

Branding

HTML Elements