Scribd
Upload
7 views

HTML All Topics

5 documents

Uploaded by

prasannakakarla21
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

HTML All Topics

5 documents

Uploaded by

prasannakakarla21
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 19

Learn HTML: Basics to Advanced Concepts

1. Root Element in HTML


2. HTML Meta Tag
3. HTML Elements: Sectioning the Root
4. HTML Elements: Sectioning the Content
5. HTML Elements: Adding Text Content
6. HTML Elements: Adding Image and Multimedia
7. HTML Elements: Adding Inline Text Semantics
8. HTML Elements: Adding Scripting
9. HTML Elements: Interactive Elements
10. HTML Elements: Demarcating Edits
11. HTML Elements: Tables
12. HTML Elements: Forms
Introduction to HTML:

HTML stands for HyperText Markup language. It is a standardized system


for creating web pages. HTML creates the structure of a web page and uses
“tags” to mark up a web page.

Why do we use HTML?


HTML code ensures the proper formatting of text and images so that your
Internet browser may display them as they are intended to look. Without HTML,
a browser would not know how to display text as elements or load images or
other elements. HTML also provides a basic structure of the page, upon which
Cascading Style Sheets are overlaid to change its appearance. One could think
of HTML as the bones (structure) of a web page, and CSS as its skin
(appearance).
The Basic Skeleton of HTML:
Concept and Syntax of HTML:
A plaintext document formatted using elements is known as an HTML
document. Opening and closing tags are used to surround HTML elements.
Angle brackets (<>) are used to start and end each tag. Several tags, such as
<image>, <p>, etc. are empty or void and cannot contain any text. You can
add attributes to HTML tags to provide them with more information that affects
how the browser reads the element:

An HTML element's structure in detail is given in the picture above. An HTML file
is saved with the.htm or.html extension, is provided by a web server, and may
be viewed in any web browser.

Learn HTML: Basics to Advanced Concepts


1. Root Element in HTML
<html>...</html>: The root (top-level element) of an HTML page is
represented by the <html> element or the <html> tag. This element must
be the ancestor of all other elements. The structure of any HTML file
showing the usage of the
<html> element is shown below:

2. HTML Meta Tag


<head>...</head>: Machine-readable information (metadata) about
the document, such as its title, scripts, and style sheets, is contained in
the HTML
<head> element. The <head> element This is used for setting the
title and various other information that is not displayed.

<link>...</link>: The HTML External Resource Link <link> element


establishes a connection between the current content and an external
resource. This element is most typically used to connect to stylesheets, but
it can also be used to create site icons (both "favicon" style icons and icons
for the home screen and apps on mobile devices).
<meta>: Metadata that cannot be represented by other HTML meta
related elements such as <base>, <link>, <script>, <style>, or <title> is
expressed by the HTML <meta> element.
<style>...</style>: The HTML <style> element specifies the style of a
document or a section of a document.
<title>...</title>: The HTML Title element <title> specifies the
document title that appears in the title bar or tab of a browser. This is what
is bookmarked when we bookmark pages.
An example showing the usage of all the above elements is given below:

3. HTML Elements: Sectioning the Root


<body>...</body>:The content of an HTML document is represented by
the HTML <body> element. In a HTML document, there can only be one
<body> element. Some of the attributes that can be used along with the
<body> element are as follows:
<body bgcolor=?>: This is used for setting the background color of
the body via name or hex value.
<body text=?>: This is used for setting the text color via name or hex
value
<body link=?>: This is used for setting the color of links via name or
hex value
<body vlink=?>: This is used for setting the color of visited links via
name or hex value
<body alink=?>: This is used for setting the color of active links
An example illustrating the use of the body element is given below:

HTML Comments: Although HTML comments are not visible in the


browser, they can aid in the documentation of your HTML source code. We
can add comments to our HTML code by enclosing them within the
symbole: <!-- →. The following syntax shows how to add comments to your
HTML source: - - >

