Important Tags
- When writing with HTML, we need to start with some important tags: html, head, and body.
- The head tag is used for configuring some functionality for the website (ex. title).
- Code written on the head tag is invisible on the browser.
- The purpose of the head tag is to explain our information to the browser as clearly as possible.
- The body tag displays the main content of the website.
- There are also various meta tags that do not get displayed on the website (extra information).
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body></body> </html>
- There are many different kinds of tags that can be used in the body. These tags can be found on MDN (MDN Web Docs https://developer.mozilla.org).
<time></time> <audio></audio> <video></video> <strong></strong> <caption></caption> // and so on...
Form
- Form tag is a very powerful element which gives you a lot of options to create your own forms.
- There is no need to memorize all form tags as they can be accessed through MDN. You only need to know how to use them.
<form> <input required placeholder="Name" type="text" /> <input required placeholder="Lastname" type="text" /> <input required placeholder="Username" type="text" /> <input required placeholder="Password" type="password" /> <input type="submit" value="Create Account" /> </form>
Label
- There are many different labels for elements such as id and class.
- These labels are meant to indicate and give meaning to elements that they are special in some way.
- For id's however, you can only use it once for each tag.
- These tags will be useful and when used with CSS.
<p id="selector"></p> <p class="selector2"></p>
Semantic HTML
- Describing an element to be semantic means that is has meaning.
- Even though the code itself does not change anything in the browser, giving semantic meanings to elements structures and organizes the code.
- Structuring the code semantically is important for viewing purposes.
<header></header> <form></form> <article></article> // and so on...
Greatness From Small Beginnings