1
HTML Document Structure
Basic HTML Page Tags
Tag
<!DOCTYPE html>
<html> This tag is container for all other HTML tags.
<head> Tag to define the head portion of the document.
<title> It is used to set title of the document shown on the browser's
tab
<p> <p> is used to define the paragraph
*Note: In HTML every tag must have an end tag, For Example, if you are inserting a
paragraph with <p> it should have an end tag </p>, There are some exception tags that
don't have an end tag like <!DOCTYPE html>, <br>.
HTML Text Formatting
Tag
<b> To make a text bold
<i> To make a text italic
<strong> Used to show important text, makes a text bold
<em> Used to define emphasised text
<mark> Used to highlight the text
<s> To strikethrough the text
<code> Used to insert the source code in the document
<cite> To insert title of creative work like images, audio, video, etc.
<time> Used to insert the date and time
<address> Used to insert the address
<sub> Defines subscript text
<sup> Defines superscript text
<blockquote> Block Quote an element from another source within a
document
<pre> Defines pre formated text
HTML Text Formatting Example
The below is code demonstrates how to use HTML text formatting tags:
Output
HTML Tables Tags
Tag Description
<table> Define a table
<thead> Used to group table header content
<tbody> Container for table content
<th> To insert header cell within row
<tr> To Insert a row within table
<td> To insert a table cell within row
Table Example
Output:
HTML Images
Images make websites beautiful and easy to process information. To add
images to HTML pages <img> tag is used, img tag has the following
important attributes that are needed to format an image.
Image Attributes
alt Used to show an alternative name to the image if the image is
not loaded and helpful for Search Engine Optimization.
height Used to specify the height of the image
width Used to specify the width of the image
Output:
HTML Links
HTML links are a powerful way to allow seamless navigation of pages on
your website. When a user clicks on the link, the browser automatically
follows it and loads the link URL.
To insert the links in the webpage we have to use the <a> tag. Following
are the important attributes that are required to insert the links.
target Used to specify where link should be open, Value = _blank,
_parent, _self, _top
HTML Lists
Using HTML it's possible to display information in a list. This makes it easier
to understand the data. HTML provides 3 ways to specify the information.
List Type
<ul> To insert unordered list in the web page
In above example <li> is used to insert a list item, <dt> means data
term(key) and <dd> data description(value).
HTML Lists Output
HTML Forms
Suppose your client or boss told you to design a webpage that takes input
from the user. In that scenario, you will need to add a form to the
webpage.
To add the form to the webpage we have to use the <form> element.
Following are the attributes used for the form tag.
action Path to backend script, which process the data
enctype Used to define how browser should encode the data before
sending it to the server, Values for this attributes are:
application/x-www-form-urlencoded: The default value.
multipart/form-data: If form contains input type file then
this tag is used
text/plain: Introduced in HTML5 for debugging.
Form Field Types
Text Fields
Buttons
Checkbox
Radiobox
Select options control
File select
Hidden inputs
Labels
Text Fields
password Used to accept password
Text Fields Attributes
name Name of the text field, It should be unique
id Id of the text field, It should be unique
size Width of the text fields in terms of characters
Multi-Line Text Field
Multi-Line Text Field Attributes
id Used to set the id of the field
rows Used to set number of rows for text area input
cols Used to set number of columns for text area input
Form Text Field Example
Output:
Buttons
If you want to add buttons in the form like Submit, Save, Update and
Cancel, You will need to use <button> tag to add the button in the form.
Button Attributes
name To define the name of the button
id To define the id of the button
onClick Javascript function to be called when user clicks on the
button
Checkbox
If you want to add feature of the selecting the multiple options like your
favourite subjects, your favourite food, place would you like to travel then
checkbox field is used in the form. For grouping checkbox there should be
same name for all checkbox.
Checkbox Attributes
name To define the name of the checkbox
id To define the id of the checkbox
onChange Javascript function to be called when user checks or uncheck
the checkbox
checked To set if checkbox is checked or not, If you add this attribute
in the element checkbox will be selected by default
Radio Button
If you want to give the option to select only one field from the multiple
options available to the user then the radio button is used.
For example, there will be multiple genders but we allow users to select
only one gender. For grouping radio buttons there should be same name
for all checkbox.
Radio Button Attributes
name To define the name of the radio button
id To define the id of the radio button
onChange Javascript function to be called when user checks or uncheck
the radio button
value To set the value of the radio button
checked To set if the radio button is checked or not, If you add this
attribute in the element radio button will be selected by
default
Select Option Control
If you have a long list of options and you have to allow select only one
option then there you will use select input type instead of showing a lot of
radio buttons.
For example, suppose you want to add a list of the cities to select user city,
then you will choose select form control instead of radio buttons.
File Input
If you want to add file upload feature then file input is used, For example
suppose you have to add the feature of setting profile pic of the user then you
will have to use file input type.
While adding file input control, never forget to set encytype =
"multipart/form-data" attribute in the form element.
Hidden Inputs
If you want to add/set the value in the form that can be used later or can be
sent to the server without showing it to the user at that time hidden fields are
used.
For example, You will need a user id for front-end operation but you don't
have to show the user id to the user then you will have to use a hidden input
field.
Form Labels
In the above form example, we set the input field name in plain text format,
like name, and password, But there is a better option to set a label for the
input field in the form.
We can use <label> to set a label for the input field, So when users click on the
label the form field automatically gets selected. and we can format that label
text. For this feature we will have to set "for" attribute in the label and it
should match with input field id.
Form Fields Example
HTML5 New Input Elements
In the updated version of HTML5, they introduced new tags that are very
useful for web developers and make web developers work easy. Below are the
new input type attributes:
Input Attribute
DateTime To allow user to select date and time at same time
time To allow user to select the time
email Used to add email field
tel Used to add phone number field
color Used to add color picker to select color
number Used to add number field that accepts integer and number
range Used to add range slider
url addtype
Used to set URLof
field
the input, its value will be radio
Output
Comment in HTML
To comment the code in html the following syntax is used.
HTML Layout
In the above examples, we created HTML pages without structuring pages
well. To make a good website experience for the user HTML provides elements
to design an HTML layout to make a website look awesome.
In the very first we have seen the structure of the HTML webpage, Here we will
go through all tags with example
Tag
<section> This tag allows us to divide page in sections
<p> This tag allows us to define paragraph
<header> This tag allows us to add header in the webpage
<footer> This tag allows us to add footer in the webpage
<aside> The HTML aside tag identifies content that is not essential to
the page and should be displayed in a separate box or beside
the main content.
<hr> This tag is used to add horizontal line between two elements
<br> This tag is used to add line break
HTML Layout Example
Video in HTML Page
If you want to add video in HTML page, we can do this using <video> tag, Let's
see an example of adding video in the webpage.
The control attributes add video controls like play, pause, and volume. width
and height are used to define video width and height. source allows us to
specify video files we can add alternative files using this tag.
To add the autoplay feature, add the "autoplay" attribute in the audio tag.
Audio in HTML Page
If you want to add audio in HTML page, we can do this using <audio> tag, Let's
see an example of adding audio in the webpage.
The control attributes add audio controls like play, pause, and volume. source
allows us to specify audio files we can add alternative files using this tag.
To add the autoplay feature, add the "autoplay" attribute in the audio tag.
Adding CSS to HTML
The Cascading Style Sheets (CSS) is a code that is used to format the layout of
your website or web page. It can be used in conjunction with HTML to style
your website.
CSS helps you make changes to the appearance of elements within a web
page such as the text, fonts, colors, images, and spacing. You can also create
and add custom fonts.
There are 3 ways given below to add CSS to the HTML page:
Internal To add CSS in HTML page in the head section using <style> tag
Inline To add css inside HTML tag using style attribute
Adding JavaScript to HTML
JavaScript is a language that is widely used for creating interactive web pages.
You can add attractive and dynamic elements such as menus, popup
windows, photo galleries, and delivery charges to your site using JavaScript
programming.
JavaScript is executed in the user's web browser so developers use JavaScript
as much possible as they can to make the user experience better.
pg. 26