Scribd
Upload
144 views50 pages

HTML Basics for Beginners

This document provides an overview of HTML elements and tags. It begins with basic HTML introductions and definitions of common elements like <html>, <head>, <body>, <h1>, and <p>. It then covers topics like HTML documents, empty elements, attributes, headings, paragraphs, text formatting, and more. The document is intended as a reference guide for learning HTML syntax and structure.

Uploaded by

nuwahikire elly (ellygotten)
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
144 views50 pages

HTML Basics for Beginners

This document provides an overview of HTML elements and tags. It begins with basic HTML introductions and definitions of common elements like <html>, <head>, <body>, <h1>, and <p>. It then covers topics like HTML documents, empty elements, attributes, headings, paragraphs, text formatting, and more. The document is intended as a reference guide for learning HTML syntax and structure.

Uploaded by

nuwahikire elly (ellygotten)
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 50

HTML SYLBUS

1: HTML Introduction
What is HTML?

 HTML stands for Hyper Text Markup Language


 HTML is the standard markup language for creating Web
pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a
heading", "this is a paragraph", "this is a link", etc.

A Simple HTML Document

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

Example Explained

 The <!DOCTYPE html> declaration defines that this document


is an HTML5 document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the
HTML page
 The <title> element specifies a title for the HTML page
(which is shown in the browser's title bar or in the page's
tab)
 The <body> element defines the document's body, and is a
container for all the visible contents, such as headings,
paragraphs, images, hyperlinks, tables, lists, etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an


end tag:

<tagname> Content goes here... </tagname>

The HTML element is everything from the start tag to the end


tag:

<h1>My First Heading</h1>


<p>My first paragraph.</p>

Web Browsers

The purpose of a web browser (Chrome, Edge, Firefox, Safari) is


to read HTML documents and display them correctly.

A browser does not display the HTML tags, but uses them to
determine how to display the document.

Editors
A simple text editor is all you need to learn HTML.

Text editors Includes, VS Code, Text Edit, Brackets, Notepad, etc


2: HTML DOCUMENTS

All HTML documents must start with a document type


declaration: <!DOCTYPE html>.

The HTML document itself begins with <html> and ends


with </html>.

The visible part of the HTML document is


between <body> and </body>.

Example:

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration represents the document type, and


helps browsers to display web pages correctly.

It must only appear once, at the top of the page (before any
HTML tags).

The <!DOCTYPE> declaration is not case sensitive.

The <!DOCTYPE> declaration for HTML5 is:


<!DOCTYPE html>

3: HTML ELEMENTS
An HTML element is defined by a start tag, some content, and an
end tag.

<tagname>Content goes here...</tagname>

Examples of some HTML elements:

<h1>My First Heading</h1>


<p>My first paragraph.</p>

Example:

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

Example Explained

The <html> element is the root element and it defines the whole


HTML document.

It has a start tag <html> and an end tag </html>.

Then, inside the <html> element there is a <body> element.


The <body> element defines the document's body.

It has a start tag <body> and an end tag </body>.

Then, inside the <body> element there are two other


elements: <h1> and <p>.

The <h1> element defines a heading.

It has a start tag <h1> and an end tag </h1>.

The <p> element defines a paragraph.

It has a start tag <p> and an end tag </p>.

Empty HTML Elements

HTML elements with no content are called empty elements.

The <br> tag defines a line break, and is an empty element


without a closing tag.

Example:

<p>This is a <br> paragraph with a line break.</p>

HTML is Not Case Sensitive

HTML tags are not case sensitive: <P> means the same as <p>.

The HTML standard does not require lowercase tags, but


W3C recommends lowercase in HTML, and demands lowercase
for stricter document types like XHTML.

4: HTML ATTRIBUTES
 All HTML elements can have attributes
 Attributes provide additional information about elements
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs
like: name="value"

The href Attribute

The <a> tag defines a hyperlink. The href attribute


specifies the URL of the page the link goes to.

Example:

<a href="https://www.google.com">Visit Google</a>

The src Attribute


The <img> tag is used to embed an image in an HTML page.
The src attribute specifies the path to the image to be displayed.

Example:

<img src="img_girl.jpg">

There are two ways to specify the URL in the src attribute:

1. Absolute URL - Links to an external image that is hosted on


another website.
Example: src="https://www.w3schools.com/images/img_girl.jpg"
.

