search

HTML Tags and EMMET

Templates and shortcuts to more HTML

HTML means HyperText Markup Language.

hashtag
EMMET shortcuts

Use crtl+shift+p or F1 to check if you have EMMET installed.

We can start an HTML page with ! + tab:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

</body>
</html>

To set up EMMET on your File>Preferences>Settings:

To enable the Tab on shortcut

hashtag
EMMET HTML syntax

We use > for nesting and ^ to climb up + for parenting, . and # for class and id:

We can () group and {} for text:

We can multiply the lorem sample and [] to add attrbutes

hashtag
Special HTML tags

Example of HTML

hashtag
HTML Head and meta

The Head tag is for a link, meta, and title for internal and external files:

To format code use crtl+k then crtl+f.

for numbers, we can use 1_000_000

For special syntax HTML check this website:arrow-up-right

PreviousGit and GithubNextCSS 1: Animation, gradients and buttons effects

Last updated