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.
Try it: 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.
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.
Try it: write some text content on the left. The right side shows how the page looks and what its outline is. Headings make the outline, <strong> and <em> give words meaning.
- h1My profile
- h2Skills
- h2How I learn
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.
Try it: a link is only an address and some text. Change the address and see where it points from a page that lives at /blog/first-post.html. Then try an image without its picture.
<a href="about.html">About me</a>https://mysite.com/blog/about.html<img src="skyline.jpg" alt="A photo of the Tirana skyline at sunset" width="320" height="180">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.
Try it: 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.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.
Try it: 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
Tables
- Tables are for tabular data, not for layout.
- <table> contains <thead> and <tbody>. Rows are <tr>, header cells <th>, data cells <td>.
Try it: a table is rows of cells. Header cells (<th>) tell the reader what each column means. Pick the broken examples and see what goes wrong.
- Every row has 3 cells and the header cells name the columns. A screen reader hears "Course: CSS, Credits: 6".
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.
Try it: attributes live in the opening tag and change what an element is or does. Switch them on and off and watch the tag, the button, and the selectors CSS could use for it.
- one element only
- reusable
- reusable
- no value needed
- shows on hover
<button type="button" id="save" class="btn">Save</button>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.
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.