Notes: External images might be under copyright. If you do not


get permission to use it, you may be in violation of copyright
laws. In addition, you cannot control external images; it can
suddenly be removed or changed.

2. Relative URL - Links to an image that is hosted within the


website. Here, the URL does not include the domain name. If the
URL begins without a slash, it will be relative to the current page.
Example: src="img_girl.jpg". If the URL begins with a slash, it
will be relative to the domain. Example:
src="/images/img_girl.jpg".

The alt Attribute


The required alt attribute for the <img> tag specifies an alternate
text for an image, if the image for some reason cannot be
displayed. This can be due to a slow connection, or an error in
the src attribute.

Example:

<img src="img_girl.jpg" alt="Girl with a jacket">

The style Attribute


The style attribute is used to add styles to an element,
such as color, font, size, and more.

Example:

<p style="color:red;">This is a red paragraph.</p>

The lang Attribute

You should always include the lang attribute inside


the <html> tag, to declare the language of the Web page. This is
meant to assist search engines and browsers.

The following example specifies English as the language:

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

Country codes can also be added to the language code in


the lang attribute. So, the first two characters define the
language of the HTML page, and the last two characters define
the country.

The following example specifies English as the language and


United States as the country:

<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>

The title Attribute

The title attribute defines some extra information about an


element.

The value of the title attribute will be displayed as a tooltip when


you mouse over the element.

Example:

<p title="I'm a tooltip">This is a paragraph.</p>

5: HTML HEADINGS
HTML headings are titles or subtitles that you want to display on
a webpage.

HTML headings are defined with the <h1> to <h6> tags.


<h1> defines the most important heading. <h6> defines the least
important heading.

Example:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

6: HTML PARAGRAPHS
The HTML <p> element defines a paragraph.

A paragraph always starts on a new line, and browsers


automatically add some white space (a margin) before and after
a paragraph.

Example:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML Horizontal Rules

The <hr> tag defines a thematic break in an HTML page, and is


most often displayed as a horizontal rule.

The <hr> element is used to separate content (or define a


change) in an HTML page.

The <hr> tag is an empty tag, which means that it has no


end tag.
Example:

<h1>This is heading 1</h1>


<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

HTML Line Breaks

The HTML <br> element defines a line break.

Use <br> if you want a line break (a new line) without starting a


new paragraph.

The <br> tag is an empty tag, which means that it has no end


tag.

Example:

<p>This is<br>a paragraph<br>with line breaks.</p>

7: HTML TEXT FORMATTING
Formatting elements were designed to display special types of
text. They include:

 <b> - Bold text


 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Smaller text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text

8: HTML QUOTATION ELEMENTS
In this chapter we will go through
the <blockquote>,<q>, <abbr>, <address> and <bdo> HTML
elements.

<blockquote> for Quotations

The HTML <blockquote> element defines a section that is quoted


from another source.

Browsers usually indent <blockquote> elements.

Example:

<p>Here is a quote from WWF's website:</p>


<blockquote>
For 60 years, WWF has worked to help people and
nature thrive. As the world's leading conservation
organization, WWF works in nearly 100 countries. At
every level, we collaborate with people around the
world to develop and deliver innovative solutions
that protect communities, wildlife, and the places in
which they live.
</blockquote>

<q> for Short Quotations

The HTML <q> tag defines a short quotation.


Browsers normally insert quotation marks around the quotation.

Example:

<p>WWF's goal is to: <q>Build a future where people


live in harmony with nature.</q></p>

<abbr> for Abbreviations

The HTML <abbr> tag defines an abbreviation or an acronym, like


"HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM".

Marking abbreviations can give useful information to browsers,


translation systems and search-engines.

Example:

<p>The <abbr title="World Health
Organization">WHO</abbr> was founded in 1948.</p>

 <address> for Contact Information


The HTML <address> tag defines the contact information for the
author/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:

<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

<bdo> for Bi-Directional Override

BDO stands for Bi-Directional Override.

The HTML <bdo> tag is used to override the current text direction.

Example:

<bdo dir="rtl">This text will be written from right


to left</bdo>

9: HTML COMMENTS
HTML comments are not displayed in the browser, but they can
help document your HTML source code.

With comments you can place notifications and reminders in your


HTML code.

<!-- Write your comments here -->

Example:

<!-- This is a comment -->

<p>This is a paragraph.</p>
<!-- Remember to add more information here -->

