Skip to content

Instantly share code, notes, and snippets.

@anwas

anwas/html-template.html

Last active September 18, 2019 23:51
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anwas/3ec2ef508274224a8f054b1cbc18fed7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anwas/3ec2ef508274224a8f054b1cbc18fed7 to your computer and use it in GitHub Desktop.
Download ZIP
[HTML page TEMPLATE] #html #template #opengraph
Raw
html-template.html
<!doctype html>
<html lang="lt">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Page Title less than 55 characters</title>
<meta name="description" content="Description of the page less than 150 characters">
<!-- Standard favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- Recommended favicon format -->
<link rel="icon" type="image/png" href="/favicon.png">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="lt_LT">
<!-- Next tags are optional but recommended -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">
</head>
<body>
<h1>Web Animation</h1>
</body>
</html>
Raw
html5-template-with-assets-version.php
<!doctype html>
<!--[if lt IE 8]><html lang="lt" class="no-js ie lt-ie8 lt-ie9"><![endif]-->
<!--[if IE 8]><html lang="lt" class="no-js ie ie8 lt-ie9"><![endif]-->
<!--[if IE 9]><html lang="lt" class="no-js ie ie9"><![endif]-->
<!--[if !IE]><!--><html lang="lt" class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Boilerplate šablonas</title>
<meta name="description" content="Puslapio aprašymas – HTML5 boilerplate šablonas." />
<link type="text/css" rel="stylesheet" href="./assets/css/style.css?v=<?php echo filemtime( dirname( __FILE__ ) . '/assets/css/style.css' ); ?>" />
<!-- Standard favicon -->
<!-- Įkelkite favicon.ico ir apple-touch-icon.png į šakninį aplanką -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- Recommended favicon format -->
<link rel="icon" type="image/png" href="/favicon.png">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="lt_LT">
<!-- Next tags are optional but recommended -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script>try{Modernizr} catch(e) {document.write('<script src="./assets/js/libs/modernizr/modernizr.min.js">\x3C/script>')}</script>
<!--[if lte IE 8]>
<script rel="script" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
<![endif]-->
</head>
<body>
<!--[if lte IE 9]><p class="browsehappy">Jūs naudojate <strong>pasenusią ir nesaugią</strong> interneto naršyklę. Prašome <a href="http://browsehappy.com/" target="_blank">atnaujinti savo interneto naršyklę</a>, kad galėtumėte pagerinti naršymo galimybes.</p><![endif]-->
<div id="page" class="site hfeed">
<button class="skip-link screen-reader-text">Pereiti prie turinio</button>
<header id="masthead" class="site-header" role="banner">
<div class="site-branding">
<h1 class="site-title">Site title</h1>
<p class="site-description">Site description</p>
</div><!-- END .site-branding -->
<nav id="site-navigation" class="main-navigation" role="navigation">
<div class="main-navigation-container">
<ul id="primary-menu" class="menu nav-menu main-menu" aria-expanded="true">
<li id="menu-item-1" class="menu-item menu-item-home">
<a href="#">Pradžia</a>
</li>
<li id="menu-item-2" class="menu-item">
<a href="#">Aktualijos</a>
</li>
<li id="menu-item-3" class="menu-item menu-item-has-children">
<a href="#">Objektai, faktai, žmonės</a>
<ul class="sub-menu">
<li id="menu-item-4" class="menu-item">
<a href="#">Nauji leidiniai</a>
</li>
<li id="menu-item-5" class="menu-item">
<a href="#">Virtualios parodos</a>
</li>
</ul>
</li>
</ul><!-- END #primary-menu .menu.nav-menu.main-menu -->
</div><!-- END .main-navigation-container -->
</nav><!-- END #site-navigation .main-navigation -->
</header><!-- END #masthead .site-header -->
<div id="content" class="site-content">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<article id="post-1" class="post hentry">
<header class="entry-header">
<h2 class="entry-title">Post 1</h2>
</header>
<div class="entry-content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus aspernatur doloremque placeat labore nostrum totam?</p>
</div>
<footer class="entry-footer">
<small>Something</small>
</footer>
</article>
</main><!-- END #main .site-main -->
</div><!-- END #primary .content-area -->
<aside id="secondary" class="widget-area primary-widget-area" role="complementary">
<h3 class="widget-title">Primary widget area</h3>
</aside><!-- END #secondary .widget-area.primary-widget-area -->
<aside id="tertiary" class="widget-area secondary-widget-area" role="complementary">
<h3 class="widget-title">Secondary widget area</h3>
</aside><!-- END #tertiary .widget-area.secondary-widget-area -->
</div><!-- END #content .site-content -->
<footer id="colophon" class="site-footer" role="contentinfo">
<div class="site-info">Site info in site footer</div><!-- END .site-info -->
</footer><!-- END #colophon .site-footer -->
</div><!-- END #page .site.hfeed -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="./assets/js/libs/jquery/jquery-3.4.1.min.js">\x3C/script>')</script>
<script type="text/javascript" src="./assets/js/main.js?v=<?php echo filemtime( dirname( __FILE__ ) . '/assets/js/main.js' ); ?>"></script>
</body>
</html>
Raw
html5-template.html
<!doctype html>
<!--[if lt IE 8]><html lang="lt" class="no-js ie lt-ie8 lt-ie9"><![endif]-->
<!--[if IE 8]><html lang="lt" class="no-js ie ie8 lt-ie9"><![endif]-->
<!--[if IE 9]><html lang="lt" class="no-js ie ie9"><![endif]-->
<!--[if !IE]><!-->
<html lang="lt" class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Boilerplate šablonas</title>
<meta name="description" content="Puslapio aprašymas – HTML5 boilerplate šablonas." />
<link type="text/css" rel="stylesheet" href="./assets/css/style.css" />
<!-- Standard favicon -->
<!-- Įkelkite favicon.ico ir apple-touch-icon.png į šakninį aplanką -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- Recommended favicon format -->
<link rel="icon" type="image/png" href="/favicon.png">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="lt_LT">
<!-- Next tags are optional but recommended -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js">
</script>
<script>
try{Modernizr} catch(e) {document.write('<script src="./assets/js/libs/modernizr/modernizr.min.js">\x3C/script>')}
</script>
<!--[if lte IE 8]>
<script rel="script" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
<![endif]-->
</head>
<body>
<!--[if lte IE 9]><p class="browsehappy">Jūs naudojate <strong>pasenusią ir nesaugią</strong> interneto naršyklę. Prašome <a href="http://browsehappy.com/" target="_blank">atnaujinti savo interneto naršyklę</a>, kad galėtumėte pagerinti naršymo galimybes.</p><![endif]-->
<div id="page" class="site hfeed">
<button class="skip-link screen-reader-text">Pereiti prie turinio</button>
<header id="masthead" class="site-header" role="banner">
<div class="site-branding">
<h1 class="site-title">Site title</h1>
<p class="site-description">Site description</p>
</div><!-- END .site-branding -->
<nav id="site-navigation" class="main-navigation" role="navigation">
<div class="main-navigation-container">
<ul id="primary-menu" class="menu nav-menu main-menu" aria-expanded="true">
<li id="menu-item-1" class="menu-item menu-item-home">
<a href="#">Pradžia</a>
</li>
<li id="menu-item-2" class="menu-item">
<a href="#">Aktualijos</a>
</li>
<li id="menu-item-3" class="menu-item menu-item-has-children">
<a href="#">Objektai, faktai, žmonės</a>
<ul class="sub-menu">
<li id="menu-item-4" class="menu-item">
<a href="#">Nauji leidiniai</a>
</li>
<li id="menu-item-5" class="menu-item">
<a href="#">Virtualios parodos</a>
</li>
</ul>
</li>
</ul><!-- END #primary-menu .menu.nav-menu.main-menu -->
</div><!-- END .main-navigation-container -->
</nav><!-- END #site-navigation .main-navigation -->
</header><!-- END #masthead .site-header -->
<div id="content" class="site-content">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<article id="post-1" class="post hentry">
<header class="entry-header">
<h2 class="entry-title">Post 1</h2>
</header>
<div class="entry-content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus aspernatur doloremque
placeat labore nostrum totam?</p>
</div>
<footer class="entry-footer">
<small>Something</small>
</footer>
</article>
</main><!-- END #main .site-main -->
</div><!-- END #primary .content-area -->
<aside id="secondary" class="widget-area primary-widget-area" role="complementary">
<h3 class="widget-title">Primary widget area</h3>
</aside><!-- END #secondary .widget-area.primary-widget-area -->
<aside id="tertiary" class="widget-area secondary-widget-area" role="complementary">
<h3 class="widget-title">Secondary widget area</h3>
</aside><!-- END #tertiary .widget-area.secondary-widget-area -->
</div><!-- END #content .site-content -->
<footer id="colophon" class="site-footer" role="contentinfo">
<div class="site-info">Site info in site footer</div><!-- END .site-info -->
</footer><!-- END #colophon .site-footer -->
</div><!-- END #page .site.hfeed -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="./assets/js/libs/jquery/jquery-3.4.1.min.js">\x3C/script>')
</script>
<script type="text/javascript" src="./assets/js/main.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment