Clean • Professional
HTML (HyperText Markup Language) is the standard language used to create and structure content on the web. It defines the layout of a webpage using elements and tags like headings, paragraphs, and links.
The latest version is HTML5, which adds semantic elements (<header>, <footer>, <article>), multimedia support (<video>, <audio>), canvas for graphics, and APIs for local storage and forms.
Tags: Keywords enclosed in angle brackets (e.g., <p>, </p>).
Elements: A complete structure with an opening tag, content, and closing tag (e.g., <p>Hello World</p>).
Some elements like <img> are self-closing.
<!DOCTYPE html> declaration?It tells the browser that the document follows HTML5 standards, ensuring consistent rendering across browsers.
Semantic elements clearly describe their meaning and structure.
Examples: <header>, <footer>, <nav>, <article>, <section>, <main>
They improve accessibility and SEO.
| Block-level Elements | Inline Elements |
|---|---|
| Start on a new line | Stay on the same line |
| Take full width of parent | Take width of content |
Examples: <div>, <p>, <h1> | <span>, <a>, <img> |
Attributes provide additional information about an element and are placed inside the start tag.
Example:
<img src="image.jpg" alt="Flower Image">
<head> tag?The <head> contains metadata about the webpage such as title, styles, scripts, and SEO information.
Example:
<head>
<title>My Website</title>
<meta charset="UTF-8">
</head>
<meta> tag?The <meta> tag provides metadata like character encoding, description, author, and viewport settings for SEO and responsiveness.
<meta name="description" content="Learn HTML Basics">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div> and <span>?| Tag | Type | Purpose |
|---|---|---|
<div> | Block-level | Groups large sections of content |
<span> | Inline | Styles or manipulates small parts of text |
<div> and <section>?<div>: Non-semantic container used for grouping elements.<section>: Semantic container representing a standalone section of related content.Use the <a> tag with the href attribute.
Example:
<a href="<https://example.com>">Click here</a>
Use the <img> tag with src and alt attributes.
Example:
<img src="image.jpg" alt="Description of image">
alt attribute in the <img> tag?It provides alternative text for images when they fail to load and helps screen readers describe images for accessibility.
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
<ul>
<li>Item A</li>
<li>Item B</li>
</ul>
<form> element used for?It collects user input through fields like text boxes, checkboxes, and buttons.
Example:
<form action="/submit" method="POST">
<input type="text" name="username">
<button type="submit">Submit</button>
</form>
Use <table> for the structure, <tr> for rows, <th> for headers, and <td> for data.
Example:
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
<b> and <strong>?<b> → Bold text (visual only)<strong> → Bold text with semantic importance (for SEO and accessibility)<i> and <em>?<i> → Italic text (for style)<em> → Emphasized text (for meaning and importance)Comments are not displayed on the webpage and are used for notes or explanations.
Example:
<!-- This is a comment -->