10: HTML COLORS
HTML colors are specified with predefined color names, or with
RGB, HEX, HSL, RGBA, or HSLA values.

Example:

<!DOCTYPE html>

<html>

<body>

<h1 style="background-color:Tomato;">Tomato</h1>

<h1 style="background-color:Orange;">Orange</h1>

<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>

<h1 style="background-
color:MediumSeaGreen;">MediumSeaGreen</h1>

<h1 style="background-color:Gray;">Gray</h1>

<h1 style="background-color:SlateBlue;">SlateBlue</h1>

<h1 style="background-color:Violet;">Violet</h1>

<h1 style="background-color:LightGray;">LightGray</h1>

</body>

</html>
Background Color

You can set the background color for HTML elements.

Example:

<h1 style="background-color:DodgerBlue;">Hello
World</h1>
<p style="background-color:Tomato;">Lorem
ipsum...</p>

Text Color

You can set the color of text.

Example:

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

11: HTML Styles - CSS


CSS stands for Cascading Style Sheets.

CSS saves a lot of work. It can control the layout of multiple web
pages all at once.

What is CSS?

Cascading Style Sheets (CSS) is used to format the layout of a


webpage.

With CSS, you can control the color, font, the size of text, the
spacing between elements, how elements are positioned and laid
out, what background images or background colors are to be
used, different displays for different devices and screen sizes, and
much more!

Using CSS

CSS can be added to HTML documents in 3 ways:

 Inline - by using the style attribute inside HTML elements


 Internal - by using a <style> element in the <head> section
 External - by using a <link> element to link to an external
CSS file

The most common way to add CSS, is to keep the styles in


external CSS files. However, in this tutorial we will use inline and
internal styles, because this is easier to demonstrate, and easier
for you to try it yourself.

Inline CSS

An inline CSS is used to apply a unique style to a single HTML


element.

An inline CSS uses the style attribute of an HTML element.

The following example sets the text color of the <h1> element to


blue, and the text color of the <p> element to red.

Example:

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

Internal CSS

An internal CSS is used to define a style for a single HTML page.


An internal CSS is defined in the <head> section of an HTML page,
within a <style> element.

The following example sets the text color of ALL


the <h1> elements (on that page) to blue, and the text color of
ALL the <p> elements to red. In addition, the page will be
displayed with a "powderblue" background color.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

External CSS

An external style sheet is used to define the style for many HTML
pages.

To use an external style sheet, add a link to it in


the <head> section of each HTML page.
The external style sheet can be written in any text editor. The file
must not contain any HTML code, and must be saved with a .css
extension.

CSS Colors, Fonts and Sizes

The CSS color property defines the text color to be used.

The CSS font-family property defines the font to be used.

