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