HTML
HTML is the structure of every web page. This topic is about writing clean, well-structured pages by hand and understanding what each element is for.
Key focus points
How a page is put together
- Every page starts with <!DOCTYPE html>, then <html>, <head> and <body>.
- The <head> holds information about the page: <meta charset>, the viewport <meta> tag and the <title>.
- The <body> holds everything the user sees.
- Elements are opened and closed in the right order. Nesting must match.
Text content
- Headings <h1> to <h6> describe the outline of the page. One <h1> per page, then work down in order.
- Paragraphs go in <p>. Line breaks and spacing are not done with empty paragraphs.
- Lists: <ul> for unordered, <ol> for ordered, <li> for every item.
- <strong> and <em> give meaning to text. <b> and <i> only change the look.
Links and images
- <a href="..."> creates a link. Relative paths point inside your site, absolute URLs point outside.
- target="_blank" opens a new tab. Add rel="noopener" when you use it.
- <img src="..." alt="..."> always needs an alt text that describes the image.
- Set width and height on images so the page does not jump while loading.
Semantic layout
- Use <header>, <nav>, <main>, <section>, <article>, <aside> and <footer> to describe the regions of the page.
- Only one <main> per page.
- <div> and <span> are generic containers. Reach for them only when no semantic element fits.
- Semantic HTML helps screen readers and search engines understand the page.
Forms
- <form> wraps the inputs. action says where the data goes, method says how (GET or POST).
- Input types: text, email, password, number, date, checkbox, radio, file.
- Every input needs a <label>. Connect them with for and id.
- <textarea> for long text, <select> with <option> for dropdowns, <button type="submit"> to send.
- Built-in validation: required, minlength, maxlength, min, max, pattern.
Tables
- Tables are for tabular data, not for layout.
- <table> contains <thead> and <tbody>. Rows are <tr>, header cells <th>, data cells <td>.
Attributes, ids and classes
- Attributes live in the opening tag: name="value".
- id is unique on the page. class can be reused and is what CSS and JavaScript usually hook into.
- Comments: <!-- like this -->. They do not show on the page but are visible in the source.
Good habits
- Set lang on the <html> element.
- Indent nested elements so the structure is readable.
- Inspect pages with the browser DevTools to see how other sites are built.
- Validate your HTML with the W3C validator before moving on.
HTML Lab
Three small exercises. On the left you write HTML. On the right you see what the browser does with it.
Your HTML becomes a tree
Change the HTML on the left. The browser turns it into a tree of boxes. Every tag is a box, and tags inside other tags become children. Try removing a closing tag and see what happens.
Use the right tag for the job
Both versions look the same on screen. But a blind user with a screen reader, or Google, only understands the second one. Pick "Only divs", then change the tags one by one until the right side fills up.
- Nothing. A screen reader just reads all the text in one go, with no way to jump around.
div says nothing, it is just a box.What happens when you click Submit
Fill in the form and click Submit. The right side shows the message the browser sends to the server. Notice that the name of each field is what gets sent, not the text you see next to it.
GET /students?fullName=Arta+Hoxha&email=arta%40example.com&year=2&track=web HTTP/1.1 Host: dotnethow.net Accept: text/html
Practice
- Build a personal profile page by hand: header with your name, a nav with three links, an about section, a list of skills, a contact form and a footer.
- Use only semantic elements for the layout. No <div> unless you can explain why.
- Run the page through the W3C validator and fix every error.
Resources
Next up: CSS: styling the page you just built.