HTML Elements

HTML Lists

<ul>

It is used to create an unordered list of items, which are rendered with bullet points.

<ol>

It is used to create an ordered list of items, which are rendered with numbers.

<li>

It is used to represent an item in a list. It must contain under <ul> or <ol>.

Example:

HTML Table

<table>

It is used to represent data in a table. A table contains rows and columns, and each cell contains data. The <tr> element defines the table row. It may contain <th> (cells that contain header) or <td> (cells that contain data). <thead> element defines a set of rows indicating the head of the table. <tbody> element defines a set of rows indicating the body of the table.

Attributes of <table> element:

• <align> : It defines where the table will be displayed on the screen. It has three values -

  • left : Table will be displayed on the left side of the document.

  • center : Table will be displayed in the center of the document.

  • right : Table will be displayed on the right side of the document.

• bgcolor : Using this attribute we can change the background color of the table. It takes hexadecimal RGB code as input.

• border : It creates a border in pixels around the table.

• cellpadding : It defines the space between the content of a cell and its border. It takes input in pixels and the value will be applied to all four sides of the cell's content.

• cellspacing : It defines the size of space between two cells. It takes input in percentages and pixels.

These attributes are deprecated. But it is better to know about them.

Attributes of <th> and <td> element:

• <colspan> : This attribute defines how many columns a cell will be expanded. The default value is 1 and the maximum value is 1000. If the value exceeds 1000, then it resets to 1.

• <rowspan> : It defines how many rows a cell will be expanded. The default value is 1. If the value is set to 0, then it will be extended till the end of the table section.

Example:

HTML iFrame

<iframe>

It is used to embed another HTML page into the current one.

Attributes:

• src : It is the URL of the page that you want to embed.

• width : Width of the frame.

• height : Height of the frame.

• frameborder : It creates a border around the frame.

• allow : It specifies some features that are available to the <iframe> . Like, accelerometer, autoplay, picture-in-picture, encrypted-media, gyroscope, fullscreen etc.

Example:

HTML Form

<form> and <input>

It is used to create a form for submitting information. The <input> element is used to create interactive controls for web-based forms to accept data from the user. There are so many input types available.

<input> types:

text : It is a single-line text field, which takes text as input.

password : It defines a password field where the characters are obscured.

email : It is used for input fields that contain an email. It will show an error if we don't use the '@' symbol.

date : Input fields that contain a date. It opens a date picker on supporting browsers.

radio : A radio button, allows us to select only one out of multiple choices with same name values.

checkbox : It defines a checkbox. We can select zero or more options of a limited number of choices.

button : A push button with no default behavior. It is empty by default. We have to use the <value> attribute to display something on it.

submit : A button that submits the form data.

reset : It resets all form values to their default values.

color : It opens a color picker and we can choose any color.

file : It allows us to select a file from file explorer. We can use accept attribute to define types of file the control can select.

hidden : It is a control that is not displayed on the document, but the value is submitted to the server.

range : Basically, a slider to select between a range of values, defaulting to the middle value. We use min and max to define the range.

<input> attributes:

autocomplete : It gives us hints to autofill the form except for radio, buttons and checkbox.

value : Initial value of the control or an input field.

name : Name of the form control.

placeholder : A short hint is displayed in the input field. It describes the expected value of the input field.

required : It defines that an input field must be filled out or a control must be selected in order to submit the form.

min and max : It represents the minimum and maximum value of an input field.

minlength and maxlength : It defines the minimum number of characters and the maximum number of characters allowed for an input field.

Example:

HTML Audio and Video

<audio>

This element is used to embed audio content in the document.

Attributes:

• src : The URL or source of the audio to embed.

• muted : The will be initially muted.

• loop : The audio will start playing again after the end.

• autoplay : The audio will start playing automatically without waiting for the audio to finish downloading.

• controls : It allows the user to control the audio playback, like play, pause, volume, and seeking.

<video>

This element is used to embed video content in the document.

Attributes:

• autoplay : The video will start playing automatically.

• autopictureinpicture : The element automatically toggle picture-in-picture mode when the user switches back and forth between this document and another document or application.

• src : The URL or source of the video to embed.

• width and hight : Width and height of the video display area.

• loop : The video will start playing again after the end.

• muted : The audio of the video playback will be initially silenced.

• controls : It allows the user to control the video playback, like play, pause, volume, and seeking.

Example:

Thanks for reading! See you in the next blog. :)