HTML Document Structure

Every HTML document begins with a basic structure that includes the DOCTYPE declaration, html, head, and body tags.

index.html
<!-- Basic HTML structure -->
<!DOCTYPE html>
<html>
  <head>
    <!-- Meta tags and title go here -->
  </head>
  <body>
    <!-- Visible content goes here -->
  </body>
</html>
Explanation

The DOCTYPE declaration defines the document type and version of HTML. The <html> tag is the root element, <head> contains meta information, and <body> contains the visible content.

Structure Basic Foundation

Meta Tags in Head Section

Meta tags provide metadata about the HTML document, such as character set, viewport settings, description, and author information.

index.html
<!-- Essential meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Basic HTML page for learning.">
<meta name="author" content="Your Name">
Explanation

Meta tags are placed in the <head> section and provide information to browsers and search engines. The charset meta tag specifies character encoding, viewport controls mobile display, description provides page summary, and author credits the creator.

Metadata Responsive SEO

HTML Header Tags

Header tags (h1 to h6) define headings in your HTML document, with h1 being the most important and h6 the least important.

index.html
<h1>This is the largest header</h1>
<h2>This is a slightly smaller header</h2>
<h3>This is a medium header</h3>
<h4>This is a small header</h4>
<h5>This is a very small header</h5>
<h6>This is the smallest header</h6>
Pro Tip: Use only one h1 per page for SEO best practices. Headers should follow a logical hierarchy (h1 → h2 → h3, etc.).
Typography Hierarchy SEO

Anchor Tags - Adding Links

Anchor tags create hyperlinks to other web pages, files, locations, or email addresses.

index.html
<!-- Basic syntax -->
<a href="https://...">Link name</a>
Explanation

The href attribute specifies the destination URL. Links can point to external websites, internal pages, files, email addresses (using mailto:), or specific sections of a page (using #id).

Hyperlinks Navigation External

Anchor Tags with Target Attribute

The target attribute specifies where to open the linked document. Use "_blank" to open in a new tab.

index.html
<!-- Syntax -->
<a href="URL">Link Text</a>

<!-- Example with target -->
<a href="https://www.google.com" target="_blank">Google</a>
Best Practice: Use target="_blank" for external links to keep users on your site.
New Window Security External

Displaying Images

The img tag is used to embed images in an HTML page. It requires a src attribute and should include an alt attribute for accessibility.

index.html
<!-- Syntax -->
<img src="image_url" alt="description">

<!-- Example -->
<img src="myPic.jpg" alt="Placeholder Image">

<!-- Attributes -->
src - Link or path to the image
alt - Text shown if the image can't load
Explanation

The src attribute specifies the image source (URL or file path). The alt attribute provides alternative text for screen readers and when images fail to load. Always include descriptive alt text for accessibility.

Media Accessibility Content

HTML List Types

HTML supports two main types of lists: unordered (bulleted) and ordered (numbered).

index.html
<!-- Unordered List Syntax -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<!-- Ordered List Syntax -->
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

<!-- List Types -->
ul - unordered list (bullet points)
ol - ordered list (numerical)
li - list item
Lists Ordered Unordered

List Examples

Practical examples of unordered and ordered lists in HTML for navigation and step-by-step instructions.

index.html
<!-- Unordered List Example -->
<ul>
  <li>Home</li>
  <li>About</li>
  <li>Services</li>
  <li>Contact Us</li>
</ul>

<!-- Ordered List Example -->
<ol>
  <li>Make up</li>
  <li>Brush teeth</li>
  <li>Eat breakfast</li>
</ol>
Navigation Steps Menu

Paragraph Text Formatting

The paragraph tag is used to define blocks of text in HTML documents for better content structure.

index.html
<!-- Syntax -->
<p>Your paragraph text goes here.</p>

<!-- Example -->
<p>This is a full paragraph of text. It is used to group sentences together in HTML.</p>
Explanation

Paragraph tags automatically add space before and after the text block, creating visual separation between paragraphs. This improves readability and content structure.

Text Layout Content

Italic Text Formatting

The italic tag is used to make text appear in italics for emphasis, citations, or technical terms.

index.html
<!-- Syntax -->
<i>Italic text</i>

<!-- Example -->
<p>This is <i>italic</i> text inside a paragraph.</p>
Note: For semantic emphasis, consider using <em> instead of <i> as it conveys meaning to screen readers.
Typography Emphasis Styling

Bold Text Formatting

The bold tag is used to make text appear in bold for emphasis, importance, or key terms.

index.html
<!-- Syntax -->
<b>Bold text</b>

<!-- Example -->
<p>This is <b>bold</b> text inside a paragraph.</p>
Note: For semantic importance, consider using <strong> instead of <b> as it conveys meaning to screen readers.
Typography Importance Styling

Image Size Attributes

Control the display size of images using width and height attributes for better layout control.

index.html
<!-- Syntax with size attributes -->
<img src="image_url" alt="description" width="value" height="value">

<!-- Example -->
<img src="image_url" alt="description" width="150" height="150">

<!-- Attributes -->
src - Link or path to the image
alt - Text shown if the image can't load
width / height - Size in pixels (what's new from what we've learnt)
Explanation

Width and height attributes control the display size of images. Setting these helps browsers reserve space for images before they load, preventing layout shifts. Values are in pixels by default.

Dimensions Layout Responsive

CSS: Inline vs Internal vs External CSS

CSS can be applied in three ways: inline within HTML tags, internally in the head section, or externally in separate files.

index.html
<p style="color: red; font-size: 18px;">Hello</p>

<style>
p {
  color: red;
  font-size: 18px;
}
</style>
style.css
p {
  color: red;
  font-size: 18px;
}
✓ Keeps HTML cleaner than inline CSS
• External CSS is preferred for maintainability
• Use Live Server in VSCode for better preview
External Internal Inline

Classes & IDs (Reusable CSS Groups)

Used to apply same styles to selected & multiple elements.

style.css
.example {
  color: blue;
  font-size: 16px;
}

#example {
  color: red;
  font-size: 10px;
}
index.html
<p class="example">Styled with class</p>
<p id="example">Styled with ID</p>
Just "#" & "."
• Classes: Reusable (multiple elements)
• IDs: Unique (one element per page)
Selectors Reusable Unique

