Scribd
Upload
2 views

html

Uploaded by

dev.chaitanyasonawane
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

html

Uploaded by

dev.chaitanyasonawane
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

HTML

HTML
Hypertext Markup Language
Hypertext → One page linked to another page.
Markup → Markup is used to structure and organize content for the web.
HTML (HyperText Markup Language) is the foundation of web development and
acts as the skeleton of every webpage.

Markup Language
A markup language works like a guidebook that applies rules to the text, such as:

This is a heading.

This is a paragraph.

An image should appear here.

This text should be bold.

HTML Document Structure


The HTML document structure is a basic framework that defines the layout and
content of any HTML web page. This structure follows a standardized format,
providing instructions to the browser for rendering the page.

HTML 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

HTML 2
<body>

</body>
</html>

<!DOCTYPE html>

This is the document type declaration.

Its purpose is to tell the browser that the document is written in HTML5 format.

This line should be at the very top of every HTML document to ensure the
browser renders it correctly.
<html lang="en">

This is the root element that wraps the entire HTML document.

The lang="en" attribute indicates that the document's language is English.

It is helpful for SEO and screen readers.


<head>

This section stores the page's metadata (data about data).

Metadata is not directly visible but is essential for browsers and search
engines.

In HTML, metadata provides information about the web page that is not
displayed directly on the page but is essential for browsers, search engines,
and other tools.

Inside head element


Meta tag = metadata (Extra Info)
<meta charset="UTF-8">

This specifies which character encoding is being used in the document.

UTF-8 is a standard encoding that supports all characters, including letters,


numbers, and symbols.
<meta name="viewport" content="width=device-width, initial-scale=1.0">

This is used for responsive design.

HTML 3
width=device-width : Sets the page's width equal to the device's screen width.

initial-scale=1.0 : Sets the zoom level (default zoom is 100%).


<title>Document</title>

This defines the title of the page.

It appears in the browser tab and also in search engine results.


<body>

The body is the section that contains the visible content of the web page.

Anything written inside the <body> will be displayed in the browser.

Understanding HTML Tags and Elements


HTML Tags and HTML Elements define the structure and content of web pages.
Both have specific roles, and they guide the browser on how to display the
content.

HTML Tags
Tags are a fundamental part of HTML that specify content or structure.

Each tag typically consists of an opening tag and a corresponding closing tag.

Syntax

<opening-tag>Content</closing-tag>

Example:
<p>This is a paragraph.</p>

1. Self-closing Tags:

Some tags do not contain content and do not require a closing tag.

Tag Description Example

Defines an image to display on <img src="image.jpg" alt="Sample


<img>
a webpage. Image" />

<br> Inserts a line break. This is line 1.<br />This is line 2.

HTML 4
Creates a horizontal line
<hr> <hr />
(divider).

Used for form fields to take <input type="text" placeholder="Name"


<input>
user input. />

Specifies metadata, like SEO or


<meta> <meta charset="UTF-8" />
browser information.

Links external resources, like <link rel="stylesheet" href="style.css"


<link>
CSS stylesheets. />

Defines multiple media sources <source src="video.mp4"


<source>
for <video> or <audio> . type="video/mp4" />

Adds subtitles or captions for <track src="captions.vtt"


<track>
videos. kind="subtitles" />

<area shape="rect"
Defines clickable areas in an
<area> coords="34,44,270,350" href="link.html"
image map. />

<col span="2" style="background-color:


<col> Specifies columns in a table.
yellow;" />

Suggests a place where the


<wbr> ThisIsA<wbr>LongWord.
browser can break a word.

2. Attributes of tags:

HTML attributes are special properties added to tags to provide additional


information or functionality to HTML elements.

Attributes are written inside the opening tag of an element.

Common HTML Attributes


Attribute Description Example

Provides a unique identifier for an


id <div id="main-container"></div>
element.

Assigns one or more class names


class <p class="text-center"></p>
for CSS styling.

Specifies the source file for media


src <img src="logo.png" />
(images, videos).

HTML 5
Provides alternative text for an <img src="logo.png" alt="Company Logo"
alt
image. />

href Specifies the URL for a link. <a href="https://example.com">Visit</a>

Adds inline CSS styles to an


style <p style="color: blue;">Hello!</p>
element.

Displays a tooltip when the user <button title="Click


title
hovers over the element. me!">Submit</button>

Specifies how a link is opened <a href="page.html"


