Skip to content

Instantly share code, notes, and snippets.

@MatthieuScarset

MatthieuScarset/emmet-html-default

Last active May 25, 2021 09:07
Show Gist options
  • Save MatthieuScarset/bdcfa2d4b8fdd875c409 to your computer and use it in GitHub Desktop.
Save MatthieuScarset/bdcfa2d4b8fdd875c409 to your computer and use it in GitHub Desktop.
Download ZIP
Emmet shortcode to create a default HTML5 template file.
Raw
emmet-html-default
<!--
EMMET CODE
Copy the two lines below
-->
<!DOCTYPE html>
html>(head(meta[charset=UTF-8]+title+meta[author]+meta[generator]+meta[name=keywords][content]+meta[name=description][content]+link[href][type=text/css][rel=stylesheet]+script[src][type=text/javascript])+body(header+main(section#.(h1(lorem5)+p*3(lorem))+section#.(h2(lorem5)+div.(p*2(lorem))))+footer>p(ul.nav-footer>li*3>a(lorem2))))
<!--
RESULT
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta author="">
<meta generator="">
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" href="" type="text/css">
<script src="" type="text/javascript"></script>
</head>
<body>
<header></header>
<main>
<section id="" class="">
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae fugit ipsa temporibus aliquam quibusdam. Maxime, totam consequatur nulla temporibus, veritatis explicabo vitae aliquid cum dolore eius iure vel ipsam! Harum.</p>
<p>Voluptates sint maxime a vitae, enim quos dolores error autem in voluptatibus aliquid culpa. Quas modi ut sunt dicta ducimus optio et eaque, quod hic ea expedita, veritatis obcaecati, cumque.</p>
<p>Quidem ea magnam porro. Assumenda, excepturi, impedit! Inventore optio accusantium laborum eos quod rem quae. Harum culpa, nostrum fugit. Labore harum amet dolor iste itaque incidunt illo quos fugiat ipsa!</p>
</section>
<section id="" class="">
<h2>Lorem ipsum dolor sit amet.</h2>
<div class="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At maiores, maxime suscipit ipsum, cupiditate sit ipsam corporis adipisci libero, eaque est harum quidem eos nobis quasi amet autem doloremque consequuntur.</p>
<p>Quia dolore quibusdam temporibus expedita rem facere quaerat natus voluptatibus, esse neque, maiores distinctio repudiandae! Obcaecati aliquid animi soluta omnis delectus repudiandae dolorum laudantium tempora. Impedit rerum cum aspernatur voluptate!</p>
</div>
</section>
</main>
<footer>
<p>
<ul class="nav-footer">
<li><a href="">Lorem ipsum.</a></li>
<li><a href="">Vitae, alias!</a></li>
<li><a href="">Enim, facere!</a></li>
</ul>
</p>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment