Base HTML

Overview

The Hantsweb template keeps CSS and Scripts simple. There is one principle CSS file.

Sub-sites may have their own CSS file, applied at the template level.

Example
WCMS use
MVC.net use
Code

The base HTML5 page structure for all Hantsweb content is as follows:

<!doctype html>
<html lang="en-GB">
<head>
    <title>Hantsweb | Hantsweb</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="title" content="Hantsweb" />
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@hantsconnect" />
    <meta property="og:title" content="Hantsweb" />
    <meta property="og:type" content="website" />
    <meta property="og:description" content="" />
    <meta property="og:url" content="https://www.hants.gov.uk/" />
    <meta property="og:image" content="" />

<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="initial-scale=1" />
<meta name="format-detection" content="telephone=no" />
<link rel="canonical" href="https://www.hants.gov.uk/" />
<link href="https://www.hants.gov.uk/style.css?v=iD9t6tBZOadtod1RQ2NruSNDdDLsZ8y8aEEOa74H1BI1" rel="stylesheet"/>


        <link href="https://www.hants.gov.uk/-/media/Files/CSS/homepage.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="https://www.hants.gov.uk/assets/images/favicon.ico" />
<link rel="apple-touch-icon-precomposed" href="https://www.hants.gov.uk/images/ico-hcc-57.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://www.hants.gov.uk/images/ico-hcc-72.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://www.hants.gov.uk/images/ico-hcc-114.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://www.hants.gov.uk/images/ico-hcc-144.png" />


    <!-- start microsite section -->
    <!-- end microsite section -->
</head>
<body>
    <!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KG6P5BG" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
    <!-- googleoff: all -->
<div>
    <!-- start: cookie notification -->
    
    <!-- end: cookie notification -->
    <!-- start: global header -->
        <!-- start:    skip links -->
    <nav class="skip-links two columns alpha" aria-label="skip links">
        <ul class="remove-sides">
            <li>
                <a href="#page" class="thumbnail">Skip to section navigation </a>
            </li>
            <li>
                <a href="#page_content" class="thumbnail">Skip to content</a>
            </li>

            <li>
                <a href="#global_footer" class="thumbnail">Skip to footer</a>
            </li>

            <li>
                <a href="https://www.hants.gov.uk/accessibility" class="thumbnail">Accessibility</a>
            </li>

        </ul>
    </nav>
    <!-- end: skip links -->

    <header id="global-nav-wrapper" class="noprint" aria-label="hantsweb menu">
        <div id="global-mmenu">
            <ul class="container global-header " id="global-mmenu-mega">
                <li class="global-brand-mm">
                    <a href="http://www.hants.gov.uk/">
                        <img alt="Hantsweb" src="https://www.hants.gov.uk/-/media/Images/Site-images/wcms-atom-hantsweblogo.png" class="scale-with-grid" />
                    </a>
                </li>
                <li id="mobile-close-button"><a href="#page_content">Close ✖</a></li>

                    <li class="global-nav-item global-services-mm">
                        <a class="blocklink" id="services-nav" href="https://www.hants.gov.uk/services">Services ☰</a>
                        <div>
                                    <ul class="mega-menu-row">
                                        <li>
                                                    <ul class="three column alpha">
                                                        <li class="label">
    <a class="blocklink" href="https://www.hants.gov.uk:443/birthsdeathsandceremonies" >
        <i class="extended-icon signup icon"></i> Births, deaths and ceremonies
    </a>
</li>
    <li class="top-task">
        <a  href="https://www.hants.gov.uk:443/birthsdeathsandceremonies/births">
            Births
        </a>
    </li>
    <li class="top-task">
        <a  href="https://www.hants.gov.uk:443/birthsdeathsandceremonies/marriage">
            Marriages
        </a>
    </li>
    <li class="top-task">
        <a  href="https://www.hants.gov.uk:443/birthsdeathsandceremonies/nationalitycitizenship">
            Nationality & citizenship
        </a>
    </li>

                                                    </ul>
                                                    <ul class="three column">
                                                        <li class="label">
    <a class="blocklink" href="https://www.hants.gov.uk:443/business" >
        <i class="stats icon"></i> Business, economy and consumers
    </a>
</li>
    <li class="top-task">
        <a  href="https://www.hants.gov.uk:443/business/tradingstandards/businessadvice">
            Business advice
        </a>
    </li>
    <li class="top-task">
        <a  href="https://www.hants.gov.uk:443/business/tradingstandards/consumeradvice">
            Consumer advice
        </a>
    </li>
    <li class="top-task">
        <a  href="https://www.hants.gov.uk:443/business">
            Tourism in Hampshire
        </a>
    </li>

                                                    </ul>
                                                    <ul class="three column">
                                                        <li class="label">
    <a class="blocklink" href="https://www.hants.gov.uk:443/community" >
        <i class="extended-icon group icon"></i> Community support
    </a>
