The first step toward understanding and working with HTML is learning the basic terms that describe most of the functions of this language.
The four key concepts you need to learn about html is Elements, Tags, Attributes/ Values & Nesting of elements.
All HTML pages are made up of elements. An HTML element is everything from the start tag to the end tag.
Example: heading element <h1> </h1>, form element <form> </form>.
All elements are constructed with tags. An element is made up of two tags: an opening tag and a closing tag. The tag begins with a “less than” sign (<), then the element name, followed by a “greater than” sign (>). All tags are constructed the same way.
For example, the opening and the closing tag for the paragraph element would look like this: <p></p>
<p>This is an HTML paragraph.</p>
Some elements do not use closing tags because they do not enclose content. These are called empty elements. For example, the line break element <br> does not require a closing tag. In the case of empty elements, add a closing slash after the element name, like this: <br />. When a browser sees the slash, it will recognize the element as one that does not need a separate, closing tag.
<br /> Incorrect: <br/>HTML attributes generally appear as name-value pairs, separated by "=", and are written within the start tag of an element, after the element's name.
<tag attribute="value">(content to be modified by the tag)</tag>
For example, to specify the size of an image or graphic on your page, you would use the image element <img /> along with the height and width attributes. "200" and "300" are the values.
<img height="200" width="300" />
Often you will want to apply more than one element to a portion of your page. Elements must be properly nested as they are contained inside one another and they must never overlap.
<p> <b> <i> </i> </b> </p>
The properly formatted structure is shown below
<p>
<b>
<i>
</i>
</b>
</p>The below example is wrong. Overlapped elements can create garbled results.
<p>
<b>
</p>
<i>
</b>
</i>
