{"id":1339,"date":"2015-09-22T22:46:00","date_gmt":"2015-09-22T20:46:00","guid":{"rendered":"https:\/\/www.robinglauser.ch\/blog\/?p=1339"},"modified":"2015-09-22T22:48:19","modified_gmt":"2015-09-22T20:48:19","slug":"emmet-write-html-at-lightning-speed","status":"publish","type":"post","link":"https:\/\/www.robinglauser.ch\/blog\/2015\/09\/22\/emmet-write-html-at-lightning-speed\/","title":{"rendered":"Emmet – Write HTML at lightning speed"},"content":{"rendered":"

Are you looking to get faster at writing HTML and CSS? In this case you will love the Emmet toolkit integrated in PhpStorm<\/a>. It enables you to write for example the following code:<\/p>\n

ul>li*5\r\n<\/pre>\n
And get the following output by expanding it with\u00a0the tabulator.<\/p>\n
\u00a0<ul>\r\n <li><\/li>\r\n <li><\/li>\r\n <li><\/li>\r\n <li><\/li>\r\n <li><\/li>\r\n<\/ul><\/pre>\n
You can also create a HTML5 base template by simple using “!”<\/p>\n
<!DOCTYPE html> \r\n<html lang=\"en\"> \r\n<head>\r\n    <meta charset=\"UTF-8\" \/> \r\n    <title>Document<\/span><\/title> \r\n<\/head> \r\n<body>\r\n<\/body> \r\n<\/html><\/pre>\n
To create a div with the class “active” and the id “content” you can use<\/p>\n
div#content.active<\/pre>\n
This would produce the following output.<\/p>\n
<div id=\"content\" class=\"active\"><\/div><\/pre>\n
You can do this with any element. If you don’t provide a element “.active” it will default to div.<\/p>\n
With\u00a0div+p+bq you can create multiple following elements:<\/p>\n
<div><\/div> \r\n<p><\/p> \r\n<blockquote><\/blockquote><\/pre>\n
To add attributes to your element you can use “[attribute=”value”]”<\/p>\n
p[title=\"Hello world\"]<\/pre>\n
<p title=\"Hello world\"><\/p><\/pre>\n
You can define children by using “>”. So this:<\/p>\n
nav>ul>li<\/pre>\n
Will output this:<\/p>\n
<nav> \r\n  <ul> \r\n    <li><\/li> \r\n  <\/ul> \r\n<\/nav><\/pre>\n
You can also climb up the tree again with \u00a0“^”<\/p>\n
div+div>p>span+em^bq<\/pre>\n
<div><\/div>\r\n<div>\r\n <p><span><\/span><em><\/em><\/p>\r\n <blockquote><\/blockquote>\r\n<\/div>\r\n<\/pre>\n
With these shortcuts you can generate html much more quickly. To learn more features look at the cheat-sheet<\/a>\u00a0of Emmet.<\/p>\n
In a next post I will talk about how you can use this in CSS to code faster.<\/p>\n
Emmet Cheatsheet: http:\/\/docs.emmet.io\/cheat-sheet\/<\/a><\/p>\n
Website:\u00a0http:\/\/emmet.io\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Are you looking to get faster at writing HTML and CSS? In this case you will love the Emmet toolkit integrated in PhpStorm. It enables you to write for example the following code: ul>li*5 And get the following output by expanding it with\u00a0the tabulator. \u00a0<ul> <li><\/li> <li><\/li> <li><\/li> <li><\/li> <li><\/li> <\/ul> You can also create a HTML5 base template by … Read More<\/a><\/p>\n","protected":false},"author":2,"featured_media":1343,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[45,5],"tags":[149,150,148,53],"class_list":["post-1339","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","category-fresh","tag-emmet","tag-fast","tag-html","tag-phpstorm"],"yoast_head":"\nEmmet - Write HTML at lightning speed - Robin Glauser<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.robinglauser.ch\/blog\/2015\/09\/22\/emmet-write-html-at-lightning-speed\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Emmet - Write HTML at lightning speed - Robin Glauser\" \/>\n<meta property=\"og:description\" content=\"Are you looking to get faster at writing HTML and CSS? In this case you will love the Emmet toolkit integrated in PhpStorm. It enables you to write for example the following code: ul>li*5 And get the following output by expanding it with\u00a0the tabulator. \u00a0<ul> <li><\/li> <li><\/li> <li><\/li> <li><\/li> <li><\/li> <\/ul> You can also create a HTML5 base template by ... Read More\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.robinglauser.ch\/blog\/2015\/09\/22\/emmet-write-html-at-lightning-speed\/\" \/>\n<meta property=\"og:site_name\" content=\"Robin Glauser\" \/>\n<meta property=\"article:published_time\" content=\"2015-09-22T20:46:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-09-22T20:48:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.robinglauser.ch\/blog\/wp-content\/uploads\/2015\/09\/6HJtLkJSDqjqlE2NipEu_macbook-e1442953379141.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"667\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Robin Glauser\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@robinglauser\" \/>\n<meta name=\"twitter:site\" content=\"@robinglauser\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Robin Glauser\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/2015\\\/09\\\/22\\\/emmet-write-html-at-lightning-speed\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/2015\\\/09\\\/22\\\/emmet-write-html-at-lightning-speed\\\/\"},\"author\":{\"name\":\"Robin Glauser\",\"@id\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/#\\\/schema\\\/person\\\/e1a94504a6ff5171fa13670932514b19\"},\"headline\":\"Emmet – Write HTML at lightning speed\",\"datePublished\":\"2015-09-22T20:46:00+00:00\",\"dateModified\":\"2015-09-22T20:48:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/2015\\\/09\\\/22\\\/emmet-write-html-at-lightning-speed\\\/\"},\"wordCount\":194,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/#\\\/schema\\\/person\\\/e1a94504a6ff5171fa13670932514b19\"},\"image\":{\"@id\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/2015\\\/09\\\/22\\\/emmet-write-html-at-lightning-speed\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/09\\\/6HJtLkJSDqjqlE2NipEu_macbook-e1442953379141.jpg\",\"keywords\":[\"emmet\",\"fast\",\"html\",\"phpstorm\"],\"articleSection\":[\"Development\",\"Fresh\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/2015\\\/09\\\/22\\\/emmet-write-html-at-lightning-speed\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/2015\\\/09\\\/22\\\/emmet-write-html-at-lightning-speed\\\/\",\"url\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/2015\\\/09\\\/22\\\/emmet-write-html-at-lightning-speed\\\/\",\"name\":\"Emmet - Write HTML at lightning speed - Robin Glauser\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/2015\\\/09\\\/22\\\/emmet-write-html-at-lightning-speed\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/2015\\\/09\\\/22\\\/emmet-write-html-at-lightning-speed\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/09\\\/6HJtLkJSDqjqlE2NipEu_macbook-e1442953379141.jpg\",\"datePublished\":\"2015-09-22T20:46:00+00:00\",\"dateModified\":\"2015-09-22T20:48:19+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/2015\\\/09\\\/22\\\/emmet-write-html-at-lightning-speed\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/2015\\\/09\\\/22\\\/emmet-write-html-at-lightning-speed\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/2015\\\/09\\\/22\\\/emmet-write-html-at-lightning-speed\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/09\\\/6HJtLkJSDqjqlE2NipEu_macbook-e1442953379141.jpg\",\"contentUrl\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/09\\\/6HJtLkJSDqjqlE2NipEu_macbook-e1442953379141.jpg\",\"width\":1920,\"height\":667},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/2015\\\/09\\\/22\\\/emmet-write-html-at-lightning-speed\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Emmet – Write HTML at lightning speed\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/\",\"name\":\"Robin Glauser\",\"description\":\"My Blog about Development, Design and my random thoughts.\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/#\\\/schema\\\/person\\\/e1a94504a6ff5171fa13670932514b19\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/#\\\/schema\\\/person\\\/e1a94504a6ff5171fa13670932514b19\",\"name\":\"Robin Glauser\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/10\\\/DSC_1244_small.jpg\",\"url\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/10\\\/DSC_1244_small.jpg\",\"contentUrl\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/10\\\/DSC_1244_small.jpg\",\"width\":800,\"height\":530,\"caption\":\"Robin Glauser\"},\"logo\":{\"@id\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/10\\\/DSC_1244_small.jpg\"},\"description\":\"I'm a web developer.\",\"sameAs\":[\"https:\\\/\\\/www.robinglauser.ch\",\"https:\\\/\\\/www.instagram.com\\\/robinglauser\\\/\",\"https:\\\/\\\/x.com\\\/robinglauser\"],\"url\":\"https:\\\/\\\/www.robinglauser.ch\\\/blog\\\/author\\\/robin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Emmet - Write HTML at lightning speed - Robin Glauser","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.robinglauser.ch\/blog\/2015\/09\/22\/emmet-write-html-at-lightning-speed\/","og_locale":"en_US","og_type":"article","og_title":"Emmet - Write HTML at lightning speed - Robin Glauser","og_description":"Are you looking to get faster at writing HTML and CSS? In this case you will love the Emmet toolkit integrated in PhpStorm. It enables you to write for example the following code: ul>li*5 And get the following output by expanding it with\u00a0the tabulator. \u00a0<ul> <li><\/li> <li><\/li> <li><\/li> <li><\/li> <li><\/li> <\/ul> You can also create a HTML5 base template by ... Read More","og_url":"https:\/\/www.robinglauser.ch\/blog\/2015\/09\/22\/emmet-write-html-at-lightning-speed\/","og_site_name":"Robin Glauser","article_published_time":"2015-09-22T20:46:00+00:00","article_modified_time":"2015-09-22T20:48:19+00:00","og_image":[{"width":1920,"height":667,"url":"https:\/\/www.robinglauser.ch\/blog\/wp-content\/uploads\/2015\/09\/6HJtLkJSDqjqlE2NipEu_macbook-e1442953379141.jpg","type":"image\/jpeg"}],"author":"Robin Glauser","twitter_card":"summary_large_image","twitter_creator":"@robinglauser","twitter_site":"@robinglauser","twitter_misc":{"Written by":"Robin Glauser","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.robinglauser.ch\/blog\/2015\/09\/22\/emmet-write-html-at-lightning-speed\/#article","isPartOf":{"@id":"https:\/\/www.robinglauser.ch\/blog\/2015\/09\/22\/emmet-write-html-at-lightning-speed\/"},"author":{"name":"Robin Glauser","@id":"https:\/\/www.robinglauser.ch\/blog\/#\/schema\/person\/e1a94504a6ff5171fa13670932514b19"},"headline":"Emmet – Write HTML at lightning speed","datePublished":"2015-09-22T20:46:00+00:00","dateModified":"2015-09-22T20:48:19+00:00","mainEntityOfPage":{"@id":"https:\/\/www.robinglauser.ch\/blog\/2015\/09\/22\/emmet-write-html-at-lightning-speed\/"},"wordCount":194,"commentCount":0,"publisher":{"@id":"https:\/\/www.robinglauser.ch\/blog\/#\/schema\/person\/e1a94504a6ff5171fa13670932514b19"},"image":{"@id":"https:\/\/www.robinglauser.ch\/blog\/2015\/09\/22\/emmet-write-html-at-lightning-speed\/#primaryimage"},"thumbnailUrl":"https:\/\/www.robinglauser.ch\/blog\/wp-content\/uploads\/2015\/09\/6HJtLkJSDqjqlE2NipEu_macbook-e1442953379141.jpg","keywords":["emmet","fast","html","phpstorm"],"articleSection":["Development","Fresh"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.robinglauser.ch\/blog\/2015\/09\/22\/emmet-write-html-at-lightning-speed\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.robinglauser.ch\/blog\/2015\/09\/22\/emmet-write-html-at-lightning-speed\/","url":"https:\/\/www.robinglauser.ch\/blog\/2015\/09\/22\/emmet-write-html-at-lightning-speed\/","name":"Emmet - Write HTML at lightning speed - Robin Glauser","isPartOf":{"@id":"https:\/\/www.robinglauser.ch\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.robinglauser.ch\/blog\/2015\/09\/22\/emmet-write-html-at-lightning-speed\/#primaryimage"},"image":{"@id":"https:\/\/www.robinglauser.ch\/blog\/2015\/09\/22\/emmet-write-html-at-lightning-speed\/#primaryimage"},"thumbnailUrl":"https:\/\/www.robinglauser.ch\/blog\/wp-content\/uploads\/2015\/09\/6HJtLkJSDqjqlE2NipEu_macbook-e1442953379141.jpg","datePublished":"2015-09-22T20:46:00+00:00","dateModified":"2015-09-22T20:48:19+00:00","breadcrumb":{"@id":"https:\/\/www.robinglauser.ch\/blog\/2015\/09\/22\/emmet-write-html-at-lightning-speed\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.robinglauser.ch\/blog\/2015\/09\/22\/emmet-write-html-at-lightning-speed\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.robinglauser.ch\/blog\/2015\/09\/22\/emmet-write-html-at-lightning-speed\/#primaryimage","url":"https:\/\/www.robinglauser.ch\/blog\/wp-content\/uploads\/2015\/09\/6HJtLkJSDqjqlE2NipEu_macbook-e1442953379141.jpg","contentUrl":"https:\/\/www.robinglauser.ch\/blog\/wp-content\/uploads\/2015\/09\/6HJtLkJSDqjqlE2NipEu_macbook-e1442953379141.jpg","width":1920,"height":667},{"@type":"BreadcrumbList","@id":"https:\/\/www.robinglauser.ch\/blog\/2015\/09\/22\/emmet-write-html-at-lightning-speed\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.robinglauser.ch\/blog\/"},{"@type":"ListItem","position":2,"name":"Emmet – Write HTML at lightning speed"}]},{"@type":"WebSite","@id":"https:\/\/www.robinglauser.ch\/blog\/#website","url":"https:\/\/www.robinglauser.ch\/blog\/","name":"Robin Glauser","description":"My Blog about Development, Design and my random thoughts.","publisher":{"@id":"https:\/\/www.robinglauser.ch\/blog\/#\/schema\/person\/e1a94504a6ff5171fa13670932514b19"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.robinglauser.ch\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.robinglauser.ch\/blog\/#\/schema\/person\/e1a94504a6ff5171fa13670932514b19","name":"Robin Glauser","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.robinglauser.ch\/blog\/wp-content\/uploads\/2015\/10\/DSC_1244_small.jpg","url":"https:\/\/www.robinglauser.ch\/blog\/wp-content\/uploads\/2015\/10\/DSC_1244_small.jpg","contentUrl":"https:\/\/www.robinglauser.ch\/blog\/wp-content\/uploads\/2015\/10\/DSC_1244_small.jpg","width":800,"height":530,"caption":"Robin Glauser"},"logo":{"@id":"https:\/\/www.robinglauser.ch\/blog\/wp-content\/uploads\/2015\/10\/DSC_1244_small.jpg"},"description":"I'm a web developer.","sameAs":["https:\/\/www.robinglauser.ch","https:\/\/www.instagram.com\/robinglauser\/","https:\/\/x.com\/robinglauser"],"url":"https:\/\/www.robinglauser.ch\/blog\/author\/robin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.robinglauser.ch\/blog\/wp-json\/wp\/v2\/posts\/1339","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.robinglauser.ch\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.robinglauser.ch\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.robinglauser.ch\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.robinglauser.ch\/blog\/wp-json\/wp\/v2\/comments?post=1339"}],"version-history":[{"count":16,"href":"https:\/\/www.robinglauser.ch\/blog\/wp-json\/wp\/v2\/posts\/1339\/revisions"}],"predecessor-version":[{"id":1356,"href":"https:\/\/www.robinglauser.ch\/blog\/wp-json\/wp\/v2\/posts\/1339\/revisions\/1356"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.robinglauser.ch\/blog\/wp-json\/wp\/v2\/media\/1343"}],"wp:attachment":[{"href":"https:\/\/www.robinglauser.ch\/blog\/wp-json\/wp\/v2\/media?parent=1339"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.robinglauser.ch\/blog\/wp-json\/wp\/v2\/categories?post=1339"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.robinglauser.ch\/blog\/wp-json\/wp\/v2\/tags?post=1339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}