Scribd
Upload
11 views

HTML Notes

The document provides an overview of HTML including basic tags like headings, paragraphs, images and links. It describes various HTML elements and attributes for text formatting, lists, tables, forms, and embedding videos. Key topics covered are HTML structure, comments, semantics, and common tags for text, images, links and layout.

Uploaded by

prakhar12.rv
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
11 views

HTML Notes

The document provides an overview of HTML including basic tags like headings, paragraphs, images and links. It describes various HTML elements and attributes for text formatting, lists, tables, forms, and embedding videos. Key topics covered are HTML structure, comments, semantics, and common tags for text, images, links and layout.

Uploaded by

prakhar12.rv
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

HTML

HTML → Hypertext Markup Language


HTML is the code that is used to structure a web page and its content

The components used to design the structure of websites are called HTML tags

💡 ! → Used HTML abbreviation

HTML Tag
A container for some content or other HTML tag

💡 <p></p> → It shows element

HTML 1
💡 Inside in <p></p> → Called as Content

Basic HTML Page


<!DOCTYPE html> Tells the browser you are using HTML5

<html></html> The root of an HTML document

<head></head> Container for metadata

<title></title> Page title

<body></body> Contains all data rendered by the browser

<p></p> Paragraph tag

Quick Points
An HTML tag is a parent of the head & body tag

Most HTML elements have opening & closing tags with content in between

Some tags have no content in between, eg - <br> [Break tag with no opening and
ending tag like <br></br>] [You can use this tag for next line]

We can use inspect element/view page source to edit HTML

Comments in HTML
This is part of the code that should not be parsed

HTML IS NOT CASE SENSITIVE


<html> = <HTML>

<p> = <P>

HTML 2
<head> = <HEAD>

<body> = <BODY>

BASIC HTML TAGS


HTML Attributes
Attributes are used to add more information to the tag

👉🏻 <html lang=”en”> → Lanuage attribute

Heading Tag
Used to display headings in HTML

h1 [Most Important] [Large in Size]

h2

h3

h4

h5

h6 [Least Important] [Small in Size]

HTML 3
Paragraph Tag
Used to add paragraphs in HTML

💡 Toggle Word Wrap in Command plate → This feature automatically moves


words that don’t fit on one line to the next line

Anchor Tag
Used to add links to your page

Go to another page, Create another file, and Link like this…

Image Tag

HTML 4
Used to add Images to your page

alt ⇒ Used for an alternative name

Adjust the size of an image using height and width

Bold, Italic & Underline Tags


Used to highlight text on your page

Big & Small Tags


Used to display big & small text on your page

Hr Tag
Used to display a horizontal ruler, used to separate content

HTML 5
Subscript & Superscript Tag
Used to display a horizontal ruler, used to separate content

💡 Pre Tag <pre></pre> ⇒ Used to count the space

Page Layout Techniques


Using Semantic tags for layout

Using the Right Tags

HTML 6
Inside Main Tag
Section Tag <section> For a section on your page

Article Tag <article> For an article on your page

Aside Tag <aside> For content aside main content (ads)

Revisting Anchor Tag

👉🏻 <a href=”https://google.com” target=”_main”>Google</a> → To open in new


tab

👉🏻 <a href=”https://google.com”><img src=”Link”></a> → Clickable Pic

Revisting Image Tag

👉🏻 <img src=”Link” height=”100px” width=”40px” >

Div Tag

HTML 7
Div is a container used for other HTML elements

Block Element (takes full width)

Span Tag
Span is also a container used for other HTML elements

Inline elements (takes width as per size)

List in HTML
Lists are used to represent real life list data

There are two types

Unordered <ul></ul>

Ordered <ol></ol>

List <li></li>

HTML 8
Tables in HTML
Tables are used to represent real life table data

<tr> Used to display table row

<td> Used to display table data

<th> Used to display table header

HTML 9
Caption in Tables

👉🏻 <caption>Student Data</caption>

thead & tbody in Tables

HTML 10
👉🏻 <thead> ⇒ To wrap table head

👉🏻 <tbody> ⇒ To wrap table body

👉🏻 colspan ⇒ Used to Place the headline between the center of columns

Form in HTML

HTML 11
Forms are used to collect data from the user

Eg - sign up/login/help requests/contact me

<form></form>

Action in Form
Action attribute is used to define what action needs to be performed when a form is
submitted

<form action’”/action.php”>

Form Element : Input

👉🏻 <input type=”text” placeholder=”Enter Name”>

Label

HTML 12
Checkbox
Checkbox basically used for multiple type answers like that….

HTML 13
👉🏻 <textarea> ⇒ Used for feedback by the user

Select

HTML 14
<input type=”submit” value=”submit”> ⇒ Used for submit
iframe Tag
Website inside Website

Video Tag
<video src=”Video.mp4”>My video</video>

Attributes

controls

height

width

loop

autoplay

HTML 15

You might also like