Web Design: 5 HTML Tips in Under 2 Minutes for CAT Students

Started by d3ld31kldu, Oct 24, 2024, 07:45 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.


tagninopso

Here are 5 HTML tips for CAT students to improve their web design in under two minutes.

1. Use Semantic HTML Tags 📝
Instead of using generic <div> tags for everything, use semantic HTML tags to give your code meaning. This helps search engines understand your content and improves accessibility.

Instead of This   Use This
<div class="header">   <header>
<div class="main-content">   <main>
<div class="footer">   <footer>

Export to Sheets
2. Link CSS Files Correctly 🎨
To style your webpage, ensure your CSS file is linked properly in the <head> section of your HTML. Use the href attribute to specify the path to your stylesheet.

<link rel="stylesheet" href="styles.css">

3. Add Alt Text to Images 🖼�
Always include an alt attribute for your images. Alt text (alternative text) describes the image for people who can't see it (like those using screen readers) and is crucial for SEO.

<img src="cat.jpg" alt="A fluffy orange cat sleeping on a chair.">

4. Structure Content with Headings (H1-H6) ✍️
Use headings to create a clear hierarchy for your content. The <h1> tag should be used for the main title, and subsequent headings (<h2>, <h3>, etc.) should be used for subheadings. This makes your content easy to scan and read.

<h1>My Awesome Website</h1>
<h2>About Me</h2>
<h3>My Hobbies</h3>

5. Use Comments to Organize Code 🧑�💻
Add comments to your HTML to explain complex sections of your code or to leave notes for yourself or other developers. Comments are ignored by the browser but are invaluable for maintaining clean code.

``
<nav>
`<ul>`
`<li>...</li>`
`</ul>`
`</nav>`

Didn't find what you were looking for? Search Below