4. HTML Elements: Sectioning the Content

<address>...</address>: The HTML address> element denotes that the


enclosing HTML contains contact information for a person or group of
people, or for a company. An example showing the usage of the address
element is given below:

<article>...</article>: The HTML <article> element denotes a


self-contained composition in a document, page, application, or site that is
meant to be distributed or reused independently, for instance, in
syndication. An example showing the usage of the article element is given
<aside>...</aside>: The HTML <aside> element denotes a section of a
page whose content is only tangentially related to the main body of the
document. An example showing the usage of the aside element is given
below:

<header>...</header>: The HTML <header> element denotes


introductory content, which is usually a collection of introductory
paragraphs or aids to navigation. It may include certain heading elements,
as well as a logo, a search form, an image and other elements such as the
author's name. An example showing the usage of the header element is
given below:

<footer>...</footer>: The HTML <footer> element is used to create a


footer for the sectioning content or sectioning root element that is closest
to it. A footer usually includes information about the section's author,
copyright information, or links to related papers. An example showing the
usage of the footer element is given below:

<main>...</main>: The prominent material of a document's body is


represented by the HTML <main> element. The primary content area
contains stuff that is either directly related to or extends on the central
theme, the theme of a document, or the fundamental functionality of an
application. An example showing the usage of the main element is given
<h1> to <h6>: Six levels of section headers are represented by the HTML
<h1> to
<h6> elements. The highest level is <h1>. The lowest is <h6> at the
section level. An example showing the usage of these elements is given

<nav>...</nav>: The HTML <nav> element denotes a portion of a page


that contains navigation links, either within the current document or to
other documents. Menus, tables of contents, and indexes are all examples
of navigation sections. An example showing the usage of the nav element is
given below:

<section>...</section>: The HTML <section> element specifies a


standalone section within an HTML document that does not have a more
particular semantic element to represent it. An example showing the usage
of the section element is given below:

5. HTML Elements: Adding Text Content

<blockquote>...</blockquote>: The HTML<blockquote> Element (or


HTML Block Quotation Element) denotes an extended quotation.
Indentation is usually used to represent this. The HTML <cite> command
can be used to provide a URL for the quotation's source. The <cite>
element can be used to provide a text representation of the source, while
the cite attribute can be used to provide a text representation of the
source. An example that shows the usage of the <blockquote> element is
given below:

<div>...</div>: The generic container for flow content is the HTML


Content Division element (<div>). Unless it is styled with CSS, it has no
effect on the content or layout. An example that shows the usage of the
<div> element is given below:

<p>...</p>: A paragraph is represented by the HTML <p> element. An


example which shows the usage of the <p> element is given below:

<pre>...</pre>: The HTML <pre> element denotes preformatted


material that should be displayed precisely as it appears in the HTML
source. An example which shows the usage of the <pre> element is given

<dl>...</dl>: A description list is represented by the HTML <dl>


element. The element contains a list of term groups (defined by the <dt>
element) and descriptions (supplied by the <dd> elements). This element
is commonly used to display metadata (a list of key-value pairs) or to
construct a glossary.
<dt>...</dt>: The HTML <dt> element is used to specify a term in a
description or definition list, and it must be used within a <dl> element.
An example which shows the usage of the <dl>, <dd> and <dt> elements is..
<hr>...</hr>: A thematic break between paragraph level elements is
represented by the HTML <hr> element: for example, a change of scene
in a story or a shift in topic within a section.
<ol>...</ol>: An ordered list of items is represented by the HTML <ol>
element, which is commonly shown as a numbered list.
<ul>...</ul>: An unordered list of elements, often shown as a bulleted list, is
represented by the HTML <ul> element.
<li>...</li>: The <li> element in HTML is used to represent a list item.

An example which shows the usage of the <ol>, <ul>, <li> elements is given below

