{"id":29630228,"url":"https://github.com/hackthacker/html-shorth-notations-efficient-coding","last_synced_at":"2026-02-05T07:31:23.144Z","repository":{"id":237943173,"uuid":"795543131","full_name":"hackThacker/HTML-Shorth-Notations-Efficient-Coding","owner":"hackThacker","description":"A collection of shorthand notations for generating repetitive HTML elements with sequentially numbered identifiers. These shorthand notations are designed to speed up the coding process and improve productivity. Includes examples for commonly used patterns such as divs, lists, tables, forms, headers, footers, and more.","archived":false,"fork":false,"pushed_at":"2024-05-03T15:30:13.000Z","size":150,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-21T10:52:41.379Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hackThacker.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-05-03T14:03:17.000Z","updated_at":"2024-05-04T05:14:24.000Z","dependencies_parsed_at":null,"dependency_job_id":"b352bd5d-8013-4d4c-81d8-596899e54da1","html_url":"https://github.com/hackThacker/HTML-Shorth-Notations-Efficient-Coding","commit_stats":null,"previous_names":["hackthacker/html-shorth-notations-efficient-coding"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/hackThacker/HTML-Shorth-Notations-Efficient-Coding","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hackThacker%2FHTML-Shorth-Notations-Efficient-Coding","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hackThacker%2FHTML-Shorth-Notations-Efficient-Coding/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hackThacker%2FHTML-Shorth-Notations-Efficient-Coding/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hackThacker%2FHTML-Shorth-Notations-Efficient-Coding/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hackThacker","download_url":"https://codeload.github.com/hackThacker/HTML-Shorth-Notations-Efficient-Coding/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hackThacker%2FHTML-Shorth-Notations-Efficient-Coding/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29115524,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-05T05:31:32.482Z","status":"ssl_error","status_checked_at":"2026-02-05T05:31:29.075Z","response_time":65,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-07-21T10:37:23.145Z","updated_at":"2026-02-05T07:31:23.139Z","avatar_url":"https://github.com/hackThacker.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# HTML-Shorth-Notations-Efficient-Coding\n\nTo download the PDF cheatsheet, click [here](https://github.com/hackThacker/HTML-Shorth-Notations-Efficient-Coding/blob/main/cheatsheet.pdf).\n\n\n1. ```markdown\n   div.box$*4\u003espan.item$*3\n   ```\n   **Generates four `\u003cdiv\u003e` elements with class names `.box1` through `.box4`, each containing three `\u003cspan\u003e` elements with class names `.item1` through `.item3`.**\n\n2. ```markdown\n   ul.list$*3\u003eli.item$*5\n   ```\n   **Creates three unordered lists (`\u003cul\u003e`) with class names `.list1` through `.list3`, each containing five list items (`\u003cli\u003e`) with class names `.item1` through `.item5`.**\n\n3. ```markdown\n   table.table$*2\u003etr.row$*3\u003etd.cell$*4\n   ```\n   **Produces two tables (`\u003ctable\u003e`) with class names `.table1` and `.table2`, each having three rows (`\u003ctr\u003e`) with class names `.row1` through `.row3`, and each row containing four cells (`\u003ctd\u003e`) with class names `.cell1` through `.cell4`.**\n\n4. ```markdown\n   section.section$*4\u003eh2.title+div.content$*2\n   ```\n   **Creates four sections (`\u003csection\u003e`) with class names `.section1` through `.section4`, each containing an `\u003ch2\u003e` element with class name `.title` and two `\u003cdiv\u003e` elements with class names `.content1` and `.content2`.**\n\n5. ```markdown\n   nav.navbar$*2\u003eul.menu$*2\u003eli.item$*3\u003ea\n   ```\n   **Generates two navigation bars (`\u003cnav\u003e`) with class names `.navbar1` and `.navbar2`, each containing two unordered lists (`\u003cul\u003e`) with class names `.menu1` and `.menu2`, and each list containing three list items (`\u003cli\u003e`) with class names `.item1` through `.item3`, each containing an anchor (`\u003ca\u003e`) element.**\n\n6. ```markdown\n   footer.footer$*3\u003ep.text$*2\n   ```\n   **Creates three footers (`\u003cfooter\u003e`) with class names `.footer1` through `.footer3`, each containing two paragraphs (`\u003cp\u003e`) with class names `.text1` and `.text2`.**\n\n7. ```markdown\n   div.row$*3\u003ediv.col$*4\n   ```\n   **Generates three rows (`\u003cdiv\u003e` with class names `.row1` through `.row3`), each containing four columns (`\u003cdiv\u003e` with class names `.col1` through `.col4`).**\n\n8. ```markdown\n   section.block$*3\u003ediv.inner$*2\n   ```\n   **Produces three sections (`\u003csection\u003e`) with class names `.block1` through `.block3`, each containing two `\u003cdiv\u003e` elements with class names `.inner1` and `.inner2`.**\n\n9. ```markdown\n   article.article$*2\u003eh1.title+div.content\n   ```\n   **Creates two articles (`\u003carticle\u003e`) with class names `.article1` and `.article2`, each containing an `\u003ch1\u003e` element with class name `.title` and a `\u003cdiv\u003e` element with class name `.content`.**\n\n10. ```markdown\n    div.container$*3\u003ediv.row$*4\u003ediv.col$*3\n    ```\n    **Generates three containers (`\u003cdiv\u003e` with class names `.container1` through `.container3`), each containing four rows (`\u003cdiv\u003e` with class names `.row1` through `.row4`), and each row containing three columns (`\u003cdiv\u003e` with class names `.col1` through `.col3`).**\n\n11. ```markdown\n    div.grid$*3\u003ediv.cell$*9\n    ```\n    **Creates three grids (`\u003cdiv\u003e` with class names `.grid1` through `.grid3`), each containing nine cells (`\u003cdiv\u003e` with class names `.cell1` through `.cell9`).**\n\n12. ```markdown\n    ul.tabs$*3\u003eli.tab$*4\u003ea\n    ```\n    **Generates three sets of tabs (`\u003cul\u003e` with class names `.tabs1` through `.tabs3`), each containing four tab items (`\u003cli\u003e` with class names `.tab1` through `.tab4`), each containing an anchor (`\u003ca\u003e`) element.**\n\n13. ```markdown\n    div.carousel$*2\u003ediv.slide$*5\n    ```\n    **Creates two carousels (`\u003cdiv\u003e` with class names `.carousel1` and `.carousel2`), each containing five slides (`\u003cdiv\u003e` with class names `.slide1` through `.slide5`).**\n\n14. ```markdown\n    nav.navbar\u003eul.navbar-nav\u003eli.nav-item$*5\u003ea.nav-link\n    ```\n    **Generates a navigation bar (`\u003cnav\u003e` with class name `.navbar`), containing an unordered list (`\u003cul\u003e` with class name `.navbar-nav`), with five list items (`\u003cli\u003e` with class names `.nav-item1` through `.nav-item5`), each containing an anchor (`\u003ca\u003e`) element with class name `.nav-link`.**\n\n15. ```markdown\n    div.timeline$*2\u003ediv.event$*4\n    ```\n    **Produces two timelines (`\u003cdiv\u003e` with class names `.timeline1` and `.timeline2`), each containing four events (`\u003cdiv\u003e` with class names `.event1` through `.event4`).**\n\n16. ```markdown\n    ul.menu$*2\u003eli.item$*5\u003ea\n    ```\n    **Creates two menus (`\u003cul\u003e` with class names `.menu1` and `.menu2`), each containing five list items (`\u003cli\u003e` with class names `.item1` through `.item5`), each containing an anchor (`\u003ca\u003e`) element.**\n\n17. ```markdown\n    div.gallery$*3\u003eimg.photo$*6\n    ```\n    **Generates three galleries (`\u003cdiv\u003e` with class names `.gallery1` through `.gallery3`), each containing six photos (`\u003cimg\u003e` with class names `.photo1` through `.photo6`).**\n\n18. ```markdown\n    div.banner$*2\u003eimg.banner-image+p.banner-text\n    ```\n    **Creates two banners (`\u003cdiv\u003e` with class names `.banner1` and `.banner2`), each containing an image (`\u003cimg\u003e` with class name `.banner-image`) and a paragraph (`\u003cp\u003e` with class name `.banner-text`).**\n\n19. ```markdown\n    div.hero$*3\u003eh1.title+div.content\n    ```\n    **Produces three hero sections (`\u003cdiv\u003e` with class names `.hero1` through `.hero3`), each containing an `\u003ch1\u003e` element with class name `.title` and a `\u003cdiv\u003e` element with class name `.content`.**\n\n20. ```markdown\n    div.feature$*4\u003eh2.title+p.description\n    ```\n    **Generates four feature sections (`\u003cdiv\u003e` with class names `.feature1` through `.feature4`), each containing an `\u003ch2\u003e` element with class name `.title` and a `\u003cp\u003e` element with class name `.description`.**\n\n21. ```markdown\n    div.promo$*2\u003eh3.title+img.promo-image\n    ```\n    **Creates two promo sections (`\u003cdiv\u003e` with class names `.promo1` and `.promo2`), each containing an `\u003ch3\u003e` element with class name `.title` and an image (`\u003cimg\u003e` with class name `.promo-image`).**\n\n22. ```markdown\n    div.testimonial$*3\u003ep.quote+span.author\n    ```\n    **Produces three testimonials (`\u003cdiv\u003e` with class names `.testimonial1` through `.testimonial3`), each containing a paragraph (`\u003cp\u003e` with class name `.quote`) and a `\u003cspan\u003e` element with class name `.author`.**\n\n23. ```markdown\n    div.feature-box$*4\u003eh4.title+p.description\n    ```\n    **Generates four feature boxes (`\u003cdiv\u003e` with class names `.feature-box1` through `.feature-box4`), each containing an `\u003ch4\u003e` element with class name `.title` and a `\u003cp\u003e` element with class name `.description`.**\n\n24. ```markdown\n    div.panel$*3\u003eh2.title+div.body\n    ```\n    **Creates three panels (`\u003cdiv\u003e` with class names `.panel1` through `.panel3`), each containing an `\u003ch2\u003e` element with class name `.title` and a `\u003cdiv\u003e` element with class name `.body`.**\n\n25. ```markdown\n    div.tile$*4\u003eh3.title+img.tile-image\n    ```\n    **Generates four tiles (`\u003cdiv\u003e` with class names `.tile1` through `.tile4`), each containing an `\u003ch3\u003e` element with class name `.title` and an image (`\u003cimg\u003e` with class name `.tile-image`).**\n\n26. ```markdown\n    div.sidebar$*2\u003eul.menu$*2\u003eli.item$*3\u003ea\n    ```\n    **Produces two sidebars (`\u003cdiv\u003e` with class names `.sidebar1` and `.sidebar2`), each containing two menus (`\u003cul\u003e` with class names `.menu1` and `.menu2`), and each menu containing three list items (`\u003cli\u003e` with class names `.item1` through `.item3`), each containing an anchor (`\u003ca\u003e`) element.**\n\n27. ```markdown\n    div.box$*3\u003ediv.header+p.content\n    ```\n    **Creates three boxes (`\u003cdiv\u003e` with class names `.box1` through `.box3`), each containing a `\u003cdiv\u003e` element with class name `.header` and a `\u003cp\u003e` element with class name `.content`.**\n\n28. ```markdown\n    div.feature$*5\u003eh3.title+p.description\n    ```\n    **Generates five feature sections (`\u003cdiv\u003e` with class names `.feature1` through `.feature5`), each containing an `\u003ch3\u003e` element with class name `.title` and a `\u003cp\u003e` element with class name `.description`.**\n\n29. ```markdown\n    div.slide$*5\u003eimg.slide-image+p.slide-caption\n    ```\n    **Produces five slides (`\u003cdiv\u003e` with class names `.slide1` through `.slide5`), each containing an `\u003cimg\u003e` element with class name `.slide-image` and a `\u003cp\u003e` element with class name `.slide-caption`.**\n\n30. ```markdown\n    div.tab$*4\u003eh3.title+p.content\n    ```\n    **Creates four tabs (`\u003cdiv\u003e` with class names `.tab1` through `.tab4`), each containing an `\u003ch3\u003e` element with class name `.title` and a `\u003cp\u003e` element with class name `.content`.**\n\n31. ```markdown\n    section.container$*3\u003ediv.row$*2\u003ediv.col$*4\n    ```\n    **Creates three containers (`\u003csection\u003e` with class names `.container1` through `.container3`), each containing two rows (`\u003cdiv\u003e` with class names `.row1` through `.row2`), and each row containing four columns (`\u003cdiv\u003e` with class names `.col1` through `.col4`).**\n\n32. ```markdown\n    div.gallery$*2\u003ediv.row$*3\u003ediv.col$*4\u003eimg.photo$*3\n    ```\n    **Generates two galleries (`\u003cdiv\u003e` with class names `.gallery1` and `.gallery2`), each containing three rows (`\u003cdiv\u003e` with class names `.row1` through `.row3`), and each row containing four columns (`\u003cdiv\u003e` with class names `.col1` through `.col4`), and each column containing three photos (`\u003cimg\u003e` with class names `.photo1` through `.photo3`).**\n\n33. ```markdown\n    div.carousel$*3\u003ediv.slide$*6\u003eimg.slide-image+p.slide-caption\n    ```\n    **Produces three carousels (`\u003cdiv\u003e` with class names `.carousel1` through `.carousel3`), each containing six slides (`\u003cdiv\u003e` with class names `.slide1` through `.slide6`), each slide containing an image (`\u003cimg\u003e` with class name `.slide-image`) and a caption paragraph (`\u003cp\u003e` with class name `.slide-caption`).**\n\n34. ```markdown\n    div.card$*5\u003ediv.card-header+h3.card-title+div.card-body\u003ep.card-text+button.btn.btn-primary\n    ```\n    **Creates five cards (`\u003cdiv\u003e` with class names `.card1` through `.card5`), each containing a header (`\u003cdiv\u003e` with class name `.card-header`), a title (`\u003ch3\u003e` with class name `.card-title`), a body (`\u003cdiv\u003e` with class name `.card-body`) containing text (`\u003cp\u003e` with class name `.card-text`), and a button (`\u003cbutton\u003e` with classes `.btn` and `.btn-primary`).**\n\n35. ```markdown\n    div.hero$*2\u003eimg.hero-image+h1.hero-title+p.hero-description+a.hero-link\n    ```\n    **Generates two hero sections (`\u003cdiv\u003e` with class names `.hero1` and `.hero2`), each containing an image (`\u003cimg\u003e` with class name `.hero-image`), a title (`\u003ch1\u003e` with class name `.hero-title`), a description (`\u003cp\u003e` with class name `.hero-description`), and a link (`\u003ca\u003e` with class name `.hero-link`).**\n\n36. ```markdown\n    div.navbar$*2\u003eul.navbar-nav\u003eli.nav-item$*4\u003ea.nav-link\n    ```\n    **Produces two navigation bars (`\u003cdiv\u003e` with class names `.navbar1` and `.navbar2`), each containing an unordered list (`\u003cul\u003e` with class name `.navbar-nav`), with four list items (`\u003cli\u003e` with class names `.nav-item1` through `.nav-item4`), each containing an anchor (`\u003ca\u003e` with class name `.nav-link`).**\n\n37. ```markdown\n    div.tile$*3\u003ediv.tile-image+div.tile-content\u003eh2.tile-title+p.tile-description+a.tile-link\n    ```\n    **Creates three tiles (`\u003cdiv\u003e` with class names `.tile1` through `.tile3`), each containing an image (`\u003cdiv\u003e` with class name `.tile-image`) and content (`\u003cdiv\u003e` with class name `.tile-content`), including a title (`\u003ch2\u003e` with class name `.tile-title`), a description (`\u003cp\u003e` with class name `.tile-description`), and a link (`\u003ca\u003e` with class name `.tile-link`).**\n\n38. ```markdown\n    div.box$*4\u003ediv.box-header+h4.box-title+p.box-content\n    ```\n    **Generates four boxes (`\u003cdiv\u003e` with class names `.box1` through `.box4`), each containing a header (`\u003cdiv\u003e` with class name `.box-header`), a title (`\u003ch4\u003e` with class name `.box-title`), and content (`\u003cp\u003e` with class name `.box-content`).**\n\n39. ```markdown\n    div.feature$*3\u003eimg.feature-image+h3.feature-title+p.feature-description+a.feature-link\n    ```\n    **Creates three feature sections (`\u003cdiv\u003e` with class names `.feature1` through `.feature3`), each containing an image (`\u003cimg\u003e` with class name `.feature-image`), a title (`\u003ch3\u003e` with class name `.feature-title`), a description (`\u003cp\u003e` with class name `.feature-description`), and a link (`\u003ca\u003e` with class name `.feature-link`).**\n\n40. ```markdown\n    div.carousel$*2\u003ediv.slide$*4\u003eimg.slide-image+p.slide-caption\n    ```\n    **Produces two carousels (`\u003cdiv\u003e` with class names `.carousel1` and `.carousel2`), each containing four slides (`\u003cdiv\u003e` with class names `.slide1` through `.slide4`), each slide containing an image (`\u003cimg\u003e` with class name `.slide-image`) and a caption paragraph (`\u003cp\u003e` with class name `.slide-caption`).**\n\n41. ```markdown\n    section.container$*3\u003ediv.row$*2\u003ediv.col$*4\n    ```\n    **Creates three containers (`\u003csection\u003e`), each containing two rows (`\u003cdiv\u003e`), and each row containing four columns (`\u003cdiv\u003e`).**\n\n42. ```markdown\n    div.gallery$*2\u003ediv.row$*3\u003ediv.col$*4\u003eimg.photo$*3\n    ```\n    **Generates two galleries (`\u003cdiv\u003e`), each containing three rows (`\u003cdiv\u003e`), and each row containing four columns (`\u003cdiv\u003e`), and each column containing three photos (`\u003cimg\u003e`).**\n\n43. ```markdown\n    div.carousel$*3\u003ediv.slide$*6\u003eimg.slide-image+p.slide-caption\n    ```\n    **Produces three carousels (`\u003cdiv\u003e`), each containing six slides (`\u003cdiv\u003e`), each slide consisting of an image (`\u003cimg\u003e`) and a caption paragraph (`\u003cp\u003e`).**\n\n44. ```markdown\n    div.card$*5\u003ediv.card-header+h3.card-title+div.card-body\u003ep.card-text+button.btn.btn-primary\n    ```\n    **Creates five cards (`\u003cdiv\u003e`), each containing a header (`\u003cdiv\u003e`), a title (`\u003ch3\u003e`), a body (`\u003cdiv\u003e`), text (`\u003cp\u003e`), and a button (`\u003cbutton\u003e`).**\n\n45. ```markdown\n    div.hero$*2\u003eimg.hero-image+h1.hero-title+p.hero-description+a.hero-link\n    ```\n    **Generates two hero sections (`\u003cdiv\u003e`), each containing an image (`\u003cimg\u003e`), a title (`\u003ch1\u003e`), a description (`\u003cp\u003e`), and a link (`\u003ca\u003e`).**\n\n46. ```markdown\n    div.navbar$*2\u003eul.navbar-nav\u003eli.nav-item$*4\u003ea.nav-link\n    ```\n    **Produces two navigation bars (`\u003cdiv\u003e`), each containing an unordered list (`\u003cul\u003e`), with four list items (`\u003cli\u003e`), each containing an anchor (`\u003ca\u003e`).**\n\n47. ```markdown\n    div.tile$*3\u003ediv.tile-image+div.tile-content\u003eh2.tile-title+p.tile-description+a.tile-link\n    ```\n    **Creates three tiles (`\u003cdiv\u003e`), each containing an image (`\u003cdiv\u003e`), content (`\u003cdiv\u003e`), including a title (`\u003ch2\u003e`), a description (`\u003cp\u003e`), and a link (`\u003ca\u003e`).**\n\n48. ```markdown\n    div.box$*4\u003ediv.box-header+h4.box-title+p.box-content\n    ```\n    **Generates four boxes (`\u003cdiv\u003e`), each containing a header (`\u003cdiv\u003e`), a title (`\u003ch4\u003e`), and content (`\u003cp\u003e`).**\n\n49. ```markdown\n    div.feature$*3\u003eimg.feature-image+h3.feature-title+p.feature-description+a.feature-link\n    ```\n    **Creates three feature sections (`\u003cdiv\u003e`), each containing an image (`\u003cimg\u003e`), a title (`\u003ch3\u003e`), a description (`\u003cp\u003e`), and a link (`\u003ca\u003e`).**\n\n50. ```markdown\n    div.carousel$*2\u003ediv.slide$*4\u003eimg.slide-image+p.slide-caption\n    ```\n    **Produces two carousels (`\u003cdiv\u003e`), each containing four slides (`\u003cdiv\u003e`), each slide containing an image (`\u003cimg\u003e`) and a caption paragraph (`\u003cp\u003e`).**\n\n     **Emmet expressions into vscode there is extension  Emmet download it if you dont have**\n     **If you understand this this makes your producitivy  of writing of emmet code also and learn also from it**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhackthacker%2Fhtml-shorth-notations-efficient-coding","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhackthacker%2Fhtml-shorth-notations-efficient-coding","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhackthacker%2Fhtml-shorth-notations-efficient-coding/lists"}