HTML or Hyper Text Markup Language is the backbone of the internet. HTML has tags that are used to create the structure of a web page, and the attributes of these tags are used to customise how these tags should look. In this article, we will look at some of the most commonly used HTML tags and their attributes.
Most Commonly used HTML Tags and their Attributes
Body Tag and Its attributes
<BODY>
<Content of a Webpage>
</BODY>
The body tag contains the context of a webpage that will be displayed to users. Multiple tags can be used inside the Body tag such as Headings, Paragraphs, Images, Containers, etc.
Try the HTML Code here.
Attributes:
<BODY bgcolor="color"> : bgcolor attribute specifies the background color of the body of a webpage. You can specify the color in the form of the name of the color or in a Hex number.<BODY background="img.png"> : This tag can set an image as the background of the document.<BODY text="color"> : It sets the color of the text that the body tag contains.<BODY link="color"> : This tag sets the default color of the links that the user hasn't visited yet.
Image tag and Its Attributes
<img src="https://www.studytonight.com/img1">
The <img> tag embeds an Image into the webpage.
Try the HTML Code here.
Attributes
<IMG src="url" alt="text"> : Embeds an image with an alternate text.<IMG src="url" alt="text" align="direction"> : Align an image on the web page. You can set the values such as left, right, top, and bottom.<IMG src="url" alt="text" border="number"> : border attribute sets the size of the border around the image.<IMG src="url" alt="text" height="pixels"> : Specifies the height of the image.<IMG src="url" alt="text" width="pixels"> : Specifies the width of the image.<IMG src="url" alt="text" usemap="map-name"> : Specifies an image as a client-side image map.
Anchor tag and Its Attributes
The <a> tag creates a hyperlink that is used to link from one page to another.
<a href="https://www.studytonight.com/">StudyTonight!!</a>
Attributes
<a href="url">...</A> : Sets the URL of the Hyperlink.<a href="url" download> : Specifies that the target file specified in the herf attribute will be downloaded when the user clicks on the link.<a href="url" target="_blank"> : Specifies where to open the linked document.<a href="url" type="text/html"> : Specifies the type of the linked document.
Table tag and Its Attributes
<table>
<tr>
</tr>
</table>
The <table> tag is used to generate a table on the web page.
Try the HTML Code here.
Attributes
<TABLE border="pixels"> : Sets the size of the cell borders.<TABLE cellspacing="pixels"> : Specifies the amount of space between cells.<TABLE bgcolor="value"> : Sets the background color of the table.<TABLE height="pixels"> : Specifies the height of the table.<TABLE width="pixels"> : Specifies the width of the table.<TD colspan="columns"> : Sets a cell to span columns.<TD rowspan="rows"> : Sets the cell to span rows.
Frame tag and Its Attributes
< frame src = "URL" >
The <frame> tag embeds another HTML file to be displayed on the webpage.
Try the HTML Code here.
Attributes
< frame src = "URL" frameborder="value"> : Specifies whether to display a border around the frame or not.< frame src = "URL" marginheight="value"> : Sets the top and bottom margins of the frame.< frame src = "URL" marginwidth="value"> : Sets the margin between frames.< frame src = "URL" name="value"> : Specifies the name of the Frame.
Form tag and Its Attributes
<form action="/demo.php" method="get">
<label for="fname">Your name</label>
</form>
The <form> tag is used to generate a form for the user input on the web page.
Try the HTML Code here.
Attributes
<FORM action="URL"> : It specifies where to send the data when the form is submitted.<FORM method="get|post"> : Specifies the HTTP method to use when the form is submitted. You can use the get or post method.<form name="myForm"> : Specifies the name of the form.<form autocomplete="on"> : It sets the autocomplete on or off.<form accept-charset="utf-8"> : Sets the character encoding that is going to be used.
Conclusion
In conclusion, the body, frame, form, anchor, and image tags with their respective attributes are some of the most commonly used elements in HTML. These tags form the building blocks of web pages and are essential to creating a visually appealing and well-structured website.
As a web developer, it is important to have a solid understanding of these tags and their attributes in order to create high-quality and accessible web content. By utilising these tags effectively, you can create engaging and interactive web pages that cater to the needs of your audience.
All the best!!!
Frequently Asked Questions
1: What is the HTML tag for adding images to a webpage?
The HTML tag for adding images is <img>. The "src" attribute is used to specify the URL of the image, while the "alt" attribute provides a text description of the image.
2: What is the HTML tag for creating hyperlinks?
The HTML tag for creating hyperlinks is <a>. The "href" attribute is used to specify the URL of the page you want to link to. You can also use the "target" attribute to control how the linked page is opened (e.g. in a new window).
3: What is the HTML tag for creating headings?
The HTML tags for creating headings are <h1> through <h6>. The number indicates the level of the heading, with <h1> being the largest and <h6> being the smallest. These tags are useful for organising content and making it easier to read.
4: What is the HTML tag for creating lists?
The HTML tags for creating lists are <ul> (unordered list) and <ol> (ordered list). Within these tags, you can use <li> (list item) to specify each item in the list. You can also use the "type" attribute to specify the type of bullet or numbering used in the list.
