God Tier HTML Programming
Tags: html, programming
Published: 2021-07-01 03:20:44

HTML is my favorite language for programming website documents but writing it by hand ✍️ is no fun if you want to go fast there's a tool called [EMMET](https://emmet.io/) that's built into [VS Code](https://code.visualstudio.com/) and is like snippets on steroids 💪  `!Tab` and we've got a basic html page

```html
<!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>
<p>line 10</p>
</body>
</html>
```

`ctrl+g` go to line 10 `:10` type the name of any element followed by a period to add a `class` or a hash to add an `id` like this 👉 `nav.cool#awesome` then hit tab to expand

```html
<!DOCTYPE html>
<html lang="en">
<head>
<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>
<nav class="cool" id="awesome"></nav>
</body>
</html>
```

don't touch the mouse yet hit `ctrl+enter` for a new line this time I want a header plus a sibling article element in that article I want an unordered list that contains a list item, no 5 list items and I want to put some dummy text in each one like this 👉 `header+article>ul>li*5>lorem` 

```html
<!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>
<nav class="cool" id="awesome"></nav>
<header></header>
<article>
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing</li>
    <li>Sed ut perspiciatis unde omnis iste natus error</li>
    <li>Nemo enim ipsam voluptatem quia voluptas sit amet</li>
    <li>Duis aute irure dolor in reprehenderit in voluptate</li>
    <li>Excepteur sint occaecat cupidatat non proident, sunt</li>
  </ul>
</article>
</body>
</html>
```

amazing but oh no I forgot something I'll just use the balance outward command `>` to select the next parent element then use wrap with abbreviation to include the element that I forgot 👏

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/arzxujm7vzdfln33lmqc.png)

```html
<!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>
<nav class="cool" id="awesome"></nav>
<header></header>
<main>👈
  <article>
    <ul>
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing</li>
      <li>Sed ut perspiciatis unde omnis iste natus error</li>
      <li>Nemo enim ipsam voluptatem quia voluptas sit amet</li>
      <li>Duis aute irure dolor in reprehenderit in voluptate</li>
      <li>Excepteur sint occaecat cupidatat non proident, sun</li>
    </ul>
  </article>
</main>
</body>
</html>
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/62gca0gladx8xxio4qx2.gif)