HTML Basics

Concept	Description	Example
HTML	The language used to structure content on the web.	<h1>Hello World</h1>
Element	A complete structure consisting of an opening tag, content, and closing tag.	<p>This is a paragraph.</p>
Attributes	Additional information added to a tag.	<a href="page.html">Link</a>

Structure tags:
<header> <main> <section> <footer>

Content tags:
<h1> <p> <a> <img> <ul> <li>
                        

Tag	Name	Description	Example
<h1>	Heading (H1)	Main title of the page, usually one per page.	<h1>Main Title</h1>
<h2>	Heading (H2)	Used for major sections.	<h2>Section</h2>
<h3>-<h6>	Subheadings	Used for smaller subsections.	<h3>Subsection</h3>
<p>	Paragraph	Defines a block of text.	<p>This is a paragraph</p>
<a>	Anchor (Link)	Creates a hyperlink.	<a href="page.html">Link</a>
<img>	Image	Embeds an image into the page.	<img src="photo.jpg" alt="Description">
<div>	Division	A generic container used to group content.	<div>Content</div>
<span>	Inline Container	Used to style small parts of text.	<span>highlight</span>
<br>	Line Break	Creates a line break inside text.	Hello<br>World
<code>	Code tag	sed to define a piece of computer code. The content inside is displayed in the browser's default monospace font.	<p> The CSS <code>background-color</code> property defines the background color of an element. </p>

Unordered:
<ul>
  <li>Item</li>
</ul>

Ordered:
<ol>
  <li>Step</li>
</ol>
                        

Tag	Name	Description	Example
<ul>	Unordered List	Creates a bullet point list.	<ul><li>Item</li></ul>
<ol>	Ordered List	Creates a numbered list.	<ol><li>Item</li></ol>
<li>	List Item	Defines an item inside a list.	<li>Item</li>

Link:
<a href="page.html">Go there</a>

Image:
<img src="photo.jpg" alt="Description">
                        

Element	Purpose	Example
<a>	Links to another page, file, or location.	<a href="about.html">About</a>
<img>	Displays an image.	<img src="cat.jpg" alt="Grey cat">
<audio>	Embeds sound content.	<audio controls>...</audio>
<video>	Embeds video content.	<video controls>...</video>
<iframe>	Embeds another webpage or document.	<iframe src="..."></iframe>

Rule:
use alt text for meaningful images
                        

<form action="/submit" method="POST">
  <label for="username">Name</label>
  <input type="text" id="username" name="username">
  <input type="submit" value="Send">
</form>
                        

<form> Attributes

Attribute	Description	Example
action	Where the form data is sent on submit.	action="/submit"
method	How data is sent. GET appends to URL, POST sends in body.	method="POST"

Form Elements

Element	Description	Example
<label>	Readable label for an input. for= must match input id=. Clicking the label focuses the linked input — it does not autofill it.	<label for="name">Name</label>
<input>	Accepts user input. Behaviour set by type attribute.	<input type="text" name="q">
<select>	Dropdown list. Populated with <option> elements.	<select name="colour">...</select>
<option>	A choice inside <select> or <datalist>. value= is what gets submitted.	<option value="red">Red</option>
<datalist>	Suggestions for a text input. Linked via list= on <input> matching datalist id=.	<datalist id="colours">...</datalist>
<textarea>	Multi-line text input. Size set with rows= and cols=. Default text goes between the opening and closing tags.	<textarea rows="4">Default text</textarea>
<button>	Triggers an action, often submit.	<button>Send</button>

Input Types

type=	Description	Example
"text"	Single row text input.	<input type="text">
"password"	Single row text — characters are hidden.	<input type="password">
"number"	Numeric input only.	<input type="number">
"range"	Slider to select a number from a range. step= controls how much each move increases the value.	<input type="range" min="0" max="100" step="10">
"checkbox"	A single checkbox. Multiple can be selected.	<input type="checkbox" name="agree">
"radio"	Radio button. Only one per name= group can be selected.	<input type="radio" name="size">
"submit"	Submit button. value= sets the button label.	<input type="submit" value="Send">

