Scribd
Upload
8 views3 pages

Essential HTML Tags Notes

The document outlines essential HTML tags for structuring a website, including basic structure, head section tags, semantic tags, content tags, form tags, media tags, and script/style tags. It provides examples of how to implement these tags in a basic HTML page. Additionally, it emphasizes the importance of various tags for organizing content and enhancing functionality on web pages.

Uploaded by

franklynekiplagat
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
8 views3 pages

Essential HTML Tags Notes

The document outlines essential HTML tags for structuring a website, including basic structure, head section tags, semantic tags, content tags, form tags, media tags, and script/style tags. It provides examples of how to implement these tags in a basic HTML page. Additionally, it emphasizes the importance of various tags for organizing content and enhancing functionality on web pages.

Uploaded by

franklynekiplagat
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

Essential HTML Tags for Website

Structure
Basic HTML Structure
<!DOCTYPE html>
<html>
<head>
<title>Your Website Title</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>

Head Section Tags


<title> - Page title (shown in browser tab)
<meta> - Metadata like charset, viewport, etc.
<link> - Link external CSS files
<style> - Embed internal CSS
<script> - JavaScript (can also go in body)
<base> - Sets base URL for relative links

Structural Semantic Tags


<header> - Top section (logo, navigation, etc.)
<nav> - Navigation menu
<main> - Main content area
<section> - Thematic grouping of content
<article> - Independent content (blog post)
<aside> - Sidebar or extra content
<footer> - Bottom of the page
<div> - Generic block-level container

Content Tags
<h1> to <h6> - Headings
<p> - Paragraph
<a> - Hyperlink
<img> - Image
<ul> / <ol> - Unordered / Ordered list
<li> - List item
<br> / <hr> - Line break / Horizontal rule
<strong> / <em> - Bold / Italic emphasis
<span> - Inline container

Form Tags
<form> - Start of a form
<input> - Single input (text, checkbox, etc.)
<label> - Label for input field
<textarea> - Multi-line input
<select> / <option> - Dropdown menu and options
<button> - Button for form
<fieldset> / <legend> - Group related inputs

Media Tags
<img> - Image
<video> / <audio> - Video and audio elements
<source> - Source for media
<iframe> - Embed another page
<canvas> - Graphics via JavaScript
<svg> - Scalable Vector Graphics

Script & Style Tags


<style> - Embed CSS
<script> - JavaScript
<noscript> - Content if JS is disabled
<link> - Link external stylesheets

Example HTML Page Structure


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<h1>Site Name</h1>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
</nav>
</header>

<main>
<section>
<h2>Welcome</h2>
<p>This is the homepage content.</p>
</section>
</main>

<footer>
<p>&copy; 2025 My Website</p>
</footer>
</body>
</html>

You might also like