</li>
    <li class="top-task">
        <a  href="https://www.hants.gov.uk:443/community/armedforces">
            Armed forces
        </a>
    </li>
    <li class="top-task">
        <a  href="https://www.hants.gov.uk:443/transport/trafficandtravel/alternativetransport/communitytransport">
            Community transport
        </a>
    </li>

                                                    </ul>
                                                    <ul class="three column omega">
                                                        <li class="label">
    <a class="blocklink" href="https://www.hants.gov.uk:443/educationandlearning" >
        <i class="extended-icon quals icon"></i> Education and learning
    </a>
</li>
    <li class="top-task">
        <a  href="https://www.hants.gov.uk:443/educationandlearning/schoolholidays">
            School holiday dates
        </a>
    </li>
    <li class="top-task">
        <a  href="https://www.hants.gov.uk:443/educationandlearning/findaschool">
            Schools in your area
        </a>
    </li>
    <li class="top-task">
        <a  href="https://www.hants.gov.uk:443/educationandlearning/admissions">
            School applications
        </a>
    </li>

                                                    </ul>
                                        </li>
                                    </ul>
                                    <ul class="mega-menu-row">
                                        <li>
                                                    <ul class="three column alpha">
                                                        <li class="label">
    <a class="blocklink" href="https://www.hants.gov.uk:443/jobs" >
        <i class="extended-icon drawer icon"></i> Jobs, careers and volunteering
    </a>
</li>
    <li class="top-task">
        <a  href="http://www3.hants.gov.uk/newjob">
            Vacancies
        </a>
    </li>
    <li class="top-task">
        <a  href="https://www.hants.gov.uk:443/educationandlearning/yourfuture/workingandtraining/apprenticeships">
            Apprenticeships
        </a>
    </li>
    <li class="top-task">
        <a  href="https://www.hants.gov.uk:443/jobs/volunteering">
            Volunteering
        </a>
    </li>

                                                    </ul>
                                                    <ul class="three column">
                                                        <li class="label">
    <a class="blocklink" href="https://www.hants.gov.uk:443/landplanningandenvironment" >
        <i class="map icon"></i> Land, planning and environment
    </a>
</li>
    <li class="top-task">
        <a  href="https://www.hants.gov.uk:443/landplanningandenvironment/rightsofway">
            Rights of way
        </a>
    </li>
    <li class="top-task">
        <a  href="https://www.hants.gov.uk:443/landplanningandenvironment/environment">
            Environment
        </a>
    </li>
    <li class="top-task">
        <a  href="https://www.hants.gov.uk:443/business/propertyservices">
            Property information
        </a>
    </li>

                                                    </ul>
                                                    <ul class="three column">
                                                        <li class="label">
    <a class="blocklink" href="https://www.hants.gov.uk:443/librariesandarchives" >
        <i class="extended-icon books icon"></i> Libraries and archives
    </a>
</li>
    <li class="top-task">
        <a  href="https://www.hants.gov.uk:443/librariesandarchives/library/libraryfinder">
            Libraries in your area
        </a>
    </li>
    <li class="top-task">
        <a  href="https://hampshire.spydus.co.uk/cgi-bin/spydus.exe/MSGTRN/OPAC/HOME">
            Your library account
        </a>
    </li>
    <li class="top-task">
        <a  href="https://www.hants.gov.uk:443/librariesandarchives/archives">
            Hampshire archives
        </a>
    </li>

                                                    </ul>
                                                    <ul class="three column omega">
                                                        <li class="label">
    <a class="blocklink" href="https://www.hants.gov.uk:443/socialcareandhealth" >
        <i class="extended-icon user-md icon"></i> Social care and health
    </a>
</li>
    <li class="top-task">
        <a  href="https://www.hants.gov.uk:443/socialcareandhealth/adoptionandfostering">
            Adoption & fostering
        </a>
    </li>
    <li class="top-task">
        <a  href="https://www.hants.gov.uk:443/socialcareandhealth/adultsocialcare">
            Adult social care & health
        </a>
    </li>
    <li class="top-task">
        <a  href="https://www.hants.gov.uk:443/socialcareandhealth/childrenandfamilies">
            Childcare & family support
        </a>
    </li>

                                                    </ul>
                                        </li>
                                    </ul>
                                    <ul class="mega-menu-row">
                                        <li>
                                                    <ul class="three column alpha">
                                                        <li class="label">
    <a class="blocklink" href="https://www.hants.gov.uk:443/thingstodo" >
        <i class="extended-icon info-sign icon"></i> Things to do in Hampshire
    </a>
