HTML Boilerplate

Download Html Boilerplate

SEO Checklist Pass Head

Code Example (Select And Copy) : 


<!-- SEO Checklist Complated HEAD start -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Page Title</title>
<meta name="description" content="Page Description." />
<meta property="og:locale" content="en_US" key="og:locale" />
<meta property="og:type" content="website" key="og:type" />
<meta property="og:title" content="Page Title" key="og:title" />
<meta property="og:description" content="Page Description." key="og:description" />
<meta property="og:url" content="page_url" key="og:url" />
<meta property="og:site_name" content="Baquer" key="og:site_name" />
<meta property="article:publisher" content="page_url" key="article:publisher" />
<meta property="og:image" content="image" key="og:image" />
<meta property="og:image:width" content="1200" key="og:image:width" />
<meta property="og:image:height" content="628" key="og:image:height" />
<meta property="og:image:type" content="image/png" key="og:image:type" />
<meta property="twitter:card" content="summary_large_image" key="twitter:card" />
<meta property="twitter:site" content="@twitter_usernaem" key="twitter:site" />
<meta property="twitter:title" content="Page Title" key="twitter:title" />
<meta property="twitter:description" content="Page Description." key="twitter:description" />
<meta property="twitter:url" content="page_url" key="twitter:url" />
<meta property="twitter:image" content="twitter:image" key="twitter:image" />
<meta name="twitter:label1" content="Est. reading time" key="twitter:label1" />
<meta name="twitter:data1" content="5 minute" key="twitter:data1" />
    
<!-- Add this line for cache  -->
<meta http-equiv="Cache-control" content="public">
    
<link rel='canonical' href="page_url" />
<link rel="apple-touch-icon" sizes="180x180" href="apple_touch_icon_url" />
<link rel="icon" type="image/png" sizes="32x32" href="favicon_32x32_url" />
<link rel="icon" type="image/png" sizes="16x16" href="favicon_16x16_url" />
<link rel="manifest" href="./seo/site.webmanifest" />
<link rel="mask-icon" href="safari_pinned_tab" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#FCE9F1" />
<!-- SEO Checklist Complated HEAD End -->
    
<!-- Custom CSS Add -->
<link rel="preload" as="style" href="./lib/slick/css/slick.css" importance="high" />
<link defer rel="stylesheet" href="./lib/slick/css/slick.css" onload="this.onload=null;this.rel='stylesheet'" />
            
<link rel="preload" as="style" href="./frontend/assets/style/bootstrap-style.min.css" importance="high" />
<link defer rel="stylesheet" href="./frontend/assets/style/bootstrap-style.min.css" onload="this.onload=null;this.rel='stylesheet'" />
            
<link rel="preload" as="style" href="./frontend/assets/style/style.min.css" importance="high" />
<link defer rel="stylesheet" href="./frontend/assets/style/style.min.css" onload="this.onload=null;this.rel='stylesheet'" />

HTML Semantic Elements

Code Example (Select And Copy) : 


<header>
    <nav></nav>
</header>
<main>
    <section>
        <article></article>
    </section>
</main>
<aside></aside>
<footer></footer>

Avoid using non-semantic elements (e.g., <div>, <span>) when semantic elements (e.g., <header>, <nav>, <main>, <aside>, <artical>, <section>, <footer>) are more suitable.

Button With all attributes

Code Example (Select And Copy) :

<button type="button" id="button_id" class="button_class" name="button_name" aria-label="button_name">BUTTON_VALUE</button>

Output Example :

In this example, we have used the following attributes:

  • type: Specifies the type of button. In this case, it's set to "button", which is the default value.
  • id: Provides a unique identifier for the button, which can be used in JavaScript or CSS.
  • class: Assigns a CSS class to style the button. In this case, it's given the class "btn-primary".
  • name: Specifies the name of the button, often used when the button is part of a form.
  • value: Sets the value that is submitted with the form when the button is clicked. This is commonly used in form submissions.
  • disabled: When set to disabled, the button is not clickable.
  • onclick: Specifies a JavaScript function to execute when the button is clicked. In this example, it displays an alert.

Anchor With all attributes

Code Example (Select And Copy) :

