All HTML consists of tags, like this:
<div></div>
The above is a div, a common tag. It's called this because it "divides" the page into different parts. It's the most generic tag. Notice it has both an opening tag and a closing
There are more specific tags for describing parts of pages:
<head> <title>HTML Tags</title> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head>
The above is the head tag. Notice it has three other tags within it, and notice these new things about tags:
- Tags can have other tags inside them
- Tags can have content within them (The content of a <title></title> tag is the title itself, in this case: HTML Tags)
- Tags can have attributes, which go inside the opening tag only, such as rel="stylesheet" and href="style.css"
- Not all tags have closing tags (What?) for example, <link> is a void tag
Void tags are the only tags which will not have closing tags. It's very confusing to beginners.
Here is a list of all the void tags, which do not have closing tags:
- <area>
- <base>
- <br>
- <col>
- <embed>
- <hr>
- <img>
- <input>
- <keygen> Deprecated
- <link>
- <meta>
- <param> Deprecated
- <source>
- <track>
- <wbr>
Here is a list of the most important tags for beginners to know:
<div></div>
Div - the most common. Sites are filled with these.
<html></html>
Html - every page starts with this, it declares the beginning of the html document
<head></head>
Head - the section where the title is defined, where CSS stylesheets and Javascript files are loaded in. This is also a section where <meta> information (a void tag) can be defined
<body></body>
The main tag where all of the content for the webpage belongs.
Other common tags:
<h1> - <h6>: These tags are used to specify headings, with<h1>being the most important and<h6>being the least important.<p>: This tag is used to enclose paragraphs of text.<a>: This tag is used to create hyperlinks.<img>: This tag is used to embed images in an HTML document.<ul>and<li>: These tags are used to create Unordered Lists with Line Items inside.<ol>and<li>: These tags are used to create Ordered Lists with Line Items inside.<span>: This tag is used to create an inline container for grouping and styling content.