</li>
    <li class="top-task">
        <a  href="https://www.hants.gov.uk:443/thingstodo/countryside">
            Country parks
        </a>
    </li>
    <li class="top-task">
        <a  href="http://www3.hants.gov.uk/events">
            Events
        </a>
    </li>
    <li class="top-task">
        <a  href="https://www.hants.gov.uk:443/thingstodo/outdoorcentres">
            Outdoor activity centres
        </a>
    </li>

                                                    </ul>
                                                    <ul class="three column">
                                                        <li class="label">
    <a class="blocklink" href="https://www.hants.gov.uk:443/transport" >
        <i class="roads-icon car icon"></i> Transport and roads
    </a>
</li>
    <li class="top-task">
        <a  href="https://www.hants.gov.uk:443/transport/roadmaintenance/roadproblems">
            Report a problem
        </a>
    </li>
    <li class="top-task">
        <a  href="https://www.hants.gov.uk:443/transport/parking/bluebadge">
            Blue Badge
        </a>
    </li>
    <li class="top-task">
        <a  href="https://www.hants.gov.uk:443/transport/licencesandpermits">
            Licences & permits
        </a>
    </li>

                                                    </ul>
                                                    <ul class="three column">
                                                        <li class="label">
    <a class="blocklink" href="https://www.hants.gov.uk:443/wasteandrecycling" >
        <i class="extended-icon truck icon"></i> Waste prevention and recycling
    </a>
</li>
    <li class="top-task">
        <a  href="https://www.hants.gov.uk:443/wasteandrecycling/recyclingcentres">
            Household waste recycling
        </a>
    </li>
    <li class="top-task">
        <a  href="https://www.hants.gov.uk/wasteandrecycling/commercialwaste">
            Commercial waste
        </a>
    </li>
    <li class="top-task">
        <a  href="https://www.hants.gov.uk:443/wasteandrecycling/recyclingcentres/wastepermits">
            Waste permits
        </a>
    </li>

                                                    </ul>
                                                    <ul class="three column omega">
                                                        <li class="label">
    <a class="blocklink" href="https://www.hants.gov.uk:443/aboutthecouncil" >
        <i class="extended-icon office icon"></i> About the Council
    </a>
</li>
    <li class="top-task">
        <a  href="https://www.hants.gov.uk:443/aboutthecouncil/councillors">
            Councillors, meetings, decisions
        </a>
    </li>
    <li class="top-task">
        <a  href="https://www.hants.gov.uk:443/aboutthecouncil/haveyoursay">
            Consultations
        </a>
    </li>
    <li class="top-task">
        <a  href="https://www.hants.gov.uk:443/aboutthecouncil/electionsandvoting">
            Elections & voting
        </a>
    </li>

                                                    </ul>
                                        </li>
                                    </ul>
                                    <ul class="mega-menu-row">
                                        <li>
                                                    <ul class="three column alpha">
                                                        <li class="label">
    <a class="blocklink" href="https://www.hants.gov.uk/business/suppliers" >
        <i class="extended-icon calculate icon"></i> Supplier services
    </a>
</li>

                                                    </ul>
                                                    <ul class="three column">
                                                        <li class="label">
    <a class="blocklink" href="https://extra.hants.gov.uk/" >
        <i class="extended-icon payslips icon"></i> Employee self service
    </a>
</li>

                                                    </ul>
                                                    <ul class="three column">
                                                        <li class="label">
    <a class="blocklink" href="https://www.hants.gov.uk/accessibility" >
        <i class=" icon"></i> Web accessibility
    </a>
</li>

                                                    </ul>
                                                    <ul class="three column omega">
                                                        <li class="label">
    <a class="blocklink" href="https://www.hants.gov.uk:443/aboutthecouncil/contact" title="Contact">
        <i class="phone icon"></i> Contact
    </a>
</li>

                                                    </ul>
                                        </li>
                                    </ul>

                        </div>
                    </li>
                <li class="global-search-mm">
                    <form class="small global-search column omega" id="global_form_search" action="https://www.hants.gov.uk/search">
                        <ul class="remove-sides input-append stay-inlined clearfix">
                            <li class="three-quarters column alpha omega">
                                <label class="offscreen" for="global_search_q">Search Hantsweb services and sites</label>
                                <input name="q" type="text" id="global_search_q" placeholder="Search Hantsweb" style="width: 100%">
                            </li>
                            <li class="one-quarter column alpha omega">
                                <input type="hidden" value="FORID:11" name="cof">
                                <input type="hidden" value="009988739743092233991:4hx6rzq-jqg" name="cx">
                                <button class=" searchbutton full-width" name="sa" type="submit"><span class="offscreen">submit</span><i class="icon-core search"></i></button>
                            </li>
                        </ul>
                    </form>
                </li>



