This is my first beginner-level HTML project where I created a simple webpage to practice basic HTML concepts like links, images, tables, and lists. The project acts as a bookmark page where users can quickly open popular websites like Google, Instagram, Wikipedia, etc.
Semantic tags in HTML are elements that clearly describe the meaning and structure of the content they contain.
Unlike non-semantic tags like <div> and <span>, semantic tags such as <header>, <nav>, <main>, <section>, <article>, and <footer> provide meaningful information to browsers, developers, and search engines.
Using semantic HTML improves code readability, enhances SEO, and increases accessibility for users, especially those using screen readers.
-
Multiple website bookmarks (Google, Instagram, Wikipedia, Flipkart, Gmail, LinkedIn)
-
Image display
-
Table for displaying people details
-
Lists:
-
Unordered list
-
Ordered list
-
Definition list
-
Responsive meta tag for mobile view
- HTML5
- CSS (linked externally)
- JavaScript (linked externally)
project-folder/
│── index.html
│── style.css
│── script.js
│── sss.jpeg
-
Basic structure of HTML (
<!DOCTYPE html>,<html>,<head>,<body>) -
How to use:
- Headings (
<h1>,<h2>) - Links (
<a>) - Images (
<img>) - Tables (
<table>) - Lists (
<ul>,<ol>,<dl>)
- Headings (
-
How to link CSS and JavaScript files
- Fix
target="_blank"(should be inside<a>tag) - Add proper layout using CSS
- Improve UI design
- Add header and footer section
- Make it fully responsive
- Convert this into a modern website
- Add navigation bar
- Use CSS Flexbox/Grid
- Add JavaScript interactivity
Shivprasad
This is a beginner project created for learning purposes. More improvements will be added as I continue learning web development.