03. HTML Structure

Let's take a look on what is the recommended HTML structure in our template.  In short, there is no big difference from page to page and most changes are only inside the main class="anita-main" tag. 
<!DOCTYPE html>
html lang="en"
head
    meta charset="UTF-8"
    meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1   "
    meta http-equiv="X-UA-Compatible" content="ie=edge"
    
     Page Title 
    titleYour Page Title/title
    
     Google Fonts 
    link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@600;800&family=Rajdhani:wght@700&display=swap" rel="stylesheet"
     Template Config 
    link type="text/css" rel="stylesheet" href="css/config.css"
     Libraries 
    link type="text/css" rel="stylesheet" href="css/libs.css"
     Template Styles 
    link type="text/css" rel="stylesheet" href="css/style.css"
     Responsive 
    link type="text/css" rel="stylesheet" href="css/responsive.css"
    
     Favicon 
    link rel="icon" href="img/favicon.png" sizes="32x32"
/head
body
     Header 
    header id="anita-header" class="anita-header"
        div class="anita-header-inner"
            ...
        /div
    /header
    
     Fullscreen Menu 
    div class="anita-fullscreen-menu-wrap"
        ...
    /div
    
     Page Background (Optional) 
    div class="anita-page-background-wrap"
        div class="anita-page-background" data-src="(your_image_or_video_url)" data-opacity="0.05"/div
    /div
    
     Page Content 
    main class="anita-main"
        ...
    /main
    
     Footer 
    footer id="anita-footer"
        div class="anita-footer-inner"
            ...
        /div
    /footer
    
     JS Scripts 
    script src="js/lib/jquery.min.js"/script
    script src="js/lib/aos.min.js"/script
    script src="js/lib/core.js"/script
/body
/html

In the example above, you can see the base structure of the HTML file. All main parts of the code are commented on for better understanding and ease of use. Some parts shown in the example are optional or depend on some options. We will take a closer look at them below.

In the head section all you need to change from page to page, is the titleYou Page Title/title tag. And even this is optional because you can use your company name title for all pages. In the rest, the head part is the same for all pages unless you will want to add some additional styles to some of the pages.

Content Animation on Scroll

In our template, you can find data attributes like data-aos, data-aos-delay, and data-aos-offset in the code for some blocks. These attributes are used to animate elements appearing. In our template, we use the AOS library for that purpose. You can find detailed information about how to use them in the official documentation here: https://michalsnik.github.io/aos/.

Next Chapter

Header and Menu