Introduction to HTML

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It describes the structure of a web page and consists of a series of elements that tell the browser how to display content.

Basic HTML Document Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Title</title>
</head>
<body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
</body>
</html>

HTML Headings

HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading, while <h6> defines the least important heading.

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

Text Formatting

HTML provides various tags for formatting text with special meaning.

Tag	Description	Example
`<b>`	Bold text	This text is bold
`<strong>`	Important text	This text is important
`<i>`	Italic text	This text is italic
`<em>`	Emphasized text	This text is emphasized
`<mark>`	Marked text	This text is marked
`<small>`	Smaller text	This text is smaller

HTML Links

Links are defined with the <a> tag. The href attribute specifies the URL of the page the link goes to.

Link Examples

Visit Example.com
Visit Example.com in new tab

<a href="https://www.example.com">Visit Example.com</a>
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">
  Visit Example.com in new tab
</a>

href

Specifies the URL of the page the link goes to

target

Specifies where to open the linked document (_blank, _self, _parent, _top)

rel

Specifies the relationship between the current document and the linked document

HTML Images

The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image, and the alt attribute provides alternative text for accessibility.

Example of an image with alt text

<img src="https://via.placeholder.com/400x200" alt="Placeholder Image">

src

Specifies the path to the image

alt

Specifies an alternate text for the image

width

Specifies the width of the image

height

Specifies the height of the image

HTML Lists

HTML lists allow web developers to group a set of related items in lists.

Unordered List

Item 1
Item 2
Item 3

Ordered List

First item
Second item
Third item

<!-- Unordered List -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<!-- Ordered List -->
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

HTML Tables

HTML tables allow web developers to arrange data into rows and columns.

Basic Table

Name	Age	Country
John	25	USA
Maria	30	Spain
David	28	UK

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>USA</td>
    </tr>
    <tr>
      <td>Maria</td>
      <td>30</td>
      <td>Spain</td>
    </tr>
    <tr>
      <td>David</td>
      <td>28</td>
      <td>UK</td>
    </tr>
  </tbody>
</table>

HTML Forms

HTML forms are used to collect user input. A form contains input elements like text fields, checkboxes, radio buttons, submit buttons, and more.

Registration Form

<form>
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
  </div>
  <div>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password">
  </div>
  <div>
    <label for="message">Message:</label>
    <textarea id="message" name="message"></textarea>
  </div>
  <div>
    <button type="submit">Submit</button>
    <button type="reset">Reset</button>
  </div>
</form>

HTML Div Element

The <div> element is a generic container for flow content. It has no effect on the content or layout until styled with CSS.

Div Layout Example

My Website

Home About Contact

Sidebar

Some content here

Main Content

This is the main content area.

<div class="header">
  <div class="logo">My Website</div>
  <div class="nav">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>
<div class="main-content">
  <div class="sidebar">
    <h4>Sidebar</h4>
    <p>Some content here</p>
  </div>
  <div class="content-area">
    <h3>Main Content</h3>
    <p>This is the main content area.</p>
  </div>
</div>
<div class="footer">
  <p>&copy; 2023 My Website. All rights reserved.</p>
</div>

HTML ID and Class Attributes

The id and class attributes are used to identify and style HTML elements. The id attribute specifies a unique id for an element, while the class attribute can be used on multiple elements.

ID and Class Example

This paragraph has a class of "text-primary"

This paragraph also has a class of "text-primary"

This paragraph has a unique ID of "special-paragraph"

<div id="main-content" class="container">
  <p class="text-primary">This paragraph has a class of "text-primary"</p>
  <p class="text-primary">This paragraph also has a class of "text-primary"</p>
  <p id="special-paragraph">This paragraph has a unique ID of "special-paragraph"</p>
</div>

Attribute	Usage	Uniqueness	CSS Selector
ID	Identifies a single unique element	Must be unique within the document	`#id-name`
Class	Identifies one or more similar elements	Can be used on multiple elements	`.class-name`

JavaScript Basics

JavaScript is a programming language that enables interactive web pages. It is an essential part of web development.

Simple JavaScript Example

// JavaScript code
function greetUser(name) {
  return 'Hello, ' + name + '!';
}

const userName = 'John';
const greeting = greetUser(userName);
console.log(greeting); // Output: Hello, John!

// DOM manipulation
document.getElementById('demo').innerHTML = greeting;

JavaScript Data Types

String: Textual data, e.g., "Hello World"
Number: Numeric values, e.g., 42, 3.14
Boolean: true or false
Array: Ordered collection of values, e.g., [1, 2, 3]
Object: Collection of key-value pairs, e.g., {name: "John", age: 30}
Null: Intentional absence of any object value
Undefined: Variable that has not been assigned a value

JavaScript DOM Manipulation

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page structure so that programs can change the document structure, style, and content.

DOM Manipulation Examples

// Changing text content
document.getElementById('myElement').textContent = 'New text content';

// Changing HTML content
document.getElementById('myElement').innerHTML = '<strong>Bold text</strong>';

// Changing styles
document.getElementById('myElement').style.color = 'red';

// Adding and removing classes
document.getElementById('myElement').classList.add('new-class');
document.getElementById('myElement').classList.remove('old-class');

// Creating new elements
const newParagraph = document.createElement('p');
newParagraph.textContent = 'This is a new paragraph';
document.body.appendChild(newParagraph);

// Handling events
document.getElementById('myButton').addEventListener('click', function() {
  alert('Button was clicked!');
});

HTML & JavaScript Best Practices

HTML Best Practices

Use semantic HTML elements
Always include alt attributes for images
Use lowercase for element names and attributes
Close all HTML elements properly
Use descriptive id and class names

JavaScript Best Practices

Use const and let instead of var
Use strict equality (===) instead of loose equality (==)
Avoid global variables
Use descriptive variable and function names
Comment your code appropriately

Accessibility Best Practices

Use proper heading structure
Provide text alternatives for non-text content
Ensure sufficient color contrast
Make all functionality available from a keyboard
Use ARIA attributes when necessary

Go Tutorial