More HTML Tags!
By Tony 2023.2.19
We already introduced <h1> tags on the previous article. Here are some more HTML tags! You can open up VS Code and follow along.
1. The basic tags
All the tags below are indispensable, they formed the basic structure of a webpage.
| Tag name | Usage |
|---|---|
| <!DOCTYPE html> | It tells the browser the document language is HTML and doesn't have a close tag. |
| <html> </html> |
These tags are matching tags. They wrap up <head> </head> and <body> </body> |
| <head> </head> | These tags wrap up all the information that is not included in <body> </body> tags. |
| <body> </body> | These tags have the same level as head tags. They wrap up all the contents that are visible on the page. |
| <title> </title> | These tags are wrapped inside head tags. The text inside them will show on the page title of the browser. |
You can type all the tags above by creating a new HTML file in VS Code and type "!" then hit enter. All the tags should appear like this:
You can change anything and see what happens. The best way to learn is by doing it yourself.
2. Other common tags
All the tags below are very common and important. It's always good to try to remember them.
| Tag name | Usage |
|---|---|
| <h1> </h1>~<h6> </h6> | There are six levels of heading tags. <h1> is the largest heading, and <h6> is the smallest heading. |
| <p> </p> | The text inside them is marked as a paragraph. |
| <div> </div> | They wrap up and seperate contents. With these tags, it's easier to control and organize different sections. |
| <a> </a> | They make elements inside them clickable hyperlink. |
| <style> </style> | You can put CSS style sheets in these tags. What's CSS? |
| <b> </b> | The text inside these tags is bold. |
| <script> </script> | These tags allow you to put JavaScript code inside an HTML file. What's JavaScript? |
| <ul> </ul> | These tags wrap up an unordered list. |
| <ol> </ol> | These tags wrap up a number-ordered list. |
| <li> </li> | These tags wrap up a list item and are wrapped inside <ul> </ul> or <ol> </ol> tags. |
| <hr> | A line that seperates sections. The colored line here |
| <br> | It makes a new line in a paragraph like this. |
| <img> | It grabs an image by it's name and shows the image. |
Take some time and try to make an interesting webpage using the tags introduced above! If you are not sure how to use a tag, just click it for more information. Have fun exploring HTML tags!