Scribd
Upload
2 views5 pages

? HTML Tags

The document provides a comprehensive list of HTML tags and CSS properties along with their purposes, organized into categories such as basic structure, text formatting, links, media, lists, tables, forms, semantic HTML, and layout. It also covers CSS properties related to text styling, box model, background, layout, flexbox, grid layout, effects, animation, and responsive design. This serves as a quick reference for web development essentials.

Uploaded by

thakkary248
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
2 views5 pages

? HTML Tags

The document provides a comprehensive list of HTML tags and CSS properties along with their purposes, organized into categories such as basic structure, text formatting, links, media, lists, tables, forms, semantic HTML, and layout. It also covers CSS properties related to text styling, box model, background, layout, flexbox, grid layout, effects, animation, and responsive design. This serves as a quick reference for web development essentials.

Uploaded by

thakkary248
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

🌐 HTML TAGS – List & Purpose

1️⃣ Basic Structure Tags


Tag Purpose
<html> Root element of an HTML page
<head> Contains metadata (title, links, styles)
<title> Page title shown in browser tab
<body> Visible content of the webpage
<!DOCTYPE> Defines HTML version

2️⃣ Text Formatting Tags


Tag Purpose
<h1> to <h6> Headings (largest to smallest)
<p> Paragraph
<br> Line break
<hr> Horizontal line
<b> Bold text
<i> Italic text
<u> Underline
<strong> Important text
<em> Emphasized text
<mark> Highlight text
<small> Smaller text
<sub> Subscript
<sup> Superscript

3️⃣ Link & Media Tags


Tag Purpose
<a> Hyperlink
<img> Display image
<audio> Audio file
<video> Video file
<source> Media source
<iframe> Embed another webpage

4️⃣ List Tags


Tag Purpose
<ul> Unordered list
<ol> Ordered list
<li> List item
<dl> Description list
<dt> Term name
<dd> Term description

5️⃣ Table Tags


Tag Purpose
<table> Create table
<tr> Table row
<th> Table heading
<td> Table data
<thead> Table header
<tbody> Table body
<tfoot> Table footer
<caption> Table title

6️⃣ Form Tags (Very Important 🔥)


Tag Purpose
<form> Form container
<input> User input field
<textarea> Multi-line text input
<button> Button
<label> Input label
<select> Dropdown
<option> Dropdown option
<fieldset> Group form elements
<legend> Title for fieldset

7️⃣ Semantic HTML Tags (SEO & Accessibility)


Tag Purpose
<header> Page header
<nav> Navigation links
<section> Section of content
<article> Independent content
<aside> Side content
<footer> Page footer
Tag Purpose
<main> Main content

8️⃣ Container & Layout Tags


Tag Purpose
<div> Block container
<span> Inline container

🎨 CSS PROPERTIES – List & Purpose


1️⃣ Text Styling
Property Purpose
color Text color
font-size Text size
font-family Font style
font-weight Boldness
text-align Alignment
text-decoration Underline, none
text-transform Uppercase/lowercase

2️⃣ Box Model


Property Purpose
margin Outer space
padding Inner space
border Border around element
width Element width
height Element height
box-sizing Box size control

3️⃣ Background & Color


Property Purpose
background-color Background color
background-image Background image
background-size Image size
background-repeat Repeat control
4️⃣ Layout & Positioning
Property Purpose
display Block/inline/flex/grid
position static/relative/absolute
top, left Position values
float Float element
clear Clear float
z-index Stack order

5️⃣ Flexbox (Modern Layout 🔥)


Property Purpose
display: flex Enable flex
justify-content Horizontal alignment
align-items Vertical alignment
flex-direction Row/column
flex-wrap Wrap items

6️⃣ Grid Layout


Property Purpose
display: grid Enable grid
grid-template-columns Column layout
grid-template-rows Row layout
gap Space between items

7️⃣ Effects & Animation


Property Purpose
opacity Transparency
box-shadow Shadow
border-radius Rounded corners
transition Smooth change
transform Rotate/scale
animation Animation

8️⃣ Responsive Design


Property Purpose
@media Responsive rules
max-width Max size
min-width Min size
overflow Scroll control

You might also like