Scribd
Upload
15 views2 pages

HTML & CSS Essentials Guide

The document provides a comprehensive guide to HTML5 and CSS, covering the structure and syntax of HTML, including semantic tags and form elements, as well as CSS basics such as selectors and the box model. It emphasizes the importance of using semantic HTML for accessibility and readability. Additionally, it includes examples of code for practical application.

Uploaded by

Moriel Golbahar
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
15 views2 pages

HTML & CSS Essentials Guide

The document provides a comprehensive guide to HTML5 and CSS, covering the structure and syntax of HTML, including semantic tags and form elements, as well as CSS basics such as selectors and the box model. It emphasizes the importance of using semantic HTML for accessibility and readability. Additionally, it includes examples of code for practical application.

Uploaded by

Moriel Golbahar
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

The Complete HTML & CSS Guide

HTML5 Overview and Doctype


HTML5 is the latest version of HyperText Markup Language, standard for structuring content on the web.
The <!DOCTYPE html> declaration tells browsers to use HTML5 standards mode.
The <html> element wraps all content and should specify the language with lang="en".
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

HTML Tags: Semantic and Structural Elements


Semantic tags help define content meaningfully.
- <header>: Top section, often includes logo/nav
- <nav>: Navigation links
- <main>: Primary content
- <article>: Self-contained content
- <section>: Logical grouping within main
- <aside>: Sidebar info
- <footer>: Bottom section
Use them to create accessible, readable HTML layouts.
<header><h1>My Site</h1></header>
<nav><a href="#">Home</a></nav>
<main>
<article>
<h2>Article Title</h2>
<p>Content here...</p>
</article>
</main>

HTML Forms and Inputs


Forms collect data via inputs. Each input type affects behavior:
- text, password, email, number, range, checkbox, radio, file, date
Use the <label> tag with 'for' to improve accessibility.
Common attributes: placeholder, required, value, name, id.
Use method="POST" to send data securely.
<form action="/submit" method="POST">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="Send">
</form>

CSS Basics: Syntax, Selectors, and Rules


The Complete HTML & CSS Guide
CSS rules consist of selectors and declaration blocks.
Types of selectors:
- Element: p { }
- Class: .className { }
- ID: #id { }
- Attribute: input[type='text']
- Grouping: h1, h2 { }
- Combinators: div > p, div + p, div p
h1 {
color: navy;
font-size: 2em;
}

.highlight {
background: yellow;
}

CSS Box Model in Depth


Each HTML element is a box consisting of:
- Content: the inner text/image
- Padding: space around content
- Border: edge line around padding
- Margin: space outside border
Use box-sizing: border-box to include padding/border in total width/height.
div {
width: 300px;
padding: 10px;
border: 2px solid #000;
margin: 20px auto;
box-sizing: border-box;
}

You might also like