HTML Tags and EMMET

Templates and shortcuts to more HTML

HTML means HyperText Markup Language.

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:

EMMET HTML syntax

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

h1#id.class_parent>p.child*2+p.sibling^h1.same_parent
    
<h1 id="id" class="class_parent">
    <p class="child"></p>
    <p class="child"></p>
    <p class="sibling"></p>
</h1>
<h1 class="same_parent"></h1>

We can () group and {} for text:

(h1.parent>p.child{4 words lorem})+p.sibling>lorem4

<h1 class="parent">
    <p class="child">4 words lorem</p>
</h1>
<p class="sibling">Lorem ipsum dolor sit.</p>

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

>

<h2 style="color: red">
    <div>Lorem ipsum dolor sit amet consectetur adi ...</div>
    <div>Recusandae consectetur aperiam laudantium, ...</div>
</h2>

We can use form and input for text/submit/email:

form.form-inline>input:t[placeholder="sample text"]+input:s.btn[value="button"]

<form action="" class="form-inline">
    <input type="text" name="" id="" placeholder="sample text">
    <input type="submit" value="free market" class="btn">
</form>

On head we can create a link to url pages:

<link rel="stylesheet" href="./style.css">

Special HTML tags

<hr> for the X axis black line
<br> (break)
<b>This is how you blod text </b>
<mark>we can have the yellow marker </mark>
<u>underline text </u>
<em>Fancy text </em>

//we can have a line trought text
<del> Line trougth text </del> 

//and a hover to text-etiquette for others
<abbr title="smaller texto"> hover to read the smaller </abbr>

HTML Head and meta

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

<head>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <link rel="stylesheet" href="./style.css">

   <title>Title of the page</title>
</head>

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

for numbers, we can use 1_000_000

For special syntax HTML check this website:

//here some for example

<p>&#60 </p>        // <
<p>&#62 </p>        // >
<p>&#9824 </p>      // ♠

PreviousGit and Github NextCSS 1: Animation, gradients and buttons effects

Last updated 2 years ago

Was this helpful?