DEVELOPER UPDATES
HTML IMPORTANT
NOTES
QUICK AND EASY TO REMEMBER NOTES
Sold to
[email protected]
HTML NOTES - HTML DOCUMENT STRUCTURE
HTML Document Structure
DEVELOPER UPDATES 01
HTML NOTES - BASIC HTML PAGE TAGS
Basic HTML Page Tags
Tag Description
<!DOCTYPE html> It is used to tell the browser the type of document.
<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
<body> <body> contains all content of HTML document that is shown
to the user
<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>.
DEVELOPER UPDATES 02
HTML NOTES - HTML TEXT FORMATTING
HTML Text Formatting
Tag Description
<h?>Heading<h?> Used to insert headings, h1(Largest) to h6 (Smallest)
<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:
DEVELOPER UPDATES 03
HTML NOTES - HTML TEXT FORMATTING
DEVELOPER UPDATES 04
HTML NOTES - HTML TEXT FORMATTING
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
DEVELOPER UPDATES 05
HTML NOTES - HTML TABLE
Table Example
Output:
DEVELOPER UPDATES 06
HTML NOTES - HTML IMAGES
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 Description
src Used to specify the path of image file
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:
DEVELOPER UPDATES 07
HTML NOTES - HTML LINKS
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.
Anchor tag attr Description
href Used to specify the link
target Used to specify where link should be open, Value = _blank,
_parent, _self, _top
download Used to specify the target file if you want to add download file
feature
DEVELOPER UPDATES 08
HTML NOTES - HTML LISTS
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 Description
<ol> To insert ordered list in the web page
<ul> To insert unordered list in the web page
<dl> To insert description list in the web page, It is arranged in key
value pair
In above example <li> is used to insert a list item, <dt> means data
term(key) and <dd> data description(value).
DEVELOPER UPDATES 09
HTML NOTES - HTML LISTS
HTML Lists Output
DEVELOPER UPDATES 10
HTML NOTES - HTML FORM
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.
Attributes Description
name This attribute defines name of the form, it should be unique
action Path to backend script, which process the data
method Used to set HTTP method to submit data to the backend,
There are 2 types of HTTP methods: GET and POST
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
DEVELOPER UPDATES 11
HTML NOTES - HTML FORM
Text Fields
Type Description
text Used to accept single line text data
password Used to accept password
Text Fields Attributes
Attribute Description
type Type of the text field: text or password
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
Element Description
<textarea> Used to define multiple line text field to accept the data like
user address and description of the product
Multi-Line Text Field Attributes
Attribute Description
name Used to set name of the field
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
DEVELOPER UPDATES 12
HTML NOTES - HTML FORM
Form Text Field Example
Output:
DEVELOPER UPDATES 13
HTML NOTES - HTML FORM
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
Attribute Description
type Type of the button, Value for this attribute will be button
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
Attribute Description
type Used to set type of the input, its value will be checkbox
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
value To set the value of the checkbox, Like if you are adding field to
choose your favourite food the value will be food name
checked To set if checkbox is checked or not, If you add this attribute
in the element checkbox will be selected by default
DEVELOPER UPDATES 14
HTML NOTES - HTML FORM
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
Attribute Description
type Used to set type of the input, its value will be radio
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.
DEVELOPER UPDATES 15
HTML NOTES - HTML FORM
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.
DEVELOPER UPDATES 16
HTML NOTES - HTML FORM
Form Fields Example
DEVELOPER UPDATES 17
HTML NOTES - HTML5 NEW INPUT ELEMENTS
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 Description
date To allow user to select date from drop-down calendar
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 Used to set
addtype
URLof
field
the input, its value will be radio
DEVELOPER UPDATES 18
HTML NOTES - HTML5 NEW INPUT ELEMENTS
Output
Comment in HTML
To comment the code in html the following syntax is used.
DEVELOPER UPDATES 19
HTML NOTES - HTML LAYOUT
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 Description
<div> This is most used tag for designing HTML pages, This is
container for HTML elements. Using div we can divide the
HTML pages into different blocks and add style to each div.
<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
DEVELOPER UPDATES 20
HTML NOTES - HTML LAYOUT EXAMPLE
HTML Layout Example
DEVELOPER UPDATES 21
HTML NOTES - VIDEO IN HTML PAGE
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.
DEVELOPER UPDATES 22
HTML NOTES - AUDIO IN HTML PAGE
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.
DEVELOPER UPDATES 23
HTML NOTES - ADDING CSS TO HTML
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:
Way Description
External To add external CSS file using <link> tag
Internal To add CSS in HTML page in the head section using <style> tag
Inline To add css inside HTML tag using style attribute
DEVELOPER UPDATES 24
HTML NOTES - ADDING CSS TO HTML
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.
DEVELOPER UPDATES 25
Thank You!
Follow our channels on Instagram to get daily updates and learn
something new:
@richwebdeveloper
@new_javascript
@developerupdates
www.developerupdates.com @developerupdates
