How to Learn HTML in a Day Vol. 2

Table of Contents

DOCTYPE Declaration
The DOCTYPE declaration must be the first line in any HTML document. It tells the browser which version of HTML is being used, ensuring consistent rendering across browsers.

html

<!DOCTYPE html>
HTML Tags
HTML tags are instructions that tell browsers how to display content. Tags are divided into:
- Opening Tag: <tag>
- Content: The content between the tags.
- Closing Tag: </tag>
Example:

html

<p>This is a paragraph.</p>
Head Tag (<head>)
The <head> section contains metadata about the HTML document, including styles, links, and scripts.

html

<head> <title>My Webpage</title> </head>
Title Tag (<title>)
Inside the <head>, the <title> tag specifies the title displayed in the browser tab.

html

<title>Learning HTML</title>
Body Tag (<body>)
The <body> contains the main content of the web page, such as text, images, and links. Only one <body> tag is allowed per HTML document.

html

<body> <h1>Welcome to My Page</h1> <p>This is the body content.</p> </body>

Paragraph Tag (<p>)
Used for paragraphs. Place text between the opening and closing tags.

html

<p>This is a paragraph.</p>
Heading Tags (<h1> to <h6>)
Define headings, from largest (<h1>) to smallest (<h6>).

html

<h1>Main Heading</h1> <h2>Subheading</h2>
Anchor Tag (<a>)
Creates hyperlinks. The href attribute specifies the link’s destination.

html

<a href="about.html">About Us</a>
Image Tag (<img>)
Embeds images. The src attribute specifies the image file.

html

<img src="logo.png" alt="Company Logo">

Note: <img> is a self-closing tag.
Div Tag (<div>)
Groups content into sections. Useful for organizing the page.

html

<div> <p>This is a section of the page.</p> </div>
Header Tag (<header>)
Defines the header section of a webpage, which often includes navigation links.

html

<header> <h1>Welcome</h1> <nav> <a href="home.html">Home</a> <a href="about.html">About</a> </nav> </header>
Footer Tag (<footer>)
Defines the footer section, often containing copyright or contact information.

html

<footer> <p>© 2024 My Website</p> </footer>
List Tags
Used for creating lists. There are two types:
- Unordered List (<ul>): Items are marked with bullet points.
- Ordered List (<ol>): Items are numbered.
Example of Unordered List:

html

<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>

Output:
- Item 1
- Item 2
- Item 3

Tags: code coding html language text editor