Writing HTML made easier Telerik School Academy HTML, CSS and JavaScript
Emmet Coding Overview Installation and usage Editor support Emmet Coding Features
Overview and Supported editors
Emmet coding is a set of plugins providing high- speed coding and editing of HTML, XML and XSL Started in 2008 by the name Zen coding Its latest version is renamed to Emmet coding Emmet coding is supported in most web development environments: Visual Studio, Subline Text, Brackets, WebStorm/PhpStorm, Eclipse, Komodo Edit, etc… Full list of support can be found at
The cool thing about Emmet
Emmet has a special command for generation a HTML Document Outline: ! then TAB generates HTML 5 document ! <head> Document Document </head><body></body></html> TAB
Emmet is a tool for fast generating HTML Write an HTML tag name and press TAB: ul <ul></ul> div <div></div> TAB Emmet uses CSS-like syntax for #ID and.CLASS nav#main-nav TAB div.widget ul#tags-list.comma-list <ul id="tags-list" class="comma-list"> class="comma-list">
Live Demo
Tags can be nested using the ">" operator Just like in CSS header>h1>a{Telerik School Academy} <header> Telerik School Аcademy Telerik School Аcademy </header> TAB
Tags can be nested using the ">" operator Just like in CSS header>h1>a{Telerik School Academy} <header> Telerik School Аcademy Telerik School Аcademy </header> TAB " { " and " } " mark content (text)
Much like the ">" Emmet the "+" operator marks siblings Just like in CSS #root>header+section+aside#widgets+footer </div> TAB
The "^" operator climbs up the elements #root>header>h1{Telerik Academy} ^section>article ^footer>h2>{The Footer} Telerik Academy Telerik Academy The Footer The Footer </div> TAB
Live Demo
Emmet has a feature to multiply elements i.e. create N divs: ul>li.list-item*5 <ul> </ul> TAB And even easier: ul>.list-item*5 TAB <article> </article><article> </article>article*2>header+div+footer TAB
Live Demo
Grouping allows to group an expression Without taking part of the whole layout Groups are created using brackets '(' and ')' header>(h1>a{Site Header})+(nav>ul>li*3) <header> Site Header Site Header </header> TAB
Live Demo
Emmet can number the values, IDs and classes Using the '$' symbol select>.city$$[value=$]*5 </select> TAB
Live Demo
HTML attributes are set inside square brackets '[' and ']' a[href="#"] img[src="ninja.png"] input[type='radio' name='numbers[]' value='$']*3 TAB TAB TAB
Live Demo
форум програмиране, форум уеб дизайн курсове и уроци по програмиране, уеб дизайн – безплатно програмиране за деца – безплатни курсове и уроци безплатен SEO курс - оптимизация за търсачки уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop уроци по програмиране и уеб дизайн за ученици ASP.NET MVC курс – HTML, SQL, C#,.NET, ASP.NET MVC безплатен курс "Разработка на софтуер в cloud среда" BG Coder - онлайн състезателна система - online judge курсове и уроци по програмиране, книги – безплатно от Наков безплатен курс "Качествен програмен код" алго академия – състезателно програмиране, състезания ASP.NET курс - уеб програмиране, бази данни, C#,.NET, ASP.NET курсове и уроци по програмиране – Телерик академия курс мобилни приложения с iPhone, Android, WP7, PhoneGap free C# book, безплатна книга C#, книга Java, книга C# Николай Костов - блог за програмиране
1. Create Emmet expression to generate the HTML from the homework-1.html file 2. Create Emmet expression to generate the HTML from the homework-2.html file 3. Create Emmet expression to generate the HTML from the homework-3.html file 4. Create Emmet expression to generate the HTML from the homework-4.html file 5. Create Emmet expression to generate the HTML from the homework-5.html file