<!-- Identity integration -->
        <script>
            console.log("AccountMenu.cshtml if (!Model.IsHantswebUserSignedIn)")
        </script>
        <li class="global-nav-item global-account-login">
            <a class="blocklink" href="https://www.hants.gov.uk/accounts">Sign in</a>
        </li>
        <li class="global-nav-item global-account-register">
            <a class="blocklink" href="https://www.hants.gov.uk/registering">Register</a>
        </li>
        <li class="global-nav-login-mobile offscreen session-closed">
            <a href="https://www.hants.gov.uk/account">
                <i class="extended-icon icon signin"></i> Sign in
            </a>
            <a href="https://www.hants.gov.uk/registering"><i class="icon signup"></i> Register</a>
        </li>

<input type="hidden" id="IsUserSignedIn" value="False" />
<input type="hidden" id="TabSessionTimeoutDisplayed" value="false" />
<input type="hidden" id="TabCurrentSessionId" value="0ngqw3htgair0bst0gzxtmhc" />
            </ul>
        </div>
    </header>

    <!-- end: global header -->
    <!-- start: site-wide alerts -->
    
    <!-- end: site-wide alerts -->

    <section id="page">
            <div class="container content noprint">
                <header class="row" id="global_container_breadcrumb" aria-label="site navigation">
    <nav class="ten columns alpha" aria-label="breadcrumbs">
        <ul class="inline breadcrumb smaller" id="global_breadcrumb">


</ul>
    </nav>
        <aside class="two columns omega show-on-tablets-and-desktops">
        </aside>
</header>
            </div>

        <div class="container">
            <div class="content" id="page_content" role="main">
                <!-- googleon: all -->
                <!-- PAGE CONTENT STARTS -->
                
                <!-- PAGE CONTENT ENDS -->
                <!-- googleoff: all -->
                


            </div>
        </div>

        

            <div class="row noprint">
        <h3 class="center nav-header remove-bottom">
            Find us on
        </h3>
        <ul class="center tiny-top">
                <li class="inlined">
                    <a rel="nofollow" href="https://www.facebook.com/hantsconnect" class="noborder tooltip" title="Facebook" aria-label="Facebook">
                        <i class="medium facebook icon" aria-hidden="true" title="Facebook"></i><span class="jq-hidden-icon-label">Facebook</span>
                    </a>
                </li>
                <li class="inlined">
                    <a rel="nofollow" href="https://www.twitter.com/hantsconnect" class="noborder tooltip" title="Twitter @hantsconnect" aria-label="Twitter @hantsconnect">
                        <i class="medium twitter icon" aria-hidden="true" title="Twitter @hantsconnect"></i><span class="jq-hidden-icon-label">Twitter @hantsconnect</span>
                    </a>
                </li>
        </ul>
    </div>   

    </section>
        <!-- start: global footer -->
    <footer class="navbar noprint" id="global_footer" aria-label="hantsweb footer">
        <div class="navbar-inner">
            <div class="container global-header">
                <div class="global-brand column alpha">
                    <a href="http://www.hants.gov.uk/"><img alt="Hantsweb" src="https://www.hants.gov.uk/-/media/Images/Site-images/wcms-atom-hantsweblogo-foot.png" class="scale-with-grid"/></a>
                </div>
                <ul class="global-nav nav column right" id="global_menu_privacy">
                        <li><a title="Accessibility" href="https://www.hants.gov.uk:443/aboutthecouncil/accessibility">Accessibility</a></li>
                        <li><a title="Privacy caption" href="https://www.hants.gov.uk:443/aboutthecouncil/privacy">Privacy</a></li>
                        <li><a  href="https://www.hants.gov.uk:443/aboutthecouncil/disclaimer">Disclaimer</a></li>
                </ul>
            </div>
        </div>
    </footer>
    <!-- end: global footer -->


</div>

    <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-4081638-1"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());

    gtag('config', 'UA-4081638-1');
</script>
    
    <script src="//ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://www.hants.gov.uk/script.js?v=tXmK3RWpjWtV_X6YwbG9a9KhN34n5ft-hcYpucMPy341"></script>

<script src="https://www.hants.gov.uk/Assets/JS/custom/session.timeout.js"></script>


<!-- start: custom scripts -->

<!-- end: custom scripts -->
<!-- googleon: all -->
    

</body>
</html>
Version and status
  • 1.0
  • current version
  • Concept