target
( _blank , _self ). target="_blank">Link</a>

Identifies an element in forms or


name <input type="text" name="username" />
scripts.

Defines the type of an element


type <input type="password" />
(common for forms).

Provides a hint or example text in <input type="text" placeholder="Enter


placeholder
form inputs. Name"/>

Specifies a default value for form


value <input type="text" value="Default" />
elements.
disabled Disables an input or button. <button disabled>Submit</button>

<input type="text" readonly value="Info"


readonly Makes an input field read-only.
/>

Indicates a default selected


checked <input type="checkbox" checked />
checkbox or radio button.

Global Attributes
These attributes can be applied to most HTML elements:

Attribute Description Example


id Unique identifier for an element. <div id="header"></div>

Specifies one or more classes for an


class <span class="highlight"></span>
element.
style Inline CSS for the element. <h1 style="color: red;">Hello</h1>

Tooltip displayed when hovering over <p title="This is a


title
the element. paragraph.">Text</p>

hidden Hides the element from the page. <div hidden>This is hidden.</div>

HTML 6
Custom attributes for data storage in
data-* <div data-user-id="12345"></div>
JavaScript.

HTML Elements
An HTML Element is a complete structure made up of tags and their content.

Format

<tagname attribute="value">Content</tagname>

Example:
<p class="text">This is an element.</p>

Tag: <p> aur </p>.


Attribute: class="text".
Content: This is an element.

Types of HTML Tags and Elements


1. Block-level Elements

They take up the full width and start on a new line.

Block-Level Elements in HTML


Element Description Example

Represents contact <address>123 Street Name, City,


<address>
information. Country</address>

Defines an independent <article> <h2>Blog Title</h2> <p>Blog content


<article>
piece of content. goes here.</p></article>

Content related to the main


<aside> <aside> <p>Related Links</p> </aside>
content, like a sidebar.

Represents a block of
<blockquote> <blockquote>"This is a quote."</blockquote>
quoted text.

Used to draw graphics with <canvas id="myCanvas" width="200"


<canvas>
JavaScript. height="100"></canvas>

HTML 7
A description in a <dl> <dt>HTML</dt> <dd>Markup language for
<dd>
description list. web pages.</dd> </dl>

A generic container for <div class="container"> <p>Content goes here.


<div>
grouping elements. </p> </div>

<dl> <dt>HTML</dt> <dd>Markup language for


<dl> A description list.
web pages.</dd> </dl>

<dl> <dt>HTML</dt> <dd>Markup language for


<dt> A term in a description list.
web pages.</dd> </dl>

Groups related elements in <fieldset> <legend>Personal Info</legend><input


<fieldset>
a form. type="text" /> </fieldset>

Caption for a figure <figure> <img src="image.jpg" alt="Sample"/>


<figcaption>
element. <figcaption>Image caption</figcaption> </figure>

Groups media with a <figure> <img src="image.jpg" alt="Sample"/>


<figure>
caption. <figcaption>Image caption</figcaption> </figure>

Footer of a section or <footer> <p>&copy; 2025 My Website</p>


<footer>
page. </footer>

Defines a form for user <form action="/submit"> <input type="text" />


<form>
input. </form>

Headings, <h1> is largest,


<h1> to <h6> <h1>Heading 1</h1> <h6>Heading 6</h6>
<h6> is smallest.

Represents the header of a


<header> <header> <h1>Welcome</h1> </header>
section or page.

<hr> Horizontal line or divider. <hr />

Item in an ordered or
<li> <ul> <li>Item 1</li> <li>Item 2</li> </ul>
unordered list.

Main content of a <main> <h1>Main Heading</h1> <p>Main content


<main>
document. here.</p> </main>

Section for navigation <nav> <a href="/">Home</a> <a


<nav>
links. href="/about">About</a> </nav>

<ol> Ordered list. <ol> <li>Step 1</li> <li>Step 2</li> </ol>

<p> Paragraph of text. <p>This is a paragraph.</p>

Preformatted text
<pre> <pre> Line 1 Line 2</pre>
(preserves whitespace).

HTML 8
Thematic grouping of <section> <h2>Section Title</h2> <p>Section
<section>
content. content.</p> </section>

<table> <tr> <td>Cell 1</td> <td>Cell 2</td>


<table> Table container.
</tr> </table>

<table> <tr> <td>Data 1</td> <td>Data 2</td>


<td> Cell in a table row.
</tr> </table>

