Tags and Attributes

Idea

Websites are like cars. People use them every day, but they don’t know how they work inside. Developers understand what is “under the hood”.

Tags

A tag is a basic building block of HTML. Every page is made of tags. A tag can represent a heading, paragraph, list, image, or button.

Example:

<tag>Content</tag>

Opening tag = start Closing tag = end (with /)

<section>Section</section>
<p>Paragraph</p>
<a>Link</a>
<button>Button</button>

HTML element = tag + content

Paragraph Tag

The <p> tag is used for text paragraphs. It starts on a new line and has spacing.

<p>This is a paragraph</p>

Heading Tag

The <h1> tag is the main heading of a page. It is usually used only once.

<h1>Sweet cheese pancakes</h1>

Comments

Comments are used to explain code or hide parts of it. They are not visible on the page.

<!-- This is a comment -->

Attributes

Attributes give extra information to tags. They are written inside the opening tag.

<a href="https://google.com">Link</a>

Rules:

• Attributes are inside the opening tag
• Use = between name and value
• Value is inside quotes

Links

The <a> tag creates links.

<a href="https://google.com">Google</a>

To open in a new tab:

<a href="https://google.com" target="_blank">Google</a>

Images

The <img> tag is used to show images. It is a single tag (no closing tag).

<img src="image.jpg" alt="description">

Important attributes:

• src → image path
• alt → description (for accessibility)
• width / height → size

Paired and Single Tags

Paired tags:

• Have opening and closing tag
• Contain content

Single tags:

• No closing tag
• No content

Lists

Unordered list:

<ul>
  <li>Item 1</li>
</ul>

Ordered list:

<ol>
  <li>Step 1</li>
</ol>

Headings Hierarchy

Headings go from <h1> to <h6>. They show importance and structure.

• Use <h1> once
• Use <h2>, <h3> for sections

Semantic HTML

Semantic HTML means using tags by their meaning.

• Better SEO
• Better accessibility
• Cleaner code

Code Style Rules

• Each tag on a new line
• Keep code readable
• Indent nested elements
• Attributes separated by spaces