Beginner to Interview Preparation
HTML (HyperText Markup Language) is the standard markup language used to create web pages. It provides the structure of a webpage.
<!DOCTYPE html> <html> <head> <title>My Website</title> </head> <body> Content </body> </html>
| Tag | Purpose |
|---|---|
| DOCTYPE | Tells browser HTML5 is used |
| html | Root element |
| head | Metadata |
| title | Browser tab title |
| body | Visible content |
<h1>Heading 1</h1>
<p>Hello World</p>
Hello World
<a href="https://google.com">Google</a>
<img src="image.jpg" alt="image">
<b>Bold</b> <i>Italic</i> <u>Underline</u>
<ul><li>Apple</li></ul>
<table>
<tr>
<th>Name</th>
<th>Marks</th>
</tr>
<tr>
<td>Ajay</td>
<td>95</td>
</tr>
</table>
| Name | Marks |
|---|---|
| Ajay | 95 |
| Arti | 98 |
<input type="text">
<input type="radio" name="gender">
<input type="checkbox" /> <input type="checkbox" />
<select>
<option>HTML</option>
<option>CSS</option>
</select>
<textarea rows="4"></textarea>
Semantic tags describe the meaning of content and improve SEO and accessibility.
| Tag | Purpose |
|---|---|
| header | Top section |
| nav | Navigation links |
| section | Content section |
| article | Independent content |
| aside | Sidebar |
| footer | Bottom section |
HTML is used to create the structure of a webpage, while CSS is used to style and design the webpage.
HTML creates structure, CSS adds design, and JavaScript adds interactivity and functionality.
The head tag contains metadata such as title, CSS links, JavaScript files, and meta information.
The body tag contains all visible content displayed on the webpage.
Block elements take the full width available and start on a new line. Inline elements only take the required width.
Examples: div, p, h1 = Block Elements
span, a, img = Inline Elements
ul creates an unordered (bulleted) list while ol creates an ordered (numbered) list.
The alt attribute provides alternative text when an image cannot be loaded and improves accessibility.
An iframe is used to embed another webpage inside the current webpage.
<iframe src="page.html"></iframe>
id is unique and should be used only once per page. class can be used for multiple elements.
HTML entities are special codes used to display reserved characters.
< = < > = > & = &
The meta tag provides information about the webpage such as character encoding, author, and viewport settings.
SEO (Search Engine Optimization) helps websites rank better in search engines using proper tags, headings, meta descriptions, and semantic HTML.
Both make text bold, but strong indicates importance while b only changes appearance.
Both make text italic, but em adds semantic emphasis while i only changes appearance.
A favicon is the small icon displayed in the browser tab.
The title tag defines the title shown in the browser tab and helps SEO.
Semantic tags clearly describe the meaning of content. Examples include header, nav, section, article, aside, and footer.
It improves readability, accessibility, SEO, and code maintenance.
Radio buttons allow only one selection from a group. Checkboxes allow multiple selections.
The name attribute identifies form data when submitted and is used to group radio buttons.
Placeholder displays temporary hint text inside input fields.
It makes a form field mandatory before submission.
Local storage allows websites to store data in the user's browser without using a database.
HTML5 introduced:
Canvas is used to draw graphics, charts, animations, and games using JavaScript.
GET sends data in the URL and is less secure. POST sends data in the request body and is more secure.
Accessibility means designing websites that can be used by all people, including users with disabilities.
The label tag improves accessibility and allows users to click the label text to select form controls.
section has semantic meaning while div is a generic container.
Empty tags do not have closing tags. Examples: br, hr, img, input, meta, link.