Understanding Tags in HTML
As a markup language, HTML needed a way to tell web browsers what to do with text. Is the text written as a paragraph, list, or as a link. In HTML, this sign is known as a tag. Almost all tags in HTML are written in pairs, namely the opening tag and closing tag, where the object that is subject to the tag command is between the opening tag and closing tag. Objects here can be text, images, or videos. The tagging is between two square brackets: “<” and “>”.
Here is the basic format for writing HTML tags:
| <opening_tag>object to which the tag command</closed_tag> |
For example, consider the following HTML code:
| <p>This is a paragraph </p> |
- <p> is the opening tag, in this example p is the tag for the paragraph.
- </p> is a paragraph closing tag. The difference with the opening tag lies in the forward slash (/)
If you forget to provide a closing tag, generally the browser will “forgive” this error and still display the results as if we wrote a closing tag. Although this seems easy, it is often confusing. As another example, if you want to make a text in a paragraph that is written in bold or italics, in HTML it can be written as follows:
| 1 2 | <p>This is a paragraph. <i>Just a collection of a few sentences</i>. This paragraph consists of <b>3 sentences</b></p>. |
The result of the HTML code above, is translated by the browser into:
“This is a paragraph. Nothing but a collection of a few sentences. This paragraph consists of 3 sentences.” The <i> tag in the HTML code above gives commands to the browser to display text in italics (i, stands for italic), and the <b> tag for bold text (b, stands for bold). There are exceptions for some unpaired tags, such as <br> for a break or <hr> for a horizontal line. This tag is also known as self closing tag or void tag, for writing it can be written with <br>, or <br />. HTML is not case-sensitive, in the sense that writing <p> is considered the same as <P>. At the beginning of the emergence of HTML, web programmers generally used capital letters for all tags to distinguish them from text that was the content of the web. However the HTML variant, xHTML requires lowercase for all tags. In HTML5, this rule is again not required. However, the habit of today’s web programmers is to use lowercase for all tags.
Understanding Elements in HTML
Element is the content of the tag that is between the opening tag and closing tag, including the tag itself and its attributes (if any). For example, consider the following HTML code:
| 1 | <p>This is a paragraph </p> |
In the example above, “<p>This is a paragraph</p>” is an element p.
Elements not only contain text, but also other tags.
Example:
| 1 | <p>This is an <em>paragraph</em> </p> |
From the example above,<p>This is an <em>paragraph</em> </p> is a p element. In discussions or tutorials about HTML, it is not uncommon for the terms “tag” and “element” to be interchanged.
Understanding Attributes in HTML
Attributes are additional information provided to a tag. This information can be in the form of instructions for the color of the text, the font size of the text, etc. Each attribute has a name and value pair written with name=”value”. Value is enclosed in quotation marks, may use one (‘) or two (“) quotation marks. In the HTML code above, href=”https://www.duniailkom.com” is an attribute. href is the name of the attribute, and https://www.duniailkom.com is the value of the attribute. Not all tags need attributes, but you will often see a tag with attributes, especially the id and class attributes which are often used to manipulate web pages using CSS or JavaScript. HTML has many attributes, some of which are only suitable for certain tags. For example, the “href” attribute above is only used for the <a> tag (and some other tags). An explanation of the purpose and meaning of attributes such as href will be discussed in subsequent tutorials.
The need for digital IT is needed in daily activities, Bead IT Consultant is the right choice as your partner, visit our website by clicking this link: www.beadgroup.com