Introduction to HTML5 - johnverz22/webdev1-lessons GitHub Wiki

1. Introduction to HTML Basics

HTML (HyperText Markup Language) is the standard language for creating web pages. It uses a system of tags and attributes to define the structure and content of a webpage.

Core Concepts:

  • Tags: Keywords enclosed in angle brackets (e.g., <tag>).
  • Elements: The combination of a start tag, content, and an end tag (e.g., <p>Content</p>).
  • Attributes: Provide additional information about elements (e.g., <p class="example">).

2. HTML Tags and Elements

HTML is made up of a series of elements that define the structure and presentation of web content.

Example of an HTML Element:

<p>This is a paragraph.</p>
  • <p> is the start tag.
  • This is a paragraph. is the content.
  • </p> is the end tag.

Common Tags:

  • <html>: The root element of an HTML document.
  • <head>: Contains metadata. Metadata is used by browsers (how to display content or reload the page), search engines (keywords), and other web services.
  • <body>: Contains the visible content.

3. HTML Paragraphs

The <p> tag defines a paragraph.

Example:

<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>

4. HTML Line Breaks

The <br> tag inserts a line break without starting a new paragraph.

Example:

<p>This is the first line.<br>This is the second line.</p>

5. HTML Headings

HTML provides six levels of headings from <h1> to <h6>, where <h1> is the most important and <h6> is the least.

Example:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

6. HTML Text Formatting

Tags for formatting text include:

  • <b> or <strong>: Bold text.
  • <i> or <em>: Italic text.
  • <u>: Underlined text.

Example:

<p>This is <strong>bold</strong>, <em>italic</em>, and <u>underlined</u> text.</p>

7. HTML Lists

Ordered List:

<ol>
  <li>First item</li>
  <li>Second item</li>
</ol>

Unordered List:

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

8. HTML Links

The <a> tag creates hyperlinks.

Example:

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

9. HTML Navigation

The <nav> tag defines a navigation menu.

Example:

<nav>
  <a href="/home">Home</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

10. HTML Comments

Comments are ignored by browsers and are used to annotate the code.

Syntax:

<!-- This is a comment -->

11. HTML Semantics

Semantic tags clearly define the purpose of elements:

  • <header>: Defines a header section.
  • <article>: Defines an independent content section.
  • <footer>: Defines a footer section.

Example:

<header>
  <h1>Welcome to My Website</h1>
</header>
<article>
  <p>This is an article.</p>
</article>
<footer>
  <p>&copy; 2025 My Website</p>
</footer>

12. HTML Tables

Tables organize data in rows and columns.

Example:

<table border="1">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

13. HTML Horizontal Line

The <hr> tag creates a horizontal rule to separate content.

Example:

<p>Above the line</p>
<hr>
<p>Below the line</p>

14. HTML Forms

Forms collect user input.

Example:

<form>
  <label for="name">Name:</label>
  <input type="text" id="name">
  <button>Submit</button>
</form>

15. HTML Div

The <div> tag is a container for grouping elements.

Example:

<div>
  <h1>Section Title</h1>
  <p>Some text inside the div.</p>
</div>
⚠️ **GitHub.com Fallback** ⚠️