06 Theme structure - pimmey/axala-docs GitHub Wiki

Code structure

The theme is using the following structure:

<!DOCTYPE html>
<html>
    <head>
        <!-- meta information, stylesheets, icons, title -->
    </head>
    <body>
        <!-- priority scripts that should be placed right after body -->
        <div class="navbar-fixed">
            <!-- navigation -->
        </div>
        <main>
            <!-- remaining web-site: nav, sections, modals and footer -->
        </main>
        <footer>
            <!-- footer -->
        </footer>
        <!-- remaining scripts go after the main container and just before the closing body tag -->
    </body>
</html>

DOCTYPE and html tag

<!DOCTYPE html> is a way to declare your file as HTML5 and <html> is the root of your document.

head

The head tag includes a lot of important tags, like:

The HTML element represents any metadata information that cannot be represented by one of the other HTML meta-related elements
The stylesheets of Materialize library, as well as Linea icons stylesheet and the main stylesheet
Special tags to add favicons to the site
The <title> tag

body

Body includes all of your site elements, like navigation, main container where all the pages are gonna be loaded and footer.