<a href="anchor_tag_link" target="_blank" rel="noopener noreferrer" title="anchor_tag_title" class="anchor_tag_class">ANCHOR_TAG_VALUE</a>

Output Example :

ANCHOR_TAG_VALUE

In this example, we have used the following attributes:

  • href: Specifies the URL the link points to, in this case, "https://example.com".
  • target: Defines how the link will be opened. In this example, it's set to "_blank" to open the link in a new tab or window.
  • rel: Specifies the relationship of the linked document. In this case, it includes "noopener" and "noreferrer" to improve security when opening in a new window.
  • title: Provides additional information about the link, often displayed as a tooltip.
  • download: Suggests that the linked file should be downloaded when clicked. The "example.pdf" is the suggested file name for the download.
  • lang: Specifies the language of the linked document. In this example, it's set to "en" for English.
  • type: Specifies the media type of the linked resource. In this case, it's set to "text/html".
  • class: Assigns a CSS class to style the link. Here, it's given the class "link".
  • style: Allows inline CSS styles to be applied to the link, such as text color and text decoration.

input Text with all attributes

Code Example (Select And Copy) :


<label for="username">Username:</label>
<input type="text" id="username" name="username" value="JohnDoe" placeholder="Enter your username" maxlength="20" size="30" required autocomplete="username" />

Output Example :

In this example, we've used the following attributes for the <input> element with type="text":

  • type="text": Specifies the input field as a text input.
  • id: Provides a unique identifier for the input element, which is associated with the label using the for attribute.
  • name: Sets the name of the input field, often used when submitting forms.
  • value: Sets the initial value of the input field to "JohnDoe."
  • placeholder: Provides a hint or example text to the user ("Enter your username").
  • maxlength: Specifies the maximum number of characters that can be entered into the input field (20 characters in this case).
  • size: Specifies the visible width of the input field (30 characters wide in this case).
  • required: Indicates that the field must be filled out before submitting a form.
  • autocomplete: Suggests an autocomplete value for the field (e.g., "username").
  • autofocus: Automatically gives focus to the input field when the page loads.
  • disabled: Disables the input field, making it non-editable.
  • readonly: Makes the input field read-only, meaning the user can't edit it.

input Text with all attributes

Code Example (Select And Copy) :


<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required autocomplete="email">
                            

<label for="number">Number:</label>
<input type="number" id="number" name="number" placeholder="Enter a number" min="0" max="100" step="5">
                            

<label for="tel">Telephone:</label>
<input type="tel" id="tel" name="tel" placeholder="Enter your phone number" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">

Output Example :

  • The first <input> uses type="email" to capture email addresses. It includes required and autocomplete attributes.
  • The second <input> uses type="number" to capture numeric input. It specifies min, max, and step attributes to set limits and increment.
  • The third <input> uses type="tel" to capture telephone numbers. It uses a pattern attribute to enforce a specific format (in this case, "xxx-xxx-xxxx").

Image With all attributes

Code Example (Select And Copy) :


<img src="example.jpg" alt="An example image" aria-label="An example image" width="300" height="200" loading="lazy">

Output Example :

An example image

In this example:

  • src: Specifies the image file's source ("example.jpg").
  • alt: Provides alternative text for the image, important for accessibility.
  • width and height: Set the dimensions of the image.
  • loading: Set to "lazy" to enable lazy loading, improving page performance.
  • Add fetchPriority base on your requirement fetchPriority="high | low | auto"

For <picture> :

Use this URL to generate images with responsive breakpoints https://www.responsivebreakpoints.com/ : 


