HTML and CSS: structure and skin

Three ways to see it

1. 1

   HTML is structure. CSS is style. JavaScript, which we will meet next lesson, is behaviour. Keep that mental separation and the rest is detail. HTML stands for HyperText Markup Language. You wrap content in tags to give it meaning. A heading goes in h1 through h6. A paragraph goes in p. A link goes in a. A button goes in button. A list goes in ul or ol with li children. A piece of text grouped only for styling goes in span. A chunk of layout goes in div. Semantic tags like header, nav, main, article, section, aside, footer tell both browsers and screen readers what each region is for. Use them. Bilal at FBR using a screen reader will thank you.

2. 2

   Way one, semantic structure. A NADRA-style hero in HTML alone: header tag wraps the whole top band; nav for the menu; h1 with the title 'Apply for your CNIC online'; p with the supporting sentence; form with one input and one button. No styles yet. The page is ugly but the meaning is complete. A blind user with a screen reader can already navigate it. A search engine can already index it. This is why HTML-first thinking is not optional, it is the spine.

3. 3

   Way two, CSS to paint it. CSS is a list of rules of the form selector { property: value }. To give the header a green background, you write header { background: #006633; color: white; padding: 24px }. To centre the title, you use flexbox: header { display: flex; align-items: center; justify-content: space-between }. Flexbox is the single most important layout primitive in modern CSS. It replaces the table-based, float-based mess that web layout used to be. Spend a week mastering flex-direction, justify-content, align-items, and gap. After that, grid is the second tool for two-dimensional layouts.

The why-tree

Try this with Claude

AI-edge prompt to try with Claude: 'Generate semantic HTML plus Tailwind CSS for a NADRA Pak-ID portal hero. Include a sticky top nav with green branding, a hero with title, subtitle, CNIC input, and primary CTA button. Make it mobile-first, accessible, and use rounded-2xl buttons with shadow-md. Return one file under 60 lines.' Compare the output to your hand-built version. What did the model do better? What did it overlook?