HTML Basics and Fundamentals
Read and know almost all the basic HTML concepts that you need to know as a beginne
This is going to be a long blog but, a very descriptive one. Let us read some of the basic concepts of HTML elements and their applications with examples.
HTML Tags and Elements
Headings
Headings in HTML define titles or subtitles to define the structure of the webpage.
We can see different levels of headings in HTML starting from 1 to 6.
Have a look below -
Paragraphs
A paragraph defines a block of text. It starts on a new line and is a block element. We will see what block-level elements are later. We use the <p> tag to create a paragraph and write the text within the <p> and </p> tags.
Horizontal Rules
We can add a horizontal line with the <hr> element. It is generally used to separate contents in a webpage. Below is an example of the hr element. It is an empty element which doesn't require any closing tag.
We can add as many horizontal lines as we want.
Line Breaks
We use the <br> tag to insert a new line. In HTML, simply pressing the Enter key will take you to the new line in the editor but it won't show any effect in the browser. So, we need to use the <br> tag to get to a new line.
Pre tag
In some cases, we might want to write something in the HTML and would like to display it in the same manner as it was written, for example, a poem. So, if we write it in a paragraph, there won't be any new lines and for putting a new line, we need to enter the br element.
So, to solve this problem, we have an element named as <pre> element. With this element, if we want to display something on the webpage in the way we see it on the HTML document, we can use this element.
Let us see how it works.
Tables
The <table> element in HTML is used to create tables which allows web developers to represent tabular data.
It consists of rows and columns of cells containing data.
Table Rows
The table row, which is written with the <tr> tag, defines a row in an HTML table.
A <tr> element contains one or more <the> or <td> elements.
Table Headers
The table header, which is written within the <th> tags, defines a header cell in an HTML table.
An HTML table has two kinds of cells:-
Header cells, which contain header information and are created with the <th> element.
Data cells, which contain the data and are created with the <td> element.
Table Data
The table data element, which is written within the <td> tags defines a standard data cell in an HTML table.
Let us create a table with the above-discussed concepts.
Rowspan attribute
The rowspan is an attribute in HTML which specifies the number of rows a cell should span that is if a row spans two rows, it means that the row will take up the space of two rows in that table.
In other words, it provides the same functionality as Merge Cells in Microsoft Excel or any other spreadsheet program.
The rowspan attribute can be used with the <th> and <td> elements in an HTML table.
The value of the rowspan attribute is a number which specifies the number of rows that a cell should span. The value must be an integer.
Colspan attribute
The colspan is an attribute in HTML which specifies the number of columns a cell should span that is, if a column span two columns, it means that the column will take up the space of two columns in that table.
In other words, it provides the same functionality as Merge Cells in Microsoft Excel or any other spreadsheet program.
The colspan attribute can be used with the <th> and <td> elements in an HTML table.
The value of the colspan attribute is a number which specifies the number of columns that a cell should span. The value must be an integer.
Now let us look at a table that I have created, in which I have used the rowspan and the colspan attributes -
Inline Frame
The Inline Frame is also called iFrame. The <iframe> tag defines a rectangular area within the document in which the browser allows developers to display a separate document. It is used to embed another document within the current HTML document.
In other words, the iframe is basically used to show a webpage inside the current webpage. The src attribute is used to specify the URL of the document that occupies the frame.
A common example is that we have seen many web pages where there are a lot of youtube videos on different webpages. When we click on the play button of the video, it actually plays on Youtube instead of any different video player. That video is actually embedded in that webpage by the developer.
I have created a table and inserted iframe. This table will make you more clear about iframe.
Audio and Video in HTML
Audio
The audio element is used to embed sound content or audio files in HTML documents.
We need to put the source of the audio file with the src attribute. But, if we only use the <audio> tags and put the source of the audio file, we will still not be able to see anything on the browser. The audio file will be loaded but there won't be anything visible.
For playing the audio and controlling the audio file, we need to put another attribute with the audio tag. Let us see some useful attributes of the audio tag.
controls
The controls attribute allows the user to see the controls offered by the browser to control audio playback, control the volume, seek, and pause or resume the playback.
muted
The muted attribute mutes the audio by default when the page loads. This is applied because some users do not want the audio to be played automatically when the page loads. So, with the muted attribute, the audio won't play when the browser loads the page and allows the user to unmute and listen to the audio.
The text between the <audio> tags will only be displayed in browsers that do not support the audio element.
Video
The video element allows the developer to embed a media player which supports video playback in the document such as a movie clip or music video or tutorial or any other video stream.
The video tag needs the src attribute to get the source of the video file. The source can be a file in the local storage or the link of a video on the web. The text between the <video> tags will only be displayed in browsers that do not support the video element.
I cannot show you the applications of the <audio> and the <video> tags here.
So, I am attaching two links for the audio and the video elements.
Click here to check out the audio element.
Click here to check out the video element.
Remember:
The autoplay doesn't work with some browsers if the audio or video is not muted.
Because browsers have now become smarter and know that if the audio or video is unmuted, auto-playing the audio/video might cause a bad user experience.
So, the autoplay works when the muted attribute is applied to the audio/video as it knows that playing the video without the audio might not give the user an unpleasant experience.
Emojis in HTML
Let us understand what emojis are.
Emojis are letters or characters from the UTF-8 (Unicode) character set. They look like images or icons, but they are not.
UTF-8 covers almost all of the characters and symbols in the world.
In order to display an HTML page correctly, a web browser must know the character set used in the page and this is specified in the meta tag, with the charset attribute and the value of it as UTF-8. If we don't specify the meta characterset, UTF-8 is the default character set in HTML.
If you know what ASCII codes are, then we can understand the UTF-8 better. If you don't understand ASCII, please read about it once.
UTF-8 is a method of encoding Unicode that also begins with the complete ASCII range. So, ASCII is a subset of Unicode as well as a subset of UTF-8
UTF-8 Characters
Many UTF-8 characters cannot be typed on a keyboard, but they can always be displayed using numbers (called entity numbers):
- A is 65
- B is 66
- C is 67 To let the browser understand that we want to display a character, we must start the entity number with &# and end it with ; (semicolon).
Emoji Characters
Here is an example of the codes for different emojis which need to be written starting with the &# and ending with the ;.
- 😄 is 128516
- 😍 is 128525
- 💗 is 128151
Since the emojis are also characters, they can also be copied, pasted, displayed and sized just like any other character in HTML.
Text Formatting in HTML
Bold and Strong elements
The bold and the strong elements look the same when applied to any text in HTML. But, they don't have the same significance. Let us understand it more elaborately.
The bold element, which is written with the <b> tag just makes the text look bold and draws attention. It just functions visually and doesn't have any more significance than this. It is just used for styling which we can do better with CSS and are supposed to do all the styling with CSS only.
The strong element, which is written with the <strong> tag, on the other hand, has a semantic function. It looks the same as the bold element visually, but it tells the browser that the text labelled as strong has strong importance. It also helps in accessibility for visually impaired people.
Italics and Emphasis elements
The italic element which is written with the <i> tag again works just like the b element. The <i> element doesn't have any significance other than styling texts in italics.
The emphasis element, which is written with the <em> tag, on the other hand, has a semantic function like the strong tag. It is used to define emphasized text. The content inside the <em> tag is displayed in italic by default.
Underline and Insert elements
The underline element, which is written within the <u> tags, has been deprecated and is discouraged to use for underlining texts. We should use CSS for underlining texts.
The insert element, which is written with the <ins> tag, defines that the text enclosed within the <ins> tags have been inserted into a document. It underlines the text within the ins tags but it is a semantic tag and is not just used for underlining texts.
Small element
The small element makes the text smaller relative to the size it was before using the tag. It generally represents side comments and small print, like copyright and legal text.
Example -
Big element
The big element makes the text larger relative to the size it was before using the tag. This is actually deprecated and is not encouraged to use in HTML as we do the styling of texts with CSS. But, for information, I have put it along with the explanation of the small element.
Example -
Mark element
The mark element defines that the text written with the mark tags should be marked or highlighted. Again, we don't need to do this with the mark element rather we can use span in CSS for highlighting or marking texts.
Example -
Delete element
The delete element, which is written within the <del> tags, defines that the text has been deleted from a document. The browser strikes a line through the texts enclosed within the <del> tags. This is a semantic tag and should not be used for styling purposes such as strikethrough a text.
Example-
Subscript element
The subscript element, which is written within the <sub> tags, specifies the text enclosed within the <sub> tags should be displayed as subscript and should only be used for typographical reasons only rather than styling or appearance purposes.
Example-
Superscript element
The superscript element, which is written within the <sup> tags, specifies the text enclosed within the <sup> tags should be displayed as superscript and should only be used for typographical reasons only rather than styling or appearance purposes.
Example-
Block Quotation element
The blockquote tag in HTML is used to display long quotations that is, a section which is quoted from another source. It changes the alignment of the text enclosed within the <blockquote> tags to make it unique from others. It contains both opening and closing tags. We can use elements like headings, lists, paragraphs and others inside the <blockquote> tag.
It has an attribute called cite which is used to specify the source of the quotation. The value of the cite attribute is URL which specifies the source of the quotation.
There are two possible values of the URL :
- absolute URL : It points to another website.
- relative URL : It points to a file within a website.
Example-
Inline Quotation element
The inline quotation element, which is written by using the <q> tag, indicates that the enclosed text is a short inline quotation.
Most modern browsers implement this by surrounding the text in quotation marks. This element is actually used for short quotations only that don't require paragraph breaks; for long quotations, we should use the blockquote element.
Example -
Address element
The address element, which is written within the <address> tags, defines the contact information of the author or the owner of a document or an article.
The contact information can be an email address, URL, physical address, phone number, social media handle etc.
The text in the address element usually renders in italic, and browsers will always add a line break before and after the address element.
Example -
Cite element
The cite element, which is written within the <cite> tags, is used to define the title of a work.
It displays the text in italics.
Example -
Bi-Directional Override (bdo)
The Bi-directional Override (bdo) element overrides the current direction of the text written so that the text within the <bdo> tags is rendered in a different direction.
Example -
HTML Forms
HTML Forms
Form in HTML is an element which creates a document with interactive controls, where the user needs to input the required data and submit it so that the developer or organisation can collect the required data from the user.
Everything in a form is actually an input element of different types.
Form Attributes
The HTML Form has different attributes. Let us understand them.
Target attribute
The target attribute specifies where to display the response which is received after the user submits the form.
The target attribute can have any of the following values -
- _blank = The response is displayed in a new window or tab. We cannot set this to open in a new tab or a window as this depends on the browser settings of the user.
- _self = The response is displayed in the current window.
Autocomplete attribute
The autocomplete attribute specifies whether a form should have the autocomplete feature on or off.
When autocomplete is on, the browser automatically fills up the fields based on the values that the user has entered before.
Form Elements
Below are the following HTML form elements:-
- label: It defines the label for the form elements.
- input: It is used to get the input data from the form entered by the user in various types like text, password, email, address etc. by changing the input type.
- button: It defines a clickable button to execute a functionality or to control other elements.
- select: It is used to create a drop-down menu.
- textarea: It is used to get the input of long text content.
- fieldset: It is used to draw a box around other form elements and group the related data.
- legend: It defines a caption for fieldset elements
- datalist: It is used to specify pre-defined list options for input controls.
- output: It is used to display the output of performed calculations.
- option: It is used to define options in a drop-down list.
- optgroup: It is used to define group-related options in a drop-down list.
HTML Input types
Text
The text input type defines a single-line text input field.
Example-
Password
The password input type defines a password field. When the user enters something in the password field, the characters are not visible, instead we can see when the user enters something, it appears in * (asterisk) or • (bullet) form.
Example -
Submit
The submit input type defines a button for submitting form data to a form handler.
This is different from creating a button and labelling it as submitted. The submit input type has the default functionality of submitting the form.
The submit input type has an attribute value which shows the text on the button. If we omit the submit button's value attribute, the button will get a default text like Submit or Submit Query.
Example-
Reset
The reset input type defines a reset button that will reset all form values to their default values.
Example-
Radio
The radio input type is generally used in radio groups which is a collection of radio buttons describing a set of related operations.
With the radio button, the user can select only one of a limited number of choices.
Radio buttons are small circles which are filled or highlighted when selected.
Example -
Checkbox
We have already seen checkboxes in many official government forms or other forms as well.
Checkboxes are similar to radio buttons but, checkboxes are rendered by default as boxes that are ticked or checked when selected.
In some browsers, it might appear as a square and in some other browsers, it might have rounded corners.
Example -
Note: The value attribute defines the unique value associated with each radio button. The value is not shown to the user, but is the value that is sent to the server on "submit" to identify which radio button that was selected.
Button
The button input type creates a simple push button, which can be programmed by the developer to control custom functionality anywhere on a webpage.
Example -
Note:
The text written in the button comes from the value attribute of the input tag.
Even though the button input type is still valid to use in HTML but, the newer button element is now the favoured way to create a button. We can insert text between the opening and closing button tags, we can also insert images inside the button element.
Color
The color input type is used for input fields that should contain a colour. Depending on the browser support, a colour picker will show up in the input field.
Example -
NOTE : The default value for the color input type is black If we want to give a specific colour, we can use the value attribute and specify the colour code in the value.
Example -
Date
The date input type creates an input field that lets the user enter a date, either with a textbox that validates the input or a special date picker interface depending on the browser support.
Example -
Note: We can set the maximum and minimum limit of the date for the user to choose with the max and the min attributes.
Example -
Datetime-local
The Datetime-local input type creates a date and time input field with no time zone. A date picker interface will show up in the input field depending on the browser support.
Example -
Time
The time input type creates a time input field designed to let the user easily enter a time with hours and minutes, and seconds optionally.
The UI of the control varies from browser to browser. It will be different in chrome, firefox and safari.
Example -
URL
The URL input type is used for creating an input field that should contain a URL address only.
The URL field can be automatically validated when submitted, depending on browser support.
Example -
Range
The range input type creates a slider control. It is used for entering a number whose exact value is not important.
The default range in 0 to 100. But, we can customise the limit with the max, min, and step attributes.
Example -
Image
The image input type creates an image as a submit button.
The path to the image is specified in the src attribute.
Example -
Tel
The tel input type is used to create a field for entering a telephone number.
Example -
The email input type is used to create an input field that should contain only an e-mail address.
The e-mail address can be automatically validated when submitted depending on the browser support.
Example -
File
The file input type creates a file-select field and a Browse button for file uploads from the users' device storage. The file can be uploaded to a server with form submission or with JS manipulation.
Example -
Hidden
The hidden input type creates a hidden input field which is not visible to the user when the form is submitted.
Hidden inputs are completely invisible on the rendered page, and there is no way to make them visible in the page's content.
The developer sends the unique or secured information of the hidden input to the server through the value attribute.
For example- I can pass the customer's unique ID or serial number to the server without the knowledge of the user.
List of attributes with a brief description -
- type: The type attribute is used to specify the type of the input element. Its default value is text.
- value: The value attribute is used to specify the value of the input element.
- placeholder: Placeholder attribute is used to specify a hint that describes the expected value of an input field.
- name: The name attribute is used to specify the name of the input element.
- alt: The alt attribute is used to provide alternate text for the user if they cannot view the image.
- autofocus: The autofocus attribute specifies that an element should automatically get focused when the page loads.
- checked: The checked attribute specifies that an element should be pre-selected (checked) when the page loads. The checked attribute can be used with input type= ”checkbox” and input type= ”radio”.
- disabled: The disabled attribute specifies that the element should be disabled. The disabled attribute can be set to keep a user from using the input element until some other condition has been met.
- form: The form attribute is used to specify one or more forms to which the input element belongs to.
- max: The max attribute is used to specify the maximum value for an input element.
- required: The required attribute specifies that an input field must be filled out before submitting the form.
- readonly: The read-only attribute specifies that an input field is read-only. A read-only input field cannot be modified. A form will still submit an input field that is read-only, but will not submit an input field that is disabled.
- accept: This property is used to specify the types of files that the server accepts.
- align: This property is used to specify the alignment of an image input.
- autocomplete: This property is used to specify whether an input element should have the autocomplete feature enabled.
- dirname: This property is used to specify that the text direction will be submitted.
- formaction: This property is used to specify the URL of the file that will process the input control when the form is submitted (for type= ”submit” and type= ”image”)
- formenctype: This property is used to specify how the form data should be encoded when submitting it to the server (for type= ”submit” and type= ”image”)
- formmethod: This property is used to define the HTTP method for sending data to the action URL (for type= ”submit” and type= ”image”)
- formnovalidate: This property is used to define that form elements should not be validated when submitted
- formtarget: This property is used to specify where to display the response that is received after submitting the form (for type= ”submit” and type= ”image”)
- height: This property is used to specify the height of an input element (only for type= ”image”)
- list: This property is used to identify a list of pre-defined options for an element to suggest to the user.
- maxlength: This property is used to specify the maximum number of characters allowed in an input element
- min: This property is used to specify a minimum value for an input element
- multiple: This property is used to specify that a user can enter more than one value in an input element
- pattern: This property is used to specify a regular expression that an input element’s value is checked against
- size: This property is used to specify the width, in characters, of an input element
- src: This property is used to specify the URL of the image to use as a submit button (only for type= ”image”)
- step: This property is used to specify the legal number intervals for an input field
- width: This property is used to specify the width of an input element (only for type= ”image”)
Thank You for reading the article 😇😊