Common Input Attributes

Attribute	Description	Example
placeholder	Hint text shown inside the field before the user types. Not submitted.	<input placeholder="e.g. London">
name	Key sent with the form data. Required for the field to be submitted.	<input name="city">
id	Links the input to a <label for=>. Used by CSS and JavaScript — not submitted.	<input id="city">
value	Pre-fills the field, or sets the label on a submit button.	<input type="submit" value="Send">

Name and value on submission:

When a form is submitted, each field sends a name=value pair.
The name attribute is set on the <input>, <select>, or <textarea>.
The value is what the user typed or selected.

  <input type="text" name="city">  →  city=London

Watch out — <option> uses value=, not id=.
  value= is what gets submitted.
  id= is only for targeting with CSS or JavaScript.

Radio buttons and checkboxes — put <input> before <label>.
  Standard text input:  <label> then <input>
  Radio / checkbox:     <input> then <label>  ← control appears to the left of the text

Select dropdowns pre-fill with the first option by default.
  To show a prompt instead (e.g. "Choose a size"), add a first <option> with
  disabled and selected before your real choices:

  <select name="size" required>
    <option value="" disabled selected>Choose a size</option>
    <option value="s">Small</option>
  </select>

  disabled → user cannot pick this option, it is prompt text only
  selected → makes it the visible default when the page loads
  value="" + required on <select> → form will not submit without a real choice
                        

<input type="email" required minlength="5" maxlength="100">
                        

Attribute	Description	Example
required	Field must not be empty.	<input required>
minlength	Minimum number of characters — for text inputs.	<input type="text" minlength="3">
maxlength	Maximum number of characters — for text inputs.	<input type="text" maxlength="50">
min	Minimum acceptable value — for number inputs.	<input type="number" min="1">
max	Maximum acceptable value — for number inputs.	<input type="number" max="100">
pattern	Regular expression the input must match.	<input pattern="[A-Za-z]+">
type="email"	Validates a correctly formatted email address.	<input type="email">
type="url"	Validates a correctly formatted URL.	<input type="url">
type="number"	Only allows numeric input.	<input type="number">

If a validation fails on submit:
→ the browser shows an error message explaining what to fix
→ the form will not submit until all validations pass

Use novalidate on <form> to disable built-in validation when writing custom JS validation.
                        

<header>
<nav>
<main>
<section>
<footer>
                        

Tag	Purpose	Example
<header>	Describes the masthead/header of the site or a section. Contains introductory content — logo, site title, navigation.	<header>Site title</header>
<nav>	Wraps navigation links — menus, tables of contents, indexes. Use <nav> not <div> for any navigational group of links.	<nav><ul>...</ul></nav>
<main>	Wraps the content unique to that page — the central topic. Not <section>, not <div>. Only one <main> per page.	<main>...</main>
<section>	Describes the semantic meaning of a region — groups related content. Use when the content forms a distinct thematic block.	<section><h2>About</h2></section>
<article>	Describes the semantic meaning of a region — self-contained content that could stand alone (blog post, news story, comment).	<article>Post</article>
<aside>	Complementary content to the page or the region it sits in — sidebars, callouts, related links. Not the main content.	<aside>Related links</aside>
<footer>	Closing content for a page or section.	<footer>Copyright</footer>

Use semantic elements when they describe purpose better than <div>

Only one <h1> per page — two <h1> elements is invalid.
<nav> = navigation links (menus, indexes) — not just any group of links
<aside> = complementary to the page — not inside main content
                        

Topic	Description	Example
Comments	Notes inside code that do not appear on the page.	<!-- comment -->
Entities	Special character codes in HTML.	&copy; &lt; &gt;
Metadata	Information in the head section for the browser.	<meta charset="UTF-8">
Making the site responsive	Placed in the <head>. Ensures the page matches the device width and enables responsive behaviour on mobile	<meta name="viewport" content="width=device-width, initial-scale=1.0">