<picture>
<source
media="(max-width: 767px)"
sizes="(max-width: 554px) 100vw, 554px"
srcset="
background-image_1_uefngc_ar_1_1,c_fill,g_auto__c_scale,w_320.jpg 320w,
background-image_1_uefngc_ar_1_1,c_fill,g_auto__c_scale,w_554.jpg 554w">
<source
media="(min-width: 768px) and (max-width: 991px)"
sizes="(max-width: 1054px) 70vw, 738px"
srcset="
background-image_1_uefngc_ar_4_3,c_fill,g_auto__c_scale,w_538.jpg 538w,
background-image_1_uefngc_ar_4_3,c_fill,g_auto__c_scale,w_738.jpg 738w">
<source
media="(min-width: 992px) and (max-width: 1199px)"
sizes="(max-width: 1640px) 60vw, 984px"
srcset="
background-image_1_uefngc_ar_16_9,c_fill,g_auto__c_scale,w_596.jpg 596w,
background-image_1_uefngc_ar_16_9,c_fill,g_auto__c_scale,w_984.jpg 984w">
<img
sizes="(max-width: 4780px) 40vw, 1912px"
srcset="
background-image_1_uefngc_c_scale,w_480.jpg 480w,
background-image_1_uefngc_c_scale,w_1912.jpg 1912w"
src="background-image_1_uefngc_c_scale,w_1912.jpg"
alt=""
aria-label="An example image" width="300" height="200" loading="lazy">
</picture>
  • The <picture> element is like a container for displaying images on a webpage.
  • Inside the <picture> element, there are different <source> elements, each with a specific condition (like screen width) for when to use them..
  • Depending on the viewer's device and screen size, the browser will choose the most appropriate image from the options provided in the srcset attribute. This helps in optimizing the image for different devices, ensuring it's not too large for small screens or too small for larger screens.
  • The srcset attribute in each <source> element provides a list of different image files and their corresponding widths. It helps the browser choose the most appropriate image to load based on the viewer's device and screen size. This ensures that the right image is displayed for the user's screen, helping to save bandwidth and improve the page's performance.
  • The <img> element is the actual image that will be displayed if none of the <source> conditions match or if the browser doesn't support the <picture> element. The src attribute in the <img> element provides the default image source.
  • Various attributes like alt, width, and height are used for accessibility and layout purposes, while the loading attribute helps improve page load times by loading the image lazily, only when it's about to enter the viewport.

Custom Dropdown using HTML & jQuery

Output Example :

Select an option
  • Option 1
  • Option 2
  • Option 3
  • Option 4

Code Example (Select And Copy) :

HTML :


<div class="custom-dropdown">
    <div class="selected-option">Select an option</div>
    <ul class="dropdown-options">
        <li data-value="option1">Option 1</li>
        <li data-value="option2">Option 2</li>
        <li data-value="option3">Option 3</li>
        <li data-value="option4">Option 4</li>
    </ul>
</div>

CSS :


.custom-dropdown {
    position: relative;
    width: 200px;
    margin: 20px;
    font-family: Arial, sans-serif;
}
                        
.selected-option {
    padding: 10px;
    border: 1px solid #ccc;
    cursor: pointer;
}
                        
.dropdown-options {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    position: absolute;
    border: 1px solid #ccc;
    background-color: #fff;
}
                        
.dropdown-options li {
    padding: 10px;
    cursor: pointer;
}
                        
.dropdown-options li:hover {
    background-color: #f0f0f0;
}

Scss :


.custom-dropdown {
    position: relative;
    width: 200px;
    margin: 20px;
    font-family: Arial, sans-serif;
    .selected-option {
      padding: 10px;
      border: 1px solid #ccc;
      cursor: pointer;
    }
    .dropdown-options {
      list-style: none;
      padding: 0;
      margin: 0;
      display: none;
      position: absolute;
      border: 1px solid #ccc;
      background-color: #fff;
      width: 100%;
      li {
        padding: 10px;
        color: #000000;
        cursor: pointer;
        &:hover {
          background-color: #f0f0f0;
        }
      }
    }
  }

jQuery :


$(document).ready(function () {
    // Handle clicking on the selected option to show/hide the dropdown
    $('.selected-option').click(function () {
        $('.dropdown-options').slideToggle();
    });
                        
    // Handle selecting an option from the dropdown
    $('.dropdown-options li').click(function () {
        var selectedValue = $(this).attr('data-value');
        $('.selected-option').text($(this).text());
        $('.dropdown-options').slideUp();
    });
                        
    // Close the dropdown if the user clicks outside of it
    $(document).click(function (e) {
        if (!$(e.target).closest('.custom-dropdown').length) {
            $('.dropdown-options').slideUp();
        }
    });
});
Kopyalandı!