Component Styling

Styling components with background-color, padding, border-radius, and more.

style.css
button {
  background-color: #330a0b;
  color: #f47d81;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 25px;
  border-radius: 45px;
  border: none;
}
index.html
<button>Home</button>
<button>Reach out</button>
<button>Message</button>
<button>Apply</button>
Hi Devs.
• We'll look into more properties giving life
• Every line matters. Happy Learning
• Always remember the basics
Styling Components Properties

Hover Effects & Transitions

Add interactivity with hover effects and smooth transitions.

style.css
button:hover {
  background-color: #f47d81;
  color: #330a0b;
}

button {
  transition: 0.4s;
}
[?] What happens when you add transition?
• Creates smooth animations
• Better user experience
• Try different timing values
Effects Transitions Interactivity

Margins

Moving Things Around with margins.

style.css
.element {
  margin-top: 50px;
  margin-bottom: 50px;
  margin-right: 50px;
  margin-left: 50px;
}

.special-element {
  margin-top: -50px;
  margin-bottom: -50px;
  margin-right: -50px;
  margin-left: -50px;
}
Every HTML element has default dimensions
• Positive margins: Push elements away
• Negative margins: Pull elements closer
• Use for precise positioning
Spacing Box Model Positioning

Display Properties

Control element display with block, inline-block, and inline.

style.css
button {
  border: none;
}
a {
  text-decoration: none;
}

ul {
  list-style: none;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
We now know about:
• border: none - removes default borders
• text-decoration: none - removes underlines
• list-style: none - removes bullets
Layout Lists Positioning

Using Bootstrap Icons

Enhance UI with icons instead of plain text.

index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">

<button><i class="bi bi-house"></i> Home</button>
<button><i class="bi bi-telephone"></i> Reach out</button>
<button><i class="bi bi-chat"></i> Message</button>
<button><i class="bi bi-send"></i> Apply</button>
[bonus] In lieu of heavy plain text
• Visit: icons.getbootstrap.com
• Makes pages look pretty
• Easy to implement
[homework]
1. Format the story set
2. Utilize the colors we gave you
3. Make buttons clickable
4. Make everything bigger and attractive
Keep the Learning spirit on!
Icons Bootstrap UI Enhancement

Flexbox Layout

Create flexible and responsive layouts with CSS Flexbox.

style.css
/* Flex Container Properties */
.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* Flex Item Properties */
.item {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 200px;
  order: 2;
}

Flex Direction

flex-direction: row (default)

1
2
3

flex-direction: column

1
2
3

Alignment

justify-content: center

Center
Aligned

justify-content: space-between

Space
Between
Items

align-items: center

Vertical
Center

Flex Item Properties

flex-grow: 1 (on middle item)

Normal
Grows
Normal

flex-shrink: 0 (on middle item)

Shrinks
Won't Shrink
Shrinks

order property

First in HTML
Second in HTML
Flexbox makes responsive layouts easier
• Use for one-dimensional layouts (row OR column)
• Perfect for navigation bars, card layouts, and forms
• Combine with media queries for responsive designs
Flexbox Layout Responsive

CSS Positioning

Control element placement with CSS positioning properties.

style.css
/* Positioning Properties */
.static {
  position: static; /* default */
}

.relative {
  position: relative;
  top: 20px;
  left: 30px;
}

.absolute {
  position: absolute;
  top: 0;
  right: 0;
}

.fixed {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

.sticky {
  position: sticky;
  top: 0;
}

Positioning Examples

Static
Relative
Absolute
Fixed
Sticky (scroll down)
I was hidden!
Positioning Key Points
• Static: Normal document flow
• Relative: Positioned relative to itself
• Absolute: Removed from flow, positioned to nearest positioned ancestor
• Fixed: Positioned relative to viewport
• Sticky: Hybrid of relative and fixed
Positioning Layout Display

Display Properties

Control element display with block, inline, and none.

style.css
/* Display Properties */
.block {
  display: block;
  width: 100%;
}

.inline {
  display: inline;
  margin: 10px;
}

.inline-block {
  display: inline-block;
  width: 200px;
}

.none {
  display: none;
}

.flex {
  display: flex;
}

Display Examples

display: block

Block Element 1
Block Element 2

display: inline

Inline 1 Inline 2

display: inline-block

Inline-Block 1
Inline-Block 2
Display Properties Summary
• Block: Full width, starts on new line
• Inline: Only takes necessary width, no line break
• Inline-block: Inline with block properties
• None: Completely removed from layout
• Flex: Flexbox layout mode
Display Block Inline