<figure>...</figure>: The HTML <figure> (Figure With Optional


Caption) element denotes self contained content with an optional caption
given by the (<figcaption>) element.
<figcaption>...</figcaption>: The HTML <figcaption> element, also
known as Figure Caption, is a caption or legend that describes the rest of
the contents of its parent <figure> element.
An example which shows the usage of the <figure> and <figcaption> elements
is given below:
6. HTML Elements: Adding Image and Multimedia

<img>...</img>: The HTML <img> element is used to include an


image in a document. An example that shows the usage of the <img>
element is given below:

<audio>...</audio>: Sound content is embedded in documents using the


HTML
<audio> element. It can have one or more audio sources, which are
denoted by the src property or the source> element, with the browser
picking the best one. It can also serve as a destination for media that is
being streamed using a MediaStream. An example that shows the usage of
the <audio> element is given below:

<video>...</video>: The HTML Video element (<video>) inserts a


media player into the document that allows video playback. Although you
can use the <video> element for audio material, the <audio> element may
give a better user experience.
<track>...</track>: The HTML <track> element is a child of the <audio>
and
<video> media components. It allows you to set timed text tracks (or
time-based data), for example, to handle subtitles automatically. WebVTT
(Web Video Text Tracks or Timed Text Markup Language) is used to format
the tracks (.vtt files) (TTML). An example which shows the usage of the
<video> and <track> elements is given below:
7. HTML Elements: Adding Inline Text Semantic
<a>...</a>: The href property on the HTML <a> element (or anchor element)
generates a hyperlink to web pages, files, email addresses, page positions, or
anything else a URL can address. An example which shows the usage of the
<a> element is given below:

<em>...</em>: The HTML <em> element denotes text with a strong focus on
it.
The em> element can be used in a variety of ways, nested, with each level
of nesting denoting a higher level of importance. An example that shows
the usage of the <em> element is given below:

<code>...</code>: The HTML <code> element styles its contents to


imply that the text is a small piece of computer code. An example that
shows the usage of the <code> element is given below:

<abbr>...</abbr>: An abbreviation or acronym is represented using the


HTML Abbreviation element (<abbr>); the optional title property might
offer an expansion or description for the abbreviation. An example that
shows the usage of the <abbr> element is given below:

<br>...</br>: The <br> element in HTML creates a line break in text


(carriage- return). It is beneficial when composing a poem or an address
where the line division is important. An example that shows the usage of
the <br> element is given below:

<mark>...</mark>: The HTML Mark Text element (mark>) denotes text


that has been marked or highlighted for citation or notation, due to the
marked passage's relevance or importance in the enclosing context. An
example that shows the usage of the <mark> element is given below:

<span>...</span>: The HTML <span> element is a general inline


container for expressing information that does not represent anything by
default. It can be used to group items for styling (using the class or id
properties) or because they have similar attribute values, such as lang. An
example that shows the usage of the <span> element is given below:

<cite>...</cite>: The HTML Citation element (<cite>) is used to


describe a reference to a referenced creative work, and the title of that
work must be included. An example that shows the usage of the <cite>
element is given below:

<small>...</small>: Independent of its stylistic presentation, the HTML


<small> element represents side comments and small print, such as
copyright and legal material. It renders text within it one font size smaller
by default, such as small to x-small. An example that shows the usage of
the <small> element is given below:

<time>...</time>: The HTML <time> element denotes a specific time


period. An example that shows the usage of the <time> element is given below:

<strong>...</strong>: The HTML Strong Significance Element


(<strong>) denotes a high level of importance, seriousness, or urgency in
the material. The contents are usually displayed in bold type in browsers.
An example that shows the usage of the <strong> element is given below:
8. HTML Elements: Adding Scripting

<script> … </script>: The HTML <script> element is used to embed or


refer to executable code; for example, JavaScript code is generally
embedded or referred to using this element. An example which shows the
usage of the
<script> element is given below:

