https://github.com/guilhermebkel/html-structure-study
:scroll: A deep study about HTML
https://github.com/guilhermebkel/html-structure-study
html
Last synced: 7 months ago
JSON representation
:scroll: A deep study about HTML
- Host: GitHub
- URL: https://github.com/guilhermebkel/html-structure-study
- Owner: guilhermebkel
- Created: 2020-07-20T20:59:24.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2020-07-21T22:09:54.000Z (about 5 years ago)
- Last Synced: 2025-01-21T12:33:20.235Z (9 months ago)
- Topics: html
- Homepage:
- Size: 3.91 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📜 Html Structure Study
A deep study about the HTML Structure.
## Summary
- [ Core Tags ](#core-tags)
- [ Container Tags ](#container-tags)
- [ Textual Tags ](#textual-tags)
- [ Image Tags ](#image-tags)
- [ Multimedia Tags ](#multimedia-tags)
- [ Integrated Content Tags ](#integrated-content-tags)
- [ Formulary Tags ](#formulary-tags)
- [ Other Tags ](#other-tags)
## Core Tags
```html
```
- **BODY**: The place where all the page data is put inside.
- **HEADER**: Generally we can use to add logos, titles, navigation menus, search fields, etc.
- **NAV**: Generally we can use to group links for other pages, sites. Besides, it can be even on header or footer, depending of what you're doing.
- **MAIN**: It is used to add the main content on the page. We have to make sure the page has only one single main tag.
- **SECTION**: It's a section inside a document and can have a new title composing inside.
- **ARTICLE**: Generally a independent content inside a page that can have other elements like header, footer and section inside.
- **ASIDE**: Usually used to show additional content like adverting, navigation, etc.
- **FOOTER**: Generally used in the final of the page to describe content and author info.
## Container Tags
- **SPAN**: Generic container in line.
```html
```
- **DIV**: Generic container in block.
```html
```
They must be used to group elements for styling and when there's no other element that is semantically for proper use.
## Textual Tags
- **P**: A text paragraph.
```html
My paragraph
```
- **A**: Defines a link between pages.
```html
Go to other page
```
- **OL**: Defines an ordered list.
```html
```
- **UL**: Defines an unordered list.
```html
```
- **LI**: Defines an item from some list.
```html
- first
- second
```
- **TIME**: Used to show time values.
```html
```
- **ADDRESS**: Defines basically a contact info.
```html
Be in touch
Street 01th
+1 555 20852145
```
- **CITE**: Defines a reference. It must includes a reference title or url.
```html
More info on [ISO-0101]
```
- **ABBR**: Used to show an abbreviation and some optional description for it.
```html
Deep knowledge in
SEO
```
- **B**: Used on texts that need some spotlight with no explanation.
```html
My name is Guilherme Mota
```
- **STRONG**: Gives a spotlight to a word of high importance.
```html
The course will be available soon.
```
- **I**: Used to give spotlight for special words.
```html
The bug, in latin Aedes Aegypti.
```
- **EM**: Used on words that if you give some spotlight on a talk, they could really change all the meaning of it.
```html
This isn't an influence.
```
## Image Tags
### Figure
```html
Fig. 1 - A beautiful cat.
```
- **FIGURE**: Defines a figure container.
- **FIGCAPTION**: Defines a figure description.
- **IMG**: Defines a image on document.
### Picture
```html
```
- **PICTURE**: It is a container used to specify multiple sources for a unique image.
- **SOURCE**: Used to specify different sources for some image.
## Multimedia Tags
```html
```
- **AUDIO**: Used for sound content.
- **VIDEO**: Used for video content.
- **TRACK**: Used for subtitles for the current media being played.
## Integrated Content Tags
- **IFRAME**: Used to incorporate other web documents inside some web document.
```html
```
- **EMBED**: Used to include pdf plugins and flash.
```html
```
## Formulary Tags
### Form
```html
Team name
Chelsea
```
- **FORM**: Used to submit data from user.
- **FIELDSET**: Used to group elements that represent the same idea.
- **LEGEND**: Explains the fieldset type.
- **LABEL**: Represents the label of some input.
---
### Input
- **INPUT**: A simple text field.
```html
```
- **TEXTAREA**: A text field with multiple lines.
```html
Once upon a time...
```
- **SELECT**: Used to submit selected data from user.
```html
Blue
Red
```
- **BUTTON**: A simple clickable button.
```html
Hello?
```
## Other Tags
### Summary
```html
More details
Here goes the details...
```
- **SUMMARY**: Summary defines a visible header for some detail text.
- **DETAILS**: Defines a text for some summary.
---
### Output
- **OUTPUT**: Show a result from an user action.
```html
+
=
```