Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jhoan5/html
I made this guide to search something that I could forget to make easier HTML development and consolidate my knowledge in INCAP
https://github.com/jhoan5/html
cheatsheet comprehensive developer-tools guide html incap tags
Last synced: 2 days ago
JSON representation
I made this guide to search something that I could forget to make easier HTML development and consolidate my knowledge in INCAP
- Host: GitHub
- URL: https://github.com/jhoan5/html
- Owner: Jhoan5
- License: mit
- Created: 2023-02-25T15:12:15.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-02T16:25:07.000Z (3 months ago)
- Last Synced: 2024-11-06T09:14:18.767Z (about 2 months ago)
- Topics: cheatsheet, comprehensive, developer-tools, guide, html, incap, tags
- Homepage: https://jhoan5.github.io/html/
- Size: 17.1 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Comprehensive Guide to HTML
## Set Up
1. Install a text editor like [Visual Studio Code](https://code.visualstudio.com/) or use Notepad.
2. Create a new file with the `.html` extension, such as `index.html`.
3. Write "Hello, World!" inside the file and open it in a web browser to see the result.
Or use an editor online like:
- [CodePen](https://codepen.io/)
- [CodeSandbox](https://codesandbox.io/)
- Or whatever you prefer.
## Tags
1. Tags are used with the format ` content(tags or text) `.
2. The `` notation indicates that the tag needs to be opened and it does not need to be closed. ``. The others need to be closed.
| Group | Tags |
| ------------------- | ------------------------------------------------------------------ |
| HTML Document | ``,`html`, `head `, `body` |
| Head Tags | `title`, `style`, ``, ``, `` |
| Heading | `h1`, `h2`, `h3`, `h4`, `h5`, `h6` |
| Paragraphs | `p` |
| Semantic Text | `i`, `em`, `b`, `strong`, `code`, `sub`, `sup`, `time`, `s`, `del` |
| Semantic Container | `header`, `nav`, `main`, `footer`, `address` |
| Form Elements | `form`, `select`, `textarea`, `button`, `label` ,`<input>` |
| List | `ul`, `ol`, `li`, `dl`, `dt`, `dd` |
| Table | `table`, `thead`, `tbody`, `tfoot`, `th`, `tr`, `td`, `caption` |
| Media | `video`, `audio`, `iframe`, `embed`, `object`, `svg`,`<img>` |
| Character Reference | `<`, `>`, `&` |
| Comment | `<!-- comment -->` |
| Cite and Quotation | `q`, `blockquote`, `abbr`, `cite` |
| Feature Tags | `dialog`, `progress`, `output`, `search`, `template` |
| Deprecated Tags | `font`, `center`, `u`, `strike`, `applet`, `big`, `small`, `dir` |
| Deprecated Tags | `menu`, `basefont`, `frame`, `frameset`, `isindex`, `blink` |
## Attributes or Properties of Tags
| Group tags | Attributes |
| ---------- | --------------------------------------------------------------------- |
| All | `id`, `class`, `data-*`, `style`, `lang`, `dir`, `hidden`, `on*event` |
| All | `contenteditable`, `draggable`, `spellcheck`, `tabindex`,`aria-*` |
| meta | `charset`, `name`, `http-equiv`, `content`, `itemprop` |
| Link | `href`, `target`, `rel`, `type` |
| Text | `align`, `valign`, `width`, `height`, `translate` |
| Form | `action`, `method`, `accept`, `accept-charset`, `enctype` |
| input | `placeholder`, `value`, `type`, `name`, `checked`, `required` |
| List | `type`, `start`, `value` , `reversed` |
| Table | `colspan`, `rowspan`, `scope`, `headers` |
| Image | `src`, `alt`, `title`, `width`, `height` |
| Media | `controls`, `autoplay`, `loop`, `muted`, `poster` |
## Resources
_To learn HTML and practice, you might visit some of these resources:_
- [W3Schools](https://www.w3schools.com/html/)
- [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/)
- [html-best-practices](https://github.com/hail2u/html-best-practices)
- [Free Code Camp](https://www.freecodecamp.org/news/tag/html/)
- [Frontend Mentor](https://www.frontendmentor.io/)
## Thank You
Thank you for reading. I hope this guide will be helpful to you.
> [!NOTE]\
> I am not a professional. I am just a learner.
> Feel free to colabore to this repository. I will appreciate it.
> This repository was made with :heart: