Hoe HTML-code sneller te schrijven

Sep 11, 2025

Procedures

(Beeldkrediet: toekomst)

Moderne websites vereisen veel HTML-code. Complexe lay-outs met meerdere verschillende meningen en staten kunnen moeilijk zijn om te maken met slechts een eenvoudige teksteditor. Gelukkig zijn er een groot aantal HTML-generatie-tools die er met werken. Hier bekijken we een snelle twee van de meer populaire tools, Emmet en Pug.

U moet echter nog steeds uw HTML weten om beide krachtige tijdbesparende hulpmiddelen te gebruiken. Dus, voordat je duikt, zorg er dan voor dat je de populaire semantische gebruikt HTML-tags de goede weg. Zie ook onze gids voor het gebruik van een Html boilerplaat

Wilt u de code opgeroepen? Probeer deze Website-bouwers Of voor extra hulp langs de weg, kies een web hosting Service met technische ondersteuning.

Genereer HTML on the Fly

Bij het schrijven van grote hoeveelheden HTML in één keer, kan het schrijven van elke tag met de hand erg vervelend worden, zeer snel. Bijvoorbeeld, bij het schrijven van een lijst met links, moeten we ervoor zorgen dat de & LT; UL & GT; & LT; LI & GT; en & LT; A & GT; Tags allemaal open en sluiten op de juiste plaats. Anders werken de links mogelijk niet en wordt de hele pagina-indeling volledig haywire.

Hoe Emmet te gebruiken

Om ervoor te zorgen dat u de kans dat dit gebeurt, kunt u de talenten van gebruiken Emmet Dit is een hulpmiddel dat u veel typen bespaart en uw HTML & AMP zeer verbetert; CSS-workflow. Met EMM kunt u elementen maken door een CSS-achtige selector te typen. Het zal dan dat element parseren en uitbreiden in regulier HTML. Hieronder staat het originele element dat is gemaakt in EMMM.

nav>ul>li*3>a.chapter{Chapter $ of 3}

Emmet zal dit element detecteren, het ontleden en vervolgens het element transformeren in standaard HTML zoals hieronder wordt getoond. Een snelle blik op het EMMM-element suggereert dat & LT; LI & GT; wordt vermenigvuldigd met ( * 3 ) en elk & LT; LI & GT; instantie wordt hoofdstuk gevolgd gevolgd door het juiste nummer (maximaal 3).

Merk op hoeveel tekens het EMMM-element bevat en hoeveel de standaard HTML bevat. Zelfs dit kleine fragment van de code laat zien hoeveel tijd kan worden opgeslagen door de EMMM-steno te gebruiken.

 & LT; NAV & GT;
  & LT; UL & GT;
    & LT; LI & GT; & LT; A HREF = "" Class = "Hoofdstuk" & GT; Hoofdstuk 1
 van 3 & LT; / A & GT; & LT; / LI & GT;
    & LT; LI & GT; & LT; A HREF = "" Class = "Hoofdstuk" & GT; Hoofdstuk 2
 van 3 & LT; / A & GT; & LT; / LI & GT;
    & LT; LI & GT; & LT; A HREF = "" Class = "Hoofdstuk" & GT; Hoofdstuk 3
 van 3 & LT; / A & GT; & LT; / LI & GT;
  & LT; / UL & GT;
& LT; / NAV & GT;

EMM is ook bewust van context. Bijvoorbeeld, als we een bewerken & LT; TABEL & GT; Het is waarschijnlijk dat we wat willen & lt; tr & gt; (deze zijn rijen) elementen om het te vullen. Alles wat we moeten doen is specificeren hoeveel we nodig hebben.

Dit is slechts een kort voorbeeld van wat Emmet kan doen, maar er zijn veel meer configuratie-opties beschikbaar. Deze omvatten CSS-bewerking, BEM (BLOK-elementmodifier) Klassecreatie en er is zelfs een Lorem-ipsum-generator.

Het is ook vermeldenswaard dat de meeste CODE-editors Emmet hebben ingebracht of ondersteunen via plug-ins. Je kunt hier meer over weten op de EMMM-documentatie bladzijde.

Gebruik PUG voor dynamische inhoud

Hoewel Emmet ideaal is voor statische inhoud, wat gebeurt er als inhoud meer dynamischer moet zijn? We moeten bijvoorbeeld mogelijk gepersonaliseerde homepages, complexe ordertafels of herhalen van gemeenschappelijke blokken van HTML genereren. Dit is allemaal mogelijk in JavaScript, maar door deze inhoud te pre-weergeven kunnen we een extra snelheidsboost krijgen zonder te vertrouwen op de browser van de gebruiker. Vergeet niet of je een media-zware pagina hebt, je wilt het back-up maken met betrouwbaar cloud opslag

Stap voorwaarts pug. Dit is een sjablonen voor HTML. U kunt pagina's in het ".pug" -formaat en PUG-melding schrijven zal dat bestand lezen, wat dynamische gegevens injecteren en Standaard HTML retourneren. Het onderstaande voorbeeld is hoe u de code in PUG zou schrijven om dezelfde HTML als het EMMM-voorbeeld (hierboven) te maken.


  elke val in [1, 2, 3]
    li
      A (HREF = "", Class = "Hoofdstuk") Hoofdstuk
# {val} van 3

Een PUG-bestand maakt gebruik van inkeping alleen om aan te geven dat het nestelen.Het kan over waarden herhalen om grote hoeveelheden HTML in één pas te genereren.Deze ".pug" -bestanden zijn ontworpen om vele malen in een project opnieuw te worden gebruikt.

PUG is beschikbaar om te installeren van Package Manager npm Maar als u meer informatie wilt over hoe u begint met PUG, betaal een bezoek aan de website

Deze inhoud verscheen oorspronkelijk in Web Designer Magazine.

Lees verder:

10 beste CSS-frameworks
CSS-animatie Voorbeelden om te recreëren
8 HTML-tags die u moet gebruiken (en 5 om te voorkomen)

Hoe HTML-code sneller te schrijven

Genereer HTML on the Fly

Hoe Emmet te gebruiken

Gebruik PUG voor dynamische inhoud

Procedures - Meest populaire artikelen

Hoe een nek en schouders te tekenen

Gebruik Framer X om interactieve prototypes

Bouw mobiele apps met mobiele apparaten met Google's Flutter

Adobe Capture CC gebruiken

Verf een sci-fi game-instelling in Photoshop

Hoe Creature Anatomy mastert

Krijg de grip met de nat-in-natte schildertechniek

Een snapchat geofilter in Photoshop maken

Categorieën