{"id":54238,"date":"2026-04-09T10:00:00","date_gmt":"2026-04-09T17:00:00","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=54238"},"modified":"2026-04-09T18:02:03","modified_gmt":"2026-04-10T01:02:03","slug":"html-vs-css","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/html-vs-css\/","title":{"rendered":"HTML vs CSS Explained: Key Differences, Examples & How They Work Together"},"content":{"rendered":"\r\n
\"HTML<\/figure>\r\n\r\n\r\n\r\n\r\n\r\n

HTML<\/strong> (HyperText Markup Language) defines the structure and content of a web page \u2014 headings, paragraphs, images, links, and forms. CSS<\/strong> (Cascading Style Sheets) controls how that content looks and behaves \u2014 colours, typography, layout, spacing, and responsive design. The short version: HTML = what’s on the page. CSS = how it looks.<\/strong><\/p>\r\n

You almost always use both. HTML without CSS produces an unstyled, plain-text page. CSS without HTML has nothing to target. Together, they are the foundation of every website ever built.<\/p>\r\n

\r\n

What is HTML?<\/h2>\r\n

HTML is a markup language \u2014 not a programming language. It uses tags to describe content so browsers know how to display it. Tags are written in angle brackets and usually come in pairs: an opening tag and a closing tag.<\/p>\r\n

<!DOCTYPE html>\r\n<html lang=\"en\">\r\n  <head>\r\n    <meta charset=\"UTF-8\">\r\n    <title>My Page<\/title>\r\n  <\/head>\r\n  <body>\r\n    <h1>Hello, World<\/h1>\r\n    <p>This is a paragraph.<\/p>\r\n    <a href=\"https:\/\/example.com\">This is a link<\/a>\r\n  <\/body>\r\n<\/html>\r\n<\/code><\/pre>\r\n
The <h1><\/code> tells the browser “this is the most important heading.” The <p><\/code> means paragraph. The <a><\/code> creates a hyperlink. HTML is purely descriptive \u2014 it says what things are, not what they look like.<\/p>\r\n
Semantic HTML<\/h3>\r\n
Modern HTML5 includes semantic elements that describe the purpose of content, not just its position. Using them correctly matters for accessibility and SEO:<\/p>\r\n
<header>Site navigation goes here<\/header>\r\n<main>\r\n  <article>\r\n    <h1>Article title<\/h1>\r\n    <p>Content here<\/p>\r\n  <\/article>\r\n  <aside>Related links<\/aside>\r\n<\/main>\r\n<footer>Copyright information<\/footer>\r\n<\/code><\/pre>\r\n
<header><\/code>, <main><\/code>, <article><\/code>, <aside><\/code>, and <footer><\/code> tell screen readers and search engines what each region of the page is for. A <div><\/code> with the same content gives them nothing. Search engines weight semantic structure when indexing content \u2014 it’s a direct SEO signal.<\/p>\r\n
\r\n
What is CSS?<\/h2>\r\n
CSS is a style sheet language. It selects HTML elements and applies visual rules to them. A CSS rule has two parts: a selector<\/strong> (which element to target) and a declaration block<\/strong> (what to do to it).<\/p>\r\n
\/* Target all h1 elements *\/\r\nh1 {\r\n  font-size: 2rem;\r\n  color: #1a1a2e;\r\n  font-weight: 700;\r\n}\r\n\r\n\/* Target elements with class=\"card\" *\/\r\n.card {\r\n  background: white;\r\n  border-radius: 8px;\r\n  padding: 24px;\r\n  box-shadow: 0 2px 8px rgba(0,0,0,0.1);\r\n}\r\n\r\n\/* Target the element with id=\"nav\" *\/\r\n#nav {\r\n  display: flex;\r\n  gap: 16px;\r\n  align-items: center;\r\n}\r\n<\/code><\/pre>\r\n
CSS can be applied three ways:<\/p>\r\n