HTML Elements and Tags
A web page is made of many HTML elements, and each element is written with tags. Tags are like labels that tell the browser what the content is.
HTML tags
A tag is a keyword inside angle brackets < >. Most tags come in pairs: an opening tag and a closing tag. The closing tag has a forward slash before the name.
<p>This is a paragraph.</p>HTML element
An element is the full thing: the opening tag, the content and the closing tag together.
| Part | Example |
|---|---|
| Opening tag | <p> |
| Content | This is a paragraph. |
| Closing tag | </p> |
| Element | <p>This is a paragraph.</p> |
So a tag is only the label, and an element is the label plus the content. People often use both words in the same meaning, and that is okay while you are learning. Read also the interview question difference between tags and elements.
Nested elements
An element can contain other elements. This is called nesting. Close the inner tag before the outer one.
<body>
<h1>My Heading</h1>
<p>This is <strong>important</strong> text.</p>
</body>Here <strong> is inside <p>, and both are inside <body>.
Empty (void) elements
Some elements have no content, so they have no closing tag. They are called empty or void elements. Common ones are <br> (line break), <hr> (horizontal line), <img> (image), <input> and <meta>.
<p>First line<br>Second line</p>
<hr>
<img src="photo.jpg" alt="A photo">You may see them written as <br /> with a slash. That style is from XHTML. It is allowed but not needed in HTML5.
Rules to remember
- Tag names are not case-sensitive, but write them in lowercase, as everyone does.
- Always close the tags that need closing. Forgetting a closing tag can break the layout.
- Nest tags properly:
<b><i>text</i></b>is right,<b><i>text</b></i>is wrong. - Use the list of common tags as a quick reference.
Summary
- A tag is a label in angle brackets. An element is the opening tag, content and closing tag.
- Elements can be nested.
- Empty elements like
brandimghave no closing tag. - Next: HTML Attributes.
| Interview Questions & Answers |
|---|
| Do all HTML tags require both a begin and end tag? |