The CSS font-size property defines the text size to be used.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
p {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

12: HTML LINKS - HYPERLINKS

HTML links are hyperlinks.

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn
into a little hand.

The HTML <a> tag defines a hyperlink. It has the following syntax:

<a href="url">link text</a>

The most important attribute of the <a> element is


the href attribute, which indicates the link's destination.

The link text is the part that will be visible to the reader.

Clicking on the link text, will send the reader to the specified URL
address.

By default, links will appear as follows in all browsers:

 An unvisited link is underlined and blue


 A visited link is underlined and purple
 An active link is underlined and red

13: HTML LINKS - THE TARGET ATTRIBUTE

By default, the linked page will be displayed in the current


browser window. To change this, you must specify another target
for the link.
The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

 _self - Default. Opens the document in the same


window/tab as it was clicked
 _blank - Opens the document in a new window or tab
 _parent - Opens the document in the parent frame
 _top - Opens the document in the full body of the window

Example:

<a href="https://www.google.com/" targe
t="_blank">Visit Google!</a>

14: HTML IMAGES

The HTML <img> tag is used to embed an image in a web page.

Images are not technically inserted into a web page; images are
linked to web pages. The <img> tag creates a holding space for
the referenced image.

The <img> tag is empty, it contains attributes only, and does not


have a closing tag.

The <img> tag has two required attributes:

 src - Specifies the path to the image


 alt - Specifies an alternate text for the image

Image Size - Width and Height


You can use the style attribute to specify the width and height of
an image.

The width and height attributes always define the width and


height of the image in pixels.
<img src="img_girl.jpg" alt="Girl in a
jacket" style="width:500px;height:600px;">

15: HTML FAVICON
A favicon image is displayed to the left of the page title in the
browser tab.

A favicon image is displayed to the left of the page title in the


browser tab.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>My Page Title</title>
  <link rel="icon" type="image/x-icon" href="/images/
favicon.ico">
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

16: HTML TABLES
A table in HTML consists of table cells inside rows and columns.

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

Table Cells

Each table cell is defined by a <td> and a </td> tag.

Everything between <td> and </td> are the content of the table


cell.

Example:

<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
</table>

Table Rows

Each table row starts with a <tr> and ends with a </tr> tag.


Example:

<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

Table Headers

Sometimes you want your cells to be table header cells. In those


cases use the <th> tag instead of the <td> tag.

Example:

<table>
  <tr>
    <th>Person 1</th>
    <th>Person 2</th>
    <th>Person 3</th>
  </tr>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

17: HTML LISTS
Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts


with the <li> tag.

The list items will be marked with bullets (small black circles) by
default.

Example:

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

UNORDERED HTML LIST

An unordered list starts with the <ul> tag. Each list item starts


with the <li> tag.

The list items will be marked with bullets (small black circles) by
default.

Example:
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

HTML Description Lists

HTML also supports description lists.

A description list is a list of terms, with a description of each


term.

The <dl> tag defines the description list, the <dt> tag defines the


term (name), and the <dd> tag describes each term.

Example:

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

18: HTML BLOCK AND INLINE ELEMENTS


Every HTML element has a default display value, depending on
what type of element it is.

There are two display values: block and inline.


Block-level Elements

A block-level element always starts on a new line, and the


browsers automatically add some space (a margin) before and
after the element.

A block-level element always takes up the full width available


(stretches out to the left and right as far as it can).

Two commonly used block elements are: <p> and <div>.

The <p> element defines a paragraph in an HTML document.

The <div> element defines a division or a section in an HTML


document.

Example:

<p>Hello World</p>
<div>Hello World</div>

Here are the block-level elements in HTML:

<address>,<article>,<aside>,<blockquote>,<canvas>,<dd>,<div>
,<dl>,<dt>,<fieldset>,<figcaption>,<figure>,<footer>,<form>,
<h1>-
<h6>,<header>,<hr>,<li>,<main>,<nav>,<noscript>,<ol>,<p>,<pr
e>,<section>,<table>,<tfoot>,<ul>,<video>

Inline Elements

An inline element does not start on a new line.

An inline element only takes up as much width as necessary.


This is  a <span> element inside  a paragraph.

<span>Hello World</span>

Here are the inline elements in HTML:

<a>,<abbr>,<acronym>,<b>,<bdo>,<big>,<br>,<button>,<c
ite>,<code>,<dfn>,<em>,<i>,<img>,<input>,<kbd>,<label
>,<map>,<object>,<output>,<q>,<samp>,<script>,<select
>,<small>,<span>,<strong>,<sub>,<sup>,<textarea>,<tim
e>,<tt>
The <div> Element

The <div> element is often used as a container for other HTML


elements.

The <div> element has no required attributes,


but style, class and id are common.

When used together with CSS, the <div> element can be used to


style blocks of content.

Example:

<div style="background-
color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>London is the capital city of England. It is the
most populous city in the United Kingdom, with a
metropolitan area of over 13 million inhabitants.</p>
</div>

19: HTML IFRAMES
An HTML iframe is used to display a web page within a web page.

The HTML <iframe> tag specifies an inline frame.

An inline frame is used to embed another document


within the current HTML document.

Example:

<iframe src="url" title="description"></iframe>

Iframe - Set Height and Width

Use the height and width attributes to specify the size of the


iframe.

The height and width are specified in pixels by default.

<iframe src="demo_iframe.htm" height="200" width="300
" title="Iframe Example"></iframe>

Iframe - Remove the Border

An iframe can be used as the target frame for a link.

The target attribute of the link must refer to the name attribute of


the iframe.

Example:

<iframe src="demo_iframe.htm" name="iframe_a" title="
Iframe Example"></iframe>

<p><a href="https://www.w3schools.com" target="iframe
_a">W3Schools.com</a></p>
20: THE HTML <SCRIPT> TAG

The HTML <script> tag is used to define a client-side script


(JavaScript).

The <script> element either contains script statements, or it


points to an external script file through the src attribute.

Common uses for JavaScript are image manipulation, form


validation, and dynamic changes of content.

To select an HTML element, JavaScript most often uses


the document.getElementById() method.

This JavaScript example writes "Hello JavaScript!" into an HTML


element with id="demo".

Example:

<script>
document.getElementById("demo").innerHTML = "Hello
JavaScript!";
</script>

21: HTML - THE HEAD ELEMENT


The HTML <head> element is a container for the following
elements: <title>, <style>, <meta>, <link>, <script>.

The HTML <head> Element

The <head> element is a container for metadata (data about data)


and is placed between the <html> tag and the <body> tag.

HTML metadata is data about the HTML document. Metadata is


not displayed.
Metadata typically define the document title, character set,
styles, scripts, and other meta information.

The HTML <title> Element

The <title> element defines the title of the document. The title


must be text-only, and it is shown in the browser's title bar or in
the page's tab.

The <title> element is required in HTML documents!

The content of a page title is very important for search engine


optimization (SEO)! The page title is used by search engine
algorithms to decide the order when listing pages in search
results.

The <title> element:

 defines a title in the browser toolbar


 provides a title for the page when it is added to favorites
 displays a title for the page in search engine-results

So, try to make the title as accurate and meaningful as possible!

Example:

<!DOCTYPE html>
<html>
<head>
  <title>A Meaningful Page Title</title>
</head>
<body>

The content of the document......


</body>
</html>

The HTML <link> Element

The <link> element defines the relationship between the


current document and an external resource.

The <link> tag is most often used to link to external style


sheets.
<link rel="stylesheet" href="mystyle.css">

The HTML <meta> Element

The <meta> element is typically used to specify the character set,


page description, keywords, author of the document, and
viewport settings.

The metadata will not be displayed on the page, but is used by


browsers (how to display content or reload page), by search
engines (keywords), and other web services.

Example:

<meta charset="UTF-8">
<meta name="description" content="Free Web
tutorials">
<meta name="keywords" content="HTML, CSS,
JavaScript">
<meta name="author" content="John Doe">
Setting The Viewport

The viewport is the user's visible area of a web page. It varies


with the device - it will be smaller on a mobile phone than on a
computer screen.

You should include the following <meta> element in all your web


pages:

<meta name="viewport" content="width=device-width, initial-
scale=1.0">

This gives the browser instructions on how to control the page's


dimensions and scaling.

The width=device-width part sets the width of the page to follow


the screen-width of the device (which will vary depending on the
device).

The initial-scale=1.0 part sets the initial zoom level when the


page is first loaded by the browser.

Here is an example of a web page without the viewport meta tag,


and the same web page with the viewport meta tag.

22: HTML LAYOUT ELEMENTS AND TECHNIQUES


Websites often display content in multiple columns (like a
magazine or a newspaper).

HTML Layout Elements

 <header> - Defines a header for a document or a section


 <nav> - Defines a set of navigation links
 <section> - Defines a section in a document
 <article> - Defines an independent, self-contained content
 <aside> - Defines content aside from the content (like a
sidebar)
 <footer> - Defines a footer for a document or a section
 <details> - Defines additional details that the user can open
and close on demand
 <summary> - Defines a heading for the <details> element

23: HTML FORMS
An HTML form is used to collect user input. The user input is most
often sent to a server for processing.

The <form> Element

The HTML <form> element is used to create an HTML form for user


input.
The <form> element is a container for different types of input
elements, such as: text fields, checkboxes, radio buttons, submit
buttons, etc.

The <input> Element

The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending


on the type attribute.

Examples:

The <input type="text"> defines a single-line input field for text


input.

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>
The <label> Element

Notice the use of the <label> element in the example above.

The <label> tag defines a label for many form elements.

The <label> element is useful for screen-reader users, because


the screen-reader will read out loud the label when the user focus
on the input element.

The <label> element also help users who have difficulty clicking


on very small regions (such as radio buttons or checkboxes) -
because when the user clicks the text within the <label> element,
it toggles the radio button/checkbox.

The for attribute of the <label> tag should be equal to


the id attribute of the <input> element to bind them together.

Radio Buttons

The <input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of


choices.

Example:

<p>Choose your favorite Web language:</p>

<form>
  <input type="radio" id="html" name="fav_language" v
alue="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" va
lue="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_langu
age" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>

Checkboxes

The <input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited


number of choices.

Example:

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1
" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2
" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3
" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>

The Name Attribute for <input>

Notice that each input field must have a name attribute to be


submitted.

If the name attribute is omitted, the value of the input field will not


be sent at all.
Example:

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" value="John"><br><br>
  <input type="submit" value="Submit">
</form>

24: HTML FORM ATTRIBUTES


The Action Attribute

The action attribute defines the action to be performed when the


form is submitted.

Usually, the form data is sent to a file on the server when the
user clicks on the submit button.

In the example below, the form data is sent to a file called


"action_page.php". This file contains a server-side script that
handles the form data.

Example:

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="J
ohn"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="D
oe"><br><br>
  <input type="submit" value="Submit">
</form>
Tip: If the action attribute is omitted, the action is set to the
current page.

The Target Attribute

The target attribute specifies where to display the response that


is received after submitting the form.

The target attribute can have one of the following values:

_blank - The response is displayed in a new window or


tab

_self - The response is displayed in the current window

_parent - The response is displayed in the parent frame

_top - The response is displayed in the full body of the


window.

Example:

<form action="/action_page.php" target="_blank">

The Method Attribute

The method attribute specifies the HTTP method to be used when


submitting the form data.

The form-data can be sent as URL variables (with method="get")


or as HTTP post transaction (with method="post").

The default HTTP method when submitting form data is GET. 

<form action="/action_page.php" method="get">

<form action="/action_page.php" method="post">
Notes on GET:

 Appends the form data to the URL, in name/value pairs


 NEVER use GET to send sensitive data! (the submitted form
data is visible in the URL!)
 The length of a URL is limited (2048 characters)
 Useful for form submissions where a user wants to
bookmark the result
 GET is good for non-secure data, like query strings in Google

Notes on POST:

 Appends the form data inside the body of the HTTP request
(the submitted form data is not shown in the URL)
 POST has no size limitations, and can be used to send large
amounts of data.
 Form submissions with POST cannot be bookmarked

25: HTML FORM ELEMENTS


The HTML <form> element can contain one or more of the
following form elements:

 <input>
 <label>
 <select>
 <textarea>
 <button>
 <fieldset>
 <legend>
 <datalist>
 <output>
 <option>
 <optgroup>
The <label> Element

The <label> element defines a label for several form elements.

The <label> element is useful for screen-reader users, because


the screen-reader will read out loud the label when the user focus
on the input element.

The <label> element also help users who have difficulty clicking


on very small regions (such as radio buttons or checkboxes) -
because when the user clicks the text within the <label> element,
it toggles the radio button/checkbox.

The for attribute of the <label> tag should be equal to


the id attribute of the <input> element to bind them together.

The <select> Element

Example:
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

The <option> elements defines an option that can be selected.

By default, the first item in the drop-down list is selected.

To define a pre-selected option, add the selected attribute to the


option.
The <textarea> Element

The <textarea> element defines a multi-line input field (a text


area):

The rows attribute specifies the visible number of lines in a text


area.

The cols attribute specifies the visible width of a text area.

The <fieldset> and <legend> Elements

The <fieldset> element is used to group related data in a form.

The <legend> element defines a caption for


the <fieldset> element.

Example:

<form action="/action_page.php">
  <fieldset>
    <legend>Personalia:</legend>
    <label for="fname">First
name:</label><br>
    <input type="text" id="fname" name="fna
me" value="John"><br>
    <label for="lname">Last
name:</label><br>
    <input type="text" id="lname" name="lna
me" value="Doe"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

The <datalist> Element

The <datalist> element specifies a list of pre-defined options for


an <input> element.

Users will see a drop-down list of the pre-defined options as they


input data.

The list attribute of the <input> element, must refer to


the id attribute of the <datalist> element.

Example:

<form action="/action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>

26: HTML INPUT TYPES


Here are the different input types you can use in HTML:

 <input type="button">
 <input type="checkbox">
 <input type="color">
 <input type="date">
 <input type="datetime-local">
 <input type="email">
 <input type="file">
 <input type="hidden">
 <input type="image">
 <input type="month">
 <input type="number">
 <input type="password">
 <input type="radio">
 <input type="range">
 <input type="reset">
 <input type="search">
 <input type="submit">
 <input type="tel">
 <input type="text">
 <input type="time">
 <input type="url">
 <input type="week">

27: HTML INPUT ATTRIBUTES


The value Attribute

The input value attribute specifies an initial value for an input


field.

Example:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="J
ohn"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="D
oe">
</form>

The readonly Attribute

The input readonly attribute specifies that an input field is read-


only.

A read-only input field cannot be modified (however, a user can


tab to it, highlight it, and copy the text from it).

The value of a read-only input field will be sent when submitting


the form!

Example:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="J
ohn" readonly><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="D
oe">
</form>

The disabled Attribute

The input disabled attribute specifies that an input field should be


disabled.

A disabled input field is unusable and un-clickable.

The value of a disabled input field will not be sent when


submitting the form!
Example:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="J
ohn" disabled><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="D
oe">
</form>

The size Attribute

The input size attribute specifies the visible width, in characters,


of an input field.

The default value for size is 20.

Note: The size attribute works with the following input types:


text, search, tel, url, email, and password.

Example:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="50
"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" size="4">
</form>

The maxlength Attribute

The input maxlength attribute specifies the maximum number of


characters allowed in an input field.
Note: When a maxlength is set, the input field will not accept
more than the specified number of characters. However, this
attribute does not provide any feedback. So, if you want to alert
the user, you must write JavaScript code.

Example:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="50
"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" maxlength="4
" size="4">
</form>

The min and max Attributes

The input min and max attributes specify the minimum and


maximum values for an input field.

The min and max attributes work with the following input types:


number, range, date, datetime-local, month, time and week.

Tip: Use the max and min attributes together to create a range of


legal values.

Example:

<form>
  <label for="datemax">Enter a date before 1980-01-
01:</label>
  <input type="date" id="datemax" name="datemax" max=
"1979-12-31"><br><br>
  <label for="datemin">Enter a date after 2000-01-
01:</label>
  <input type="date" id="datemin" name="datemin" min=
"2000-01-02"><br><br>

  <label for="quantity">Quantity (between 1 and


5):</label>
  <input type="number" id="quantity" name="quantity" 
min="1" max="5">
</form>

The placeholder Attribute

The input placeholder attribute specifies a short hint that


describes the expected value of an input field (a sample value or
a short description of the expected format).

The short hint is displayed in the input field before the user
enters a value.

The placeholder attribute works with the following input types:


text, search, url, tel, email, and password.

Example:

<form>
  <label for="phone">Enter a phone number:</label>
  <input type="tel" id="phone" name="phone"
  placeholder="123-45-678"
  pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
The required Attribute

The input required attribute specifies that an input field must be


filled out before submitting the form.

The required attribute works with the following input types: text,


search, url, tel, email, password, date pickers, number, checkbox,
radio, and file.

Example:

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" re
quired>
</form>

The autofocus Attribute

The input autofocus attribute specifies that an input field should


automatically get focus when the page loads.

Example:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" autofocu
s><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>
The autocomplete Attribute

The input autocomplete attribute specifies whether a form or an


input field should have autocomplete on or off.

Autocomplete allows the browser to predict the value. When a


user starts to type in a field, the browser should display options
to fill in the field, based on earlier typed values.

The autocomplete attribute works with <form> and the


following <input> types: text, search, url, tel, email, password,
datepickers, range, and color.

Example:

<form action="/action_page.php" autocomplete="on">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" autocom
plete="off"><br><br>
  <input type="submit" value="Submit">
</form>

28: HTML VIDEO
The HTML <video> element is used to show a video on a web
page.

Example:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
</video>

How it Works

The controls attribute adds video controls, like play, pause, and


volume.

It is a good idea to always include width and height attributes. If


height and width are not set, the page might flicker while the
video loads.

The <source> element allows you to specify alternative video files


which the browser may choose from. The browser will use the
first recognized format.

The text between the <video> and </video> tags will only be


displayed in browsers that do not support the <video> element.

29: HTML AUDIO
To play an audio file in HTML, use the <audio> element.

Example:

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
</audio>

How It Works

The controls attribute adds audio controls, like play, pause, and


volume.
The <source> element allows you to specify alternative audio files
which the browser may choose from. The browser will use the
first recognized format.

The text between the <audio> and </audio> tags will only be


displayed in browsers that do not support the <audio> element.

Add muted after autoplay to let your audio file start playing


automatically (but muted):

Example:

<audio controls autoplay muted>


  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
</audio>

You might also like