HTML
Hypertext Markup Language
Structure & Formatting
Note : HTML is not case-sensitive.
HTML Elements
Standard elements that browsers recognize.
• Paragraph
<p> abc </p>
• Heading
<h1> H1 </h1>
• Image
Components
The components used to design the structure of a website are called HTML tags.
HTML Tags
A container for some content or other tags.
Example: <p>
• Opening Tag
<p>
• Closing Tag
</p>
Heading Elements
1
<h1> to <h6> HTML elements represent six levels of section headings.
Note : <h1> is the highest section level and <h6> is the lowest.
Lists in HTML
Two types:
Unordered List
<ul>
<li> Bread </li>
</ul>
Ordered List
<ol type='A'>
<li> Bread </li>
</ol>
HTML Attributes
Attributes are used to add more information to the tag.
Example: <html lang='en'>
Anchor Element
Used to add links to your page.
<a href=[Link]
Image Element
Used to add images to your page.
<img src="img_girl.jpg" alt="Girl" width="500" height="600">
2
Links
Absolute
Link to an internet page (e.g., google).
Relative
Link to a local file on your system (index).
Inline vs Block Elements
Block Elements
Take up the full width available (whole block). Start from a new line.
Inline Elements
Take up only necessary width. Don't start from a new line.
Example:
Heading Element ( Block )
Paragraph Element ( Block )
Anchor Tag ( Inline )
Image Element ( Inline )
Bold, Italic & Underline Tags
Used to highlight text in your page.
Example:
<b> bold </b>
<i> italic </i>
<u> underline </u>
Br Tag
3
Used to add next line (line breaks) to your page.
<br/>
Div Element
• Div is a container used to hold other HTML elements or group elements
together.
• It is a block element.
Span Element
• Span is also a generic container used to hold other HTML elements or group
elements together.
• It is an inline element.
HR Tag:
Horizontal Rule Element
<hr>
Sub & Sup Tags
• H2O (subscript):
H<sub>2</sub>O
• A² + B² = C² (superscript):
A<sup>2</sup> + B<sup>2</sup> = C<sup>2</sup>
Semantic Markup
It is the markup that relates to the meaning of content.
Semantic:
• <section>, <header>, <p>, <img>
Non-Semantic:
• <div>, <span>
4
Why we use Semantic Markup
1. Meaningful layout
2. SEO (Search Engine Optimization)
3. Readable & screen readers
HTML Entities
• An HTML entity is a piece of text (string) that begins with an
ampersand (&) and ends with a semicolon (;).
• It is used to display reserved characters (like HTML code), and
invisible characters (like non-breaking spaces).
Examples:
o & ( & )
• < ( < )
• > ( > )
• " ( “ )
Video Tag
To show videos in HTML:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4"> if error comes in video
Your browser does not support the video tag.
</video>
Tables in HTML Caption <table>
Tables are used to represent tabular data. STUDENT
NAME ROLLNO
Table Structure <th>
MONA 21 <tr>
<table>
JONE 11
<caption>Table Caption</caption> SONU 13
<td>
<thead>
5
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer 1</td>
</tr>
</tfoot>
</table>
Forms in HTML
Forms are used to collect data from the user.
<form content></form>
Action Attribute
The action attribute is used to define what action is needed to be performed when the form
is submitted or where the form data should be sent.
<form action="[Link]"></form>
Form Elements
Input
Used to create multiple form controls like text, password, radio, etc.
6
Type Attribute
<input type="text" />
<input type="password" />
<input type="number" />
<input type="datetime-local" />
<input type="color" />
Label
The label is used to tell users the value that should be entered in the associated input field
<form>
<label for="favorite-animal">Favorite Animal</label><br>
<input name="favorite-animal" id="favorite-animal">
</form>
Placeholder Attribute
<input type="text" placeholder="name" />
Name Attribute
Name is submitted in the form as part of a name/value pair.
<input type="text" placeholder="name" name=”username”/>
Input Elements (Checkbox)
Can select multiple options.
<input type="checkbox" name="age" checked /> I am 18+
Radio Button
Can select one.
<input type="radio" name="fruit" id="apple" value="apple" />
Button Element
Button using Input
<input type="submit" value="click me" />
7
Button using Button Tag
<button type="submit">Submit</button>
<button type="button">do something</button>
<button type="reset">do something</button>
Id
Id is connected with the form.
<input type="text" id="username" placeholder="Enter name" />
Select Element (Dropdown)
Dropdown
<select name="qualification" id="profession">
<option value="student">Student</option>
<option value="teacher">Teacher</option>
</select>
Range
<input type="range" min="0" max="100" value="50" name="volume" />
Textarea
<textarea id="feedback" name="feedback" placeholder="Enter text"></textarea>
We can add rows and cols to make more space in textarea.