HTML Elements

HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on. Each element has a definition that includes the following information: categories, contexts in which this element can be used, content model, ... content attributes, ... DOM interface, ...;

Basic Syntax


<!-- HTML comment -->
<tagname attribute="value">Content</tagname>
Anatomy of an HTML Element Anatomy of an HTML Element
  • The opening tag This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets. This states where the element begins or starts to take effect — in this case where the paragraph begins.
  • The closing tag This is the same as the opening tag, except that it includes a forward slash before the element name. This states where the element ends — in this case where the paragraph ends. Failing to add a closing tag is one of the standard beginner errors and can lead to strange results.
  • The content This is the content of the element, which in this case, is just text.
  • The element The opening tag, the closing tag and the content together comprise the element.
Empty Elements

Some elements never contain content; for example <br>, <hr>, <img>, <meta>. NOTE: not putting any content in an element does not make it empty
In HTML5 specifically, we do not close empty elements (no end tag). In other markup languages, including HTML5, you can use the shorthand form, combining the start tag and end tag; for example, <br /> or <hr /> 


<!-- empty elements never take any content -->
<hr>
<br>
<img src="file.png" alt="image description">

<!-- not putting any content in an element does not make it empty -->
<p></p>
Nesting Elements

You can put elements inside other elements too — this is called nesting. You do however need to make sure that your elements are properly nested. The elements have to open and close correctly so that they are clearly inside or outside one another. If they overlap, your web browser will try to make the best guess at what you were trying to say, which can lead to unexpected results. So don't do it!

Nesting represents the relations among objects in Document Object Model (DOM)