For example, take into consideration the following line of content:
\ My dog is very nice
If you want the line to stand out, you could specify that it is a paragraph by including it in paragraph tags:
\ <p> My dog is very nice </p>
The anatomy of an HTML element
Next, we will explore this paragraph element a little more.
The main parts of our element are:
1. Opening tag: This consists of the name of the element (in this case, p), surrounded by angular brackets of opening and closing. These indicate where the item begins or begins to take effect – in this case, where the paragraph begins.
2. Close tag: This is the same as the opening tag, except that it includes a slash before the element name. This indicates where the element ends – in this case, where the paragraph ends. The absence of a closing tag is one of the common mistakes of the beginner and can lead to strange results.
3. Content: This is the content of the element, which in this case is only text.
4. Element: The opening tag, the closing tag, and the contents together comprise the element.
Items can also have attributes.
Attributes contain additional information about the element that you do not want to appear in the actual content. Here, a class is the attribute name, and editor-note is the attribute value. The class attribute allows you to give the element an identifier that can be used later to add style information as well as other things.
An attribute should always have:
1. A space between it and the name of the element (or previous attribute, if the element already has one or more attributes).
2. The name of the attribute, followed by an equal sign.
3. The opening and closing quotation marks surrounding the value of the attribute.
Nesting elements
You can put items inside other items – this is called a nested one. If you want to say that the dog is very beautiful, you can include the word “very” in a <strong> element, which means that the word is strongly accented:
<p> My dog is <strong> very </strong> nice. </p>
However, you need to make sure that your items are nested properly: in the example above, we first opened the <p> element, then the <strong> element, so you must first close the <strong> element, and then the element <p>. What follows is not correct.
<p> My dog is <strong> very nice. </p> </strong>
However, you need to make sure that your items are nested properly: in the example above, we first opened the <p> element, then the <strong> element, so you must first close the <strong> element, and then the element <p>. What follows is not correct.
<p> My dog is <strong> very nice. </p> </strong>
The elements should be opened and closed properly so that they are clear inside or outside the other. If they overlap as above, then your web browser will try to guess what you are trying to say, which can lead to unexpected results. So, don’t do that!
Empty item
Some items do not contain data, and are called empty items. Get the <img> element you already have in HTML:
It contains two attributes, but there is no closing </img> tag, and no internal content. This is because an image element does not include content to have an effect on it. Its purpose is to embed an image into the HTML page where it appears.