Anatomy of an HTML Tag
Olubisi Folarin
Are you a beginner looking to hone your skills in web development? In this article, we will be learning an important part of Hypertext Markup Language (HTML): HTML tags. HTML tags are vital for creating and editing our web content. They dictate how our web pages will function and appear. Follow me as we explore this interesting topic.
What is HTML?
HTML is Hypertext Markup Language that describes the structure of a web page. To learn HTML you need to know what tags are to use, what they do, and when to use them. Read More
What is an HTML Tags?
HTML tags are keywords that tell a web browser how to organize and arrange text. Tags act like containers. They tell you something about the information between their opening and closing tags.
Points to remember
The closing tags have a forward slash in them.
Tags always come in pairs.
Tags are often referred to as elements.
Content: This is what is displayed on our web page.
ATTRIBUTE
What is an Attribute?
An Attribute provides additional information about the content of an element. Attribute requires a name and a value.
Points to remember
Attribute values should be enclosed in a quotation mark.
Some HTML tags require attributes.
Attribute adds meaning to an HTML element.
Attribute tells us more about the content of an HTML element.
COMMONLY USED HTML TAGS
<!Doctype html>: It is used to know the version of your HTML.
Head tag: The <head> tag contains the information about the page. Inside the <head> tag we have:
<meta>: It provides information about a page.
<title>: It contains the content of the title of our web page.
Body tag: The <body> tag contains content displayed in the browser.
Heading tag: The heading tag consists of six (6) headings, which vary by their size.
<h1> is the largest, and it is used for the main headings.
<h2> to <h6> are used for subheadings.
<h6> is the smallest of the heading tags.
Paragraph tag: We surround words with <p> tag to create a paragraph. Paragraphs are displayed on a new line.
Link tags: The <a> tag is a hyperlink that is used to link from one web page to another. It is defined by the href attribute.
Formatting tag: The formatting tag includes:
Emphasis tag: The <em> tag is used to emphasize a text.
Bold tag: The <b> tag is used for bolding text.
Italics tag: The <i> tag makes text italics.
Strong tag: The <strong> tag is used to represent the importance of a text.
Subscript tag: The <sub> tags appear at the bottom of a line.
Superscript tag: The <sup> tags appear at the top of a line.
List tag: We have two types of list tags.
Unordered list: The <ul> tag represents an unordered list. List items begin with the list item tag <li>. Each item in the <li> is marked with a bullet.
Ordered list: The <ol> tag represents an order list. List items begin with the list item tag <li>. It is rendered as a numbered list.
Image Tag: The <img> tag is used for adding images to an HTML document. The <img> tag makes use of the source and alt attribute.
Form Tag: The <form> tag is used to collect information from users. Information like Name, Date of birth, Email, Password, and so on. The form tags include:
<form>: It is used to collect information from users.
<input>: Used to create several form controls to accept data.
<textarea>: Used to create multiple line input.
<label>: It is a title that explains what a user should put in the input element.
<select>: It is used to create a drop-down list.
<option>: It is used to select an option in a drop-down list.
<button>: It defines a clickable button for submitting data.
Table Tag: The table tag includes:
<table>: It is used for creating tables for a web page.
<tr>: It indicates the start of each row. It stands for Table row.
<td>: It is used to enter the data in the table. It stands for table data.
<thead>: It is used for adding a heading at the beginning of our table. It is used with <tbody> and <tfoot>, which specify the body and foot of a table.
In conclusion, this article has taught us the importance and fundamental concepts of HTML tags in web development. HTML tags form the building blocks of web pages, allowing us to structure content, define elements, and create a meaningful layout. It's time to put what you have learned into practice and have fun with HTML Tags.
Thank you for joining me on this HTML tags adventure.
Happy coding.