9. HTML Elements: Interactive Elements

<details>...</details>: The HTML Details Element (<details>) produces


a disclosure widget that only shows information when it is toggled to the
"open" state.
<summary>...</summary>: The HTML Disclosure Summary element
(<summary>) specifies a summary, caption, or legend for the disclosure
box of the details> element.
An example that shows the usage of the <summary> element and the
<details> element is given below:

10. HTML Elements: Demarcating Edits

<del>...</del>: A region of text that has been deleted from a document


is represented by the HTML <del> element.
<ins>...</ins>: A range of text can be added to a document using the HTML

<ins> element.
An example which shows the usage of the <del> element and <ins> element is
given below:
11. HTML Elements: Tables
<table>...</table>: The HTML <table> element is used to display
tabular data, which is information presented in a two dimensional table with
rows and columns of data filled cells.
<caption>...</caption>: The HTML Table Caption element (<caption>)
specifies a table's caption (or title), and is always the first child of a
<table> if it is utilised.
<thead>...</thead>: The HTML <thead> element creates a series of rows
that constitute the table's column heads.
<tbody>...</tbody>: The HTML Table Body element (<tbody>) incorporates
a collection of table rows (<tr> elements) that make up the table's body
(<table>).
<td>...</td>: The HTML <td> element designates a data-filled table cell.
It is a part of the table model.
<tr>...</tr>: A row of cells in a table is defined using the HTML <tr>
element.
Cells for the row can then be created using a combination of <td> (data cell)
and
<th> (header cell) components.
<th>...</th>: A cell is designated as the header of a set of table cells by
the HTML <th> element. The scope and header attribute specify the exact
nature of this group.
<tfoot>...</tfoot>: The HTML <tfoot> element defines a series of rows that
summarise the table's columns.
An example that shows the usage of a table in HTML is given below:
12. HTML Elements: Forms

<form>...</form>: A document section with interactive controls for


submitting information to a web server is represented by the HTML <form>
element. An example which shows the usage of the <form> element is given
below:
<button>...</button>: The HTML <button> element specifies a
clickable button that can be used in forms or anywhere else in a document
where a conventional button is required. An example which shows the
usage of the <button> element is given below:

<datalist>...</datalist>: The HTML <datalist> element includes a series of

<option> components that indicate the values that can be used for other
controls
<input>: The HTML <input> element is used to create interactive controls
for web based forms in order to accept data from the user; depending on
the device and user, a range of sorts of input data and control widgets are
accessible.
Examples of the usage of the input element have been given above.

<progress>...</progress>: The HTML <progress> element shows a


progress indicator for an activity, which is commonly shown as a progress
bar. An example which shows the usage of the <progress> element is given
below:
<select>...</select>: The HTML <select> element denotes a control
with a menu of options.
<optgroup>...</optgroup>: Within a <select> element, the HTML
optgroup> element generates a grouping of alternatives.
<option>...</option>: An item contained in a <select>, an <optgroup>, or
an

<datalist> is defined by the HTML <option> element. As a result, option>


can be used to represent popup menu items and other lists of things in an
HTML text. An example which shows the usage of the <select>,
<optgroup>, <option> elements is given below:
<label>...</label>: A caption for an item in a user interface is
represented by the HTML <label> element. Examples of the usage of a
label element have been given above.
<legend>...</legend>: The caption for the content of its parent <fieldset>
is represented by the HTML <legend> element.
<fieldset>...</fieldset>: Within a web form, the HTML <fieldset>
element is used to organise many controls as well as labels (<label>).
An example which shows the usage of the <legend> and <fieldset>
elements is given below:
<textarea>...</textarea>: When you wish to allow users to submit a
large quantity of free-form text, such as a comment on a review or
feedback form, the HTML <textarea> element indicates a multi-line
plain-text editing control. An example which shows the usage of the
<textarea> element is given below:

You might also like