<table> <tfoot> <tr> <td>Footer</td> </tr>


<tfoot> Footer for a table.
</tfoot> </table>

<th> Header cell in a table. <table> <tr> <th>Header 1</th> </tr> </table>

Groups the header content <table> <thead> <tr> <th>Header</th> </tr>


<thead>
in a table. </thead> </table>

Represents a row in a
<tr> <table> <tr> <td>Row 1</td> </tr> </table>
table.
<ul> Unordered list. <ul> <li>Item 1</li> <li>Item 2</li> </ul>

1. Inline Elements

They stay on the same line as the content and do not take up the full
width.

Element Description Example

<a> Defines a hyperlink. <a href="https://example.com">Visit </a>

Represents an abbreviation <abbr title="HyperText Markup


<abbr>
or acronym. Language">HTML</abbr>

Makes text bold (without


<b> <b>Important text</b>
emphasis).

<bdo> Overrides text direction. <bdo dir="rtl">Right-to-Left</bdo>

<br> Inserts a line break. Line 1<br />Line 2

Represents a clickable
<button> <button>Click Me</button>
button.

Represents a title of a work


<cite> <cite>Harry Potter</cite>
(book, article, etc.).

Displays a piece of
<code> <code>let x = 10;</code>
computer code.
<data> Links a value with its <data value="12345">Product ID</data>
corresponding machine-

HTML 9
readable data.

Specifies a list of <input list="browsers"> <datalist id="browsers">


<datalist>
predefined input options. <option value="Chrome"></option></datalist>

Represents a term being <dfn>HTML</dfn> stands for HyperText Markup


<dfn>
defined. Language.

Emphasizes text, typically


<em> <em>Important</em>
displayed as italic.

Italicizes text for alternate


<i> <i>Italic text</i>
voice or mood.

Embeds an image in a
<img> <img src="image.jpg" alt="Image description" />
document.

Creates an input field for


<input> <input type="text" placeholder="Enter Name" />
forms.

Specifies a label for an <label for="name">Name:</label><input


<label>
input element. id="name" />

<mark> Highlights text. <mark>Highlighted text</mark>

Displays a measurement or
<meter> <meter value="0.7">70%</meter>
gauge.

Displays the result of a


<output> <output name="result">42</output>
calculation.

Represents a short inline


<q> <q>To be, or not to be</q>
quotation.

Represents text that is no


<s> <s>Outdated text</s>
longer accurate or relevant.

Displays sample output


<samp> <samp>Error: File not found</samp>
from a program or system.

Embeds or refers to a
<script> <script>alert('Hello');</script>
JavaScript script.
<select> Creates a drop-down list. <select> <option>Option 1</option></select>

Displays smaller text,


<small> <small>Disclaimer text</small>
usually for side comments.

A generic container for


<span> <span class="highlight">Highlighted </span>
inline content.

HTML 10
Represents strong
<strong> <strong>Critical text</strong>
importance, usually bold.
<sub> Displays text as subscript. H<sub>2</sub>O

Displays text as
<sup> x<sup>2</sup>
superscript.

Defines reusable content


<template> <p>Reusable content</p>
<template> that is not displayed by
</template>
default.

Creates a multiline text


<textarea> <textarea>Enter text here</textarea>
input field.

Represents a date or time


<time> <time datetime="2025-01-23">Today</time>
value.

Underlines text (or shows


<u> <u>Underlined text</u>
non-textual annotations).

Represents a variable in
<var> <var>x</var> = 10
math or programming.

Suggests a word break


<wbr> ThisIsA<wbr>LongWord
opportunity.

Commonly Used HTML Tags


Tag Description Example

Root element of the HTML


<html> <html lang="en">...</html>
document.
<head> Metadata container. <head>...</head>

<title> Defines the page title. <title>My Page</title>

<body> Contains visible content. <body>...</body>

Headings, h1 is largest, h6 is
<h1> to <h6> <h1>Heading 1</h1>
smallest.
<p> Paragraph. <p>Paragraph text</p>

<a> Hyperlink. <a href="url">Link</a>

<img src="image.jpg" alt="Image


<img> Image.
description">

<ul>, <li> Unordered list with items. <ul><li>Item 1</li></ul>

HTML 11
<ol>, <li> Ordered list with items. <ol><li>Item 1</li></ol>

<div> Generic block container. <div>Content</div>

<span> Generic inline container. <span>Content</span>

HTML 12

You might also like