Skip to content

Latest commit

 

History

History
140 lines (117 loc) · 2.74 KB

README.md

File metadata and controls

140 lines (117 loc) · 2.74 KB

HTML Guide

A reference tool for learning and understanding the basic structure and elements of HTML.

Table of Contents

  1. Basic Structure of an HTML Document
  2. HTML Elements
  3. Common HTML Elements with Examples
  4. Nesting and Indentation
  5. HTML Elements with Attributes
  6. Class and ID Attributes

Basic Structure of an HTML Document

HTML documents have the following basic structure:

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <p>My first paragraph</p>
  </body>
</html>

HTML Elements

An HTML element consists of:

  • Opening Tag
  • Content
  • Closing Tag
<p>This is a paragraph</p>

Common HTML Elements with Examples

Here are some common HTML elements with code examples and their output.

Paragraph

<p></p>
<p>This is a paragraph.</p>

Headings

<h1></h1>
<h3></h3>
<h6></h6>
<h1>Heading level 1</h1>
...
<h6>Heading level 6</h6>

Ordered List (numbers)

<ol>
  <li>George Washington</li>
  <li>John Adams</li>
</ol>

Unordered List (bullets)

<ul>
  <li>George Washington</li>
  <li>John Adams</li>
</ul>

Line Break (Self-closing)

<br>
<br>

Button

<button></button>
<button>Click Me</button>

Div

<div></div>
<div>This is a div</div>

Input (Self-closing)

<input>
<input>

Nesting and Indentation

In coding, nesting is when you put one tag completely inside another tag's content. Indentation helps you organize your code and makes it more readable.

<div>
  <h1>Weekday</h1>
  <p>Monday</p>
</div>

HTML Elements with Attributes

An attribute adds extra information to an HTML element.

Image (Self-closing)

<img src="https://imgur/cats.png">
<img alt="dog running" src="https://dogs.com/image.jpg" class="dog-pic">

Link (anchor tag)

<a href="https://www.google.com"> This is a link to Google</a>
<a href="https://www.youtube.com" target="_blank">YouTube popout</a>

External Font

<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
h1 { font-family: 'Pacifico', serif; }

Input with Placeholder (Self-closing)

<input placeholder="type here">

Class and ID Attributes

Details about assigning and selecting classes and IDs.

/* CSS class and id examples */
.my-class { text-align: right; }
#my-id { color: blue; }