rsgranne · August 29, 2023 18:56
diff --git a/VSCode HTML Snippets b/VSCode HTML Snippets
 {
  /*
  // Place your snippets for HTML here. Each snippet is defined under a snippet name and has a prefix, body and 
  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // ${1}, ${2} for tab stops, ${0} for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
  // same ids are connected.
  // Example:
  "Print to console": {
    "prefix": "log",
    "body": [
      "console.log('${1}');",
      "${2}"
    ],
    "description": "Log output to console"
  }
  // Version 1.5 2022-07-06
  */
  "Anchor": {
    "prefix": "a",
    "body": [
      "<a href=\"${1}\">${0}</a>"
    ],
    "description": "<a>: Anchor (link)"
  },
  "Address": {
    "prefix": "address",
    "body": [
      "<address>",
      "\t${0}",
      "</address>"
    ],
    "description": [
      "<address>: Author contact",
      "info, indented"
    ]
  },
  "Article": {
    "prefix": "article",
    "body": [
      "<article>",
      "\t${0}",
      "</article>"
    ],
    "description": "<article>, indented"
  },
  "Aside": {
    "prefix": "aside",
    "body": [
      "<aside>",
      "\t${0}",
      "</aside>"
    ],
    "description": "<aside>, indented"
  },
  "Blockquote": {
    "prefix": "blockquote",
    "body": [
      "<blockquote>",
      "\t${0}",
      "</blockquote>"
    ],
    "description": "<aside>, indented"
  },
  "Bold": {
    "prefix": "b",
    "body": [
      "<b>${1}</b>${0}"
    ],
    "description": "<b>: Stylistically bold"
  },
  "Description List": {
    "prefix": "dl",
    "body": [
      "<dl>",
      "\t${0}",
      "</dl>"
    ],
    "description": [
      "<dl>: Description list,",
      "indented"
    ]
  },
  "Description Data": {
    "prefix": "dd",
    "body": [
      "<dd>${0}</dd>"
    ],
    "description": "<dd>: Description list data"
  },
  "Description Term": {
    "prefix": "dt",
    "body": [
      "<dt>${0}</dt>"
    ],
    "description": "<dt>: Description list term"
  },
  "Division": {
    "prefix": "div",
    "body": [
      "<div>",
      "\t${0}",
      "</div>"
    ],
    "description": "<div>, indented"
  },
  "Emphasis": {
    "prefix": "em",
    "body": [
      "<em>${0}</em>"
    ],
    "description": "<em>: Emphasis"
  },
  "Figure": {
    "prefix": "figure",
    "body": [
      "<figure>",
      "\t${0}",
      "</figure>"
    ],
    "description": "<figure>, indented"
  },
  "Figure Caption": {
    "prefix": "figcaption",
    "body": [
      "<figcaption>",
      "\t${0}",
      "</figcaption>"
    ],
    "description": [
      "figcaption>: Figure caption,",
      "indented"
    ]
  },
  "Footer": {
    "prefix": "footer",
    "body": [
      "<footer>",
      "\t${0}",
      "</footer>"
    ],
    "description": "<footer>, indented"
  },
  "Head": {
    "prefix": "head",
    "body": [
      "<head>",
      "\t${0}",
      "</head>"
    ],
    "description": "<head>, indented"
  },
  "Header": {
    "prefix": "header",
    "body": [
      "<header>",
      "\t${0}",
      "</header>"
    ],
    "description": "<header>, indented"
  },
  "HTML": {
    "prefix": "html",
    "body": [
      "<html>",
      "\t${0}",
      "</html>"
    ],
    "description": "<html>, indented"
  },
  "Image": {
    "prefix": "img",
    "body": [
      "<img src=\"${0}\" alt=\"\" width=\"\" height=\"\" srcset=\"\">"
    ],
    "description": "<img>: Image"
  },
  "Italic": {
    "prefix": "i",
    "body": [
      "<i>${0}</i>"
    ],
    "description": "<i>: Stylistically italic"
  },
  "Link": {
    "prefix": "link",
    "body": [
      "<link rel=\"stylesheet\" href=\"${0}\">"
    ],
    "description": "<link>, indented"
  },
  "List Item": {
    "prefix": "li",
    "body": [
      "<li>${0}</li>"
    ],
    "description": "<li>: List Item"
  },
  "Main": {
    "prefix": "main",
    "body": [
      "<main>",
      "\t${0}",
      "</main>"
    ],
    "description": [
      "<main>: Main area,",
      "indented"
    ]
  },
  "Meta UTF-8": {
    "prefix": "meta",
    "body": [
      "<meta charset=\"UTF-8\">${0}"
    ],
    "description": "<meta>: UTF-8"
  },
  "Navigation": {
    "prefix": "nav",
    "body": [
      "<nav>",
      "\t${0}",
      "</nav>"
    ],
    "description": "<nav>: Navigation, indented"
  },
  "Option": {
    "prefix": "option",
    "body": [
      "<option>${1}</option>${0}"
    ],
    "description": "<option>: No value attribute"
  },
  "Ordered List": {
    "prefix": "ol",
    "body": [
      "<ol>",
      "\t${0}",
      "</ol>"
    ],
    "description": [
      "<ol>: Ordered list",
      "indented"
    ]
  },
  "Ordered List with List Items": {
    "prefix": "ol+",
    "body": [
      "<ol>",
      "\t<li>${1}</li>",
      "\t<li>${2}</li>",
      "\t<li>${3}</li>${0}",
      "</ol>"
    ],
    "description": [
      "<ol><li>: Ordered list & 3 list",
      "items, indented"
    ]
  },
  "Paragraph": {
    "prefix": "p",
    "body": [
      "<p>",
      "\t${0}",
      "</p>"
    ],
    "description": "<p>: Paragraph, indented"
  },
  "Script": {
    "prefix": "script",
    "body": [
      "<script src=\"${0}\"></script>"
    ],
    "description": "<script src>"
  },
  "Section": {
    "prefix": "section",
    "body": [
      "<section>",
      "\t${0}",
      "</section>"
    ],
    "description": "<section>, indented"
  },
  "Strong": {
    "prefix": "strong",
    "body": [
      "<strong>${0}</strong>"
    ],
    "description": "<strong>: Strong emphasis"
  },
  "Style": {
    "prefix": "style",
    "body": [
      "<style>",
      "\t${0}",
      "</style>"
    ],
    "description": "<style>, indented"
  },
  "Table": {
    "prefix": "table",
    "body": [
      "<table>",
      "\t${0}",
      "</table>"
    ],
    "description": "<table>, indented"
  },
  "Table Caption": {
    "prefix": "caption",
    "body": [
      "<caption>",
      "\t${0}",
      "</caption>"
    ],
    "description": [
      "<caption>: Table caption,",
      "indented"
    ]
  },
  "Table Data Cell": {
    "prefix": "td",
    "body": [
      "<td>${0}</td>"
    ],
    "description": "<td>: Table data cell"
  },
  "Table Header Cell": {
    "prefix": "th",
    "body": [
      "<th>${0}</th>"
    ],
    "description": "<th>: Table header cell"
  },
  "Table Row": {
    "prefix": "tr",
    "body": [
      "<tr>",
      "\t${0}",
      "</tr>"
    ],
    "description": "<tr>: Table row, indented"
  },
  "Table Row & Data Cell": {
    "prefix": "trd",
    "body": [
      "<tr>",
      "\t<td>${0}</td>",
      "</tr>"
    ],
    "description": [
      "<tr><td>: Table row",
      "& data cell"
    ]
  },
  "Table Row & Header Cell": {
    "prefix": "trh",
    "body": [
      "<tr>",
      "\t<th>${0}</th>",
      "</tr>"
    ],
    "description": [
      "<tr><th>: Table row",
      "& header cell"
    ]
  },
  "Unordered List": {
    "prefix": "ul",
    "body": [
      "<ul>",
      "\t${0}",
      "</ul>"
    ],
    "description": [
      "<ul>: Unordered list,",
      "indented"
    ]
  },
  "Unordered List with List Items": {
    "prefix": "ul+",
    "body": [
      "<ul>",
      "\t<li>${1}</li>",
      "\t<li>${2}</li>",
      "\t<li>${0}</li>",
      "</ul>"
    ],
    "description": [
      "<ul><li>: Unordered list & 3 list",
      "items, indented"
    ]
  },
  "Video": {
    "prefix": "video",
    "body": [
      "<video src=\"\" poster=\"\" width=\"\" height=\"\" controls></video>"
    ],
    "description": [
      "<video>: Video player,",
      "1 video source"
    ]
  },
  "Video with 2+ sources": {
    "prefix": "video+",
    "body": [
      "<video poster=\"\" width=\"\" height=\"\" controls>",
      "\t<source src=\"${1}\" type=\"video/webm\">",
      "\t<source src=\"${2}\" type=\"video/mp4\">",
      "</video>"
    ],
    "description": [
      "<video>: Video player,",
      "2+ video sources, indented"
    ]
  }
 }
	{
	/*
	// Place your snippets for HTML here. Each snippet is defined under a snippet name and has a prefix, body and
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// ${1}, ${2} for tab stops, ${0} for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
	// same ids are connected.
	// Example:
	"Print to console": {
	"prefix": "log",
	"body": [
	"console.log('${1}');",
	"${2}"
	],
	"description": "Log output to console"
	}
	// Version 1.5 2022-07-06
	*/
	"Anchor": {
	"prefix": "a",
	"body": [
	"<a href=\"${1}\">${0}</a>"
	],
	"description": "<a>: Anchor (link)"
	},
	"Address": {
	"prefix": "address",
	"body": [
	"<address>",
	"\t${0}",
	"</address>"
	],
	"description": [
	"<address>: Author contact",
	"info, indented"
	]
	},
	"Article": {
	"prefix": "article",
	"body": [
	"<article>",
	"\t${0}",
	"</article>"
	],
	"description": "<article>, indented"
	},
	"Aside": {
	"prefix": "aside",
	"body": [
	"<aside>",
	"\t${0}",
	"</aside>"
	],
	"description": "<aside>, indented"
	},
	"Blockquote": {
	"prefix": "blockquote",
	"body": [
	"<blockquote>",
	"\t${0}",
	"</blockquote>"
	],
	"description": "<aside>, indented"
	},
	"Bold": {
	"prefix": "b",
	"body": [
	"<b>${1}</b>${0}"
	],
	"description": "<b>: Stylistically bold"
	},
	"Description List": {
	"prefix": "dl",
	"body": [
	"<dl>",
	"\t${0}",
	"</dl>"
	],
	"description": [
	"<dl>: Description list,",
	"indented"
	]
	},
	"Description Data": {
	"prefix": "dd",
	"body": [
	"<dd>${0}</dd>"
	],
	"description": "<dd>: Description list data"
	},
	"Description Term": {
	"prefix": "dt",
	"body": [
	"<dt>${0}</dt>"
	],
	"description": "<dt>: Description list term"
	},
	"Division": {
	"prefix": "div",
	"body": [
	"<div>",
	"\t${0}",
	"</div>"
	],
	"description": "<div>, indented"
	},
	"Emphasis": {
	"prefix": "em",
	"body": [
	"<em>${0}</em>"
	],
	"description": "<em>: Emphasis"
	},
	"Figure": {
	"prefix": "figure",
	"body": [
	"<figure>",
	"\t${0}",
	"</figure>"
	],
	"description": "<figure>, indented"
	},
	"Figure Caption": {
	"prefix": "figcaption",
	"body": [
	"<figcaption>",
	"\t${0}",
	"</figcaption>"
	],
	"description": [
	"figcaption>: Figure caption,",
	"indented"
	]
	},
	"Footer": {
	"prefix": "footer",
	"body": [
	"<footer>",
	"\t${0}",
	"</footer>"
	],
	"description": "<footer>, indented"
	},
	"Head": {
	"prefix": "head",
	"body": [
	"<head>",
	"\t${0}",
	"</head>"
	],
	"description": "<head>, indented"
	},
	"Header": {
	"prefix": "header",
	"body": [
	"<header>",
	"\t${0}",
	"</header>"
	],
	"description": "<header>, indented"
	},
	"HTML": {
	"prefix": "html",
	"body": [
	"<html>",
	"\t${0}",
	"</html>"
	],
	"description": "<html>, indented"
	},
	"Image": {
	"prefix": "img",
	"body": [
	"<img src=\"${0}\" alt=\"\" width=\"\" height=\"\" srcset=\"\">"
	],
	"description": "<img>: Image"
	},
	"Italic": {
	"prefix": "i",
	"body": [
	"<i>${0}</i>"
	],
	"description": "<i>: Stylistically italic"
	},
	"Link": {
	"prefix": "link",
	"body": [
	"<link rel=\"stylesheet\" href=\"${0}\">"
	],
	"description": "<link>, indented"
	},
	"List Item": {
	"prefix": "li",
	"body": [
	"<li>${0}</li>"
	],
	"description": "<li>: List Item"
	},
	"Main": {
	"prefix": "main",
	"body": [
	"<main>",
	"\t${0}",
	"</main>"
	],
	"description": [
	"<main>: Main area,",
	"indented"
	]
	},
	"Meta UTF-8": {
	"prefix": "meta",
	"body": [
	"<meta charset=\"UTF-8\">${0}"
	],
	"description": "<meta>: UTF-8"
	},
	"Navigation": {
	"prefix": "nav",
	"body": [
	"<nav>",
	"\t${0}",
	"</nav>"
	],
	"description": "<nav>: Navigation, indented"
	},
	"Option": {
	"prefix": "option",
	"body": [
	"<option>${1}</option>${0}"
	],
	"description": "<option>: No value attribute"
	},
	"Ordered List": {
	"prefix": "ol",
	"body": [
	"<ol>",
	"\t${0}",
	"</ol>"
	],
	"description": [
	"<ol>: Ordered list",
	"indented"
	]
	},
	"Ordered List with List Items": {
	"prefix": "ol+",
	"body": [
	"<ol>",
	"\t<li>${1}</li>",
	"\t<li>${2}</li>",
	"\t<li>${3}</li>${0}",
	"</ol>"
	],
	"description": [
	"<ol><li>: Ordered list & 3 list",
	"items, indented"
	]
	},
	"Paragraph": {
	"prefix": "p",
	"body": [
	"<p>",
	"\t${0}",
	"</p>"
	],
	"description": "<p>: Paragraph, indented"
	},
	"Script": {
	"prefix": "script",
	"body": [
	"<script src=\"${0}\"></script>"
	],
	"description": "<script src>"
	},
	"Section": {
	"prefix": "section",
	"body": [
	"<section>",
	"\t${0}",
	"</section>"
	],
	"description": "<section>, indented"
	},
	"Strong": {
	"prefix": "strong",
	"body": [
	"<strong>${0}</strong>"
	],
	"description": "<strong>: Strong emphasis"
	},
	"Style": {
	"prefix": "style",
	"body": [
	"<style>",
	"\t${0}",
	"</style>"
	],
	"description": "<style>, indented"
	},
	"Table": {
	"prefix": "table",
	"body": [
	"<table>",
	"\t${0}",
	"</table>"
	],
	"description": "<table>, indented"
	},
	"Table Caption": {
	"prefix": "caption",
	"body": [
	"<caption>",
	"\t${0}",
	"</caption>"
	],
	"description": [
	"<caption>: Table caption,",
	"indented"
	]
	},
	"Table Data Cell": {
	"prefix": "td",
	"body": [
	"<td>${0}</td>"
	],
	"description": "<td>: Table data cell"
	},
	"Table Header Cell": {
	"prefix": "th",
	"body": [
	"<th>${0}</th>"
	],
	"description": "<th>: Table header cell"
	},
	"Table Row": {
	"prefix": "tr",
	"body": [
	"<tr>",
	"\t${0}",
	"</tr>"
	],
	"description": "<tr>: Table row, indented"
	},
	"Table Row & Data Cell": {
	"prefix": "trd",
	"body": [
	"<tr>",
	"\t<td>${0}</td>",
	"</tr>"
	],
	"description": [
	"<tr><td>: Table row",
	"& data cell"
	]
	},
	"Table Row & Header Cell": {
	"prefix": "trh",
	"body": [
	"<tr>",
	"\t<th>${0}</th>",
	"</tr>"
	],
	"description": [
	"<tr><th>: Table row",
	"& header cell"
	]
	},
	"Unordered List": {
	"prefix": "ul",
	"body": [
	"<ul>",
	"\t${0}",
	"</ul>"
	],
	"description": [
	"<ul>: Unordered list,",
	"indented"
	]
	},
	"Unordered List with List Items": {
	"prefix": "ul+",
	"body": [
	"<ul>",
	"\t<li>${1}</li>",
	"\t<li>${2}</li>",
	"\t<li>${0}</li>",
	"</ul>"
	],
	"description": [
	"<ul><li>: Unordered list & 3 list",
	"items, indented"
	]
	},
	"Video": {
	"prefix": "video",
	"body": [
	"<video src=\"\" poster=\"\" width=\"\" height=\"\" controls></video>"
	],
	"description": [
	"<video>: Video player,",
	"1 video source"
	]
	},
	"Video with 2+ sources": {
	"prefix": "video+",
	"body": [
	"<video poster=\"\" width=\"\" height=\"\" controls>",
	"\t<source src=\"${1}\" type=\"video/webm\">",
	"\t<source src=\"${2}\" type=\"video/mp4\">",
	"</video>"
	],
	"description": [
	"<video>: Video player,",
	"2+ video sources, indented"
	]
	}
	}