Links

Content Analysis

Before writing HTML, always analyze the content. A website is not just random elements — it has structure.

• Find main sections
• Create heading hierarchy
• Choose correct HTML elements

Block and Inline Elements

Block elements take full width and go one under another.

<h1>Title</h1>
<p>Paragraph</p>

Inline elements take only needed space.

<a href="#">Link 1</a>
<a href="#">Link 2</a>

Links

The <a> tag creates links.

<a href="https://example.com">Visit site</a>

Open in new tab:

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit</a>

List of Links

Use lists for multiple links (better structure and SEO).

<ul>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
</ul>

Images as Links

<a href="#">
  <img src="image.jpg" alt="Gym" width="300">
</a>

Correct Nesting

<ul>
  <li>
    <a href="#">Link</a>
  </li>
</ul>

Address Tag

<address>
Email: exemple@nikitagoluban.eu<br>
Phone: +123456789<br>
City, Country
</address>

Phone and Email Links

<a href="tel:+123456789">Call</a>
<a href="mailto:exemple@nikitagoluban.eu">Email</a>

Download Files

<a href="file.pdf" download>Download file</a>

Buttons

<button type="button">Click me</button>

Use link → navigation
Use button → actions

Famous Places

• 

  Arc de Triomphe

  One of the most famous monuments in Paris.

  Open in Google Maps

Contacts

How to Show Code on a Webpage

1. The Problem

The browser reads HTML code and turns it into elements.

Example:

Visit

👉 The browser does NOT show the code. 👉 It creates a clickable link.

2. How to Show Code Instead of Running It

If you want to show the code, you must replace:

• < instead of <
• > instead of >

<a href="https://example.com">Visit</a>

👉 Now the browser shows the code (not a link).

3. What is <pre>?

The <pre> tag keeps formatting.

It means:

• Spaces stay
• Lines stay
• Indentation stays

4. Why we need <pre>

Without <pre>, code looks messy:

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

👉 Hard to read

5. With <pre>

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

👉 Clean and easy to read

6. Final Rule

• Normal HTML → browser executes it
• Use < and > → show code
• Use <pre> → keep formatting