Learn Basic HTML Part 3 – Advanced HTML Tag Types

Continuing on the previous article, which is about learning basic html part 2 about the types of tags in html, where we have discussed the types of tags that exist / are often written on elements <head>, In this article, Yiptechid will discuss the types of tags that are usually placed on elements <body>.

Types of html tags

Title Tag

  • tag <h1> s/d <h6> : This tag serves to create a title or heading
  • tag <hr> : Splitting content (usually shown a dividing line)

Paragraph Tags

  • tag <p> : Create paragraphs
  • tag <br> : Create a new line / line
  • tag <pre> : Fortify text or sentences

Formatting tags

  • tag <b> : This tag serves to bold the text
  • tag <strong> : This tag serves as a bold format for SEO optimization
  • tag <i> : This tag is used to italicize writing
  • tag <em> : This tag serves as an italics format for SEO optimization
  • tag <u> : This tag serves to provide an underline of writing
  • tag <ins> : This tag functions as an underlined font format for SEO optimization
  • tag <del> : This tag functions as a midlined font format (crossed out text) for SEO optimization
  • tag <s> : This tag serves to provide the middle line of the writing (text crossed out)
  • tag <small> : This tag serves to reduce writing
  • tag <sup> : this tag serves as superscript text
  • tag <sub> : This tag functions as subscript text
  • tag <mark> : This tag is used to mark words

Image tags

  • tag <img> : Elements for defining images
  • src : Attribute to specify the URL of the image
  • alt : Defines text on the image, if the image cannot be displayed
  • width – height : Specifies the length and width of the image
  • float : Properties for float images in CSS
  • tag <map> : Defines a map image
  • tag <area> : Defines an area or areas of the image on the map
  • tag <picture> : Displays different images for different devices

Tag Form

  • tag <form> : Create a form to collect user input
  • tag <input> : Create the type of input on the form to be created
  • tag <textarea> : Element to define input fields
  • tag <label> : Provide a label to the input element
  • tag <filedset> : Group elements contained in a form
  • tag <select> : Create input with a selection in the form of a drop down list
  • tag <optgroup> : Groups the options on the input option list
  • tag <option> : Defines the options that can be selected
  • tag <button> : Create Button
  • tag <datalist> : Create a list of options for data input
  • tag <output> : Displays the result of the count

Table tags

  • tag <table> : Create tables on the web
  • tag <tr> : Create a row in the table
  • tag <td> : Create a column in the table
  • tag <th> : Make column headings. For example name, class and address.
  • tag <caption> : Create table titles
  • border : Arrange table lines
  • border-collapse : Set table line boundaries
  • padding : Set the cell padding
  • text-align : Set alignment on table content
  • border-spacing : Set the table line spacing
  • colspan : Merge multiple columns. At the office he called Merge Cell
  • rowspan : Merge multiple lines
  • id : Provide id to table or column
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  padding: 5px;
}
table {
  border-spacing: 15px;
}
</style>
</head>
<body>

<h2>Border Spacing</h2>
<p>Border spacing specifies the space between the cells.</p>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

<p>Try to change the border-spacing to 5px.</p>

</body>
</html>

List Tag

  • tag <ul> : To create a list view using symbols such as bullet, cyrcle, and others.
  • tag <ol> : Create lists using numbers, letters, romans and more
  • tag <li> : Specify various items to display
  • tag <dl> : Defines a list of descriptions
  • tag <dt> : Defines the description term
  • tag <dd> : Describe terms in a description list
  • tag <type> : Specifies the numbering type

That is the discussion about the types of tags that are mostly used in element tags <body>, don’t forget to try it at home and hopefully this article is useful.

Leave a Reply

Your email address will not be published. Required fields are marked *