Member-only story
CSS for UI Designers
HTML & CSS: a quick and easy introduction for total beginners
If you’ve ever wondered how websites are built, you’ve come to the right place. This guide is for total beginners, particularly UI designers wanting to understand the basics of HTML and CSS — the essential building blocks of every web page.
Video version of this article:
What is HTML?
HTML (HyperText Markup Language) is the backbone of a website. It provides the structure and tells your browser what each piece of content is. You can actually take a peek at a website’s HTML anytime. Just right-click on a web page (for example, in Chrome) and select Inspect.
This opens up the Developer Tools, where you can see the HTML structure of the page you’re viewing. You can even make temporary changes to the code just to experiment! Don’t worry. These changes only exist in your browser and will disappear as soon as you refresh.
HTML elements & tags
HTML consists of elements, essentially characters enclosed within angled brackets known as tags. Most HTML elements have an opening tag and a closing tag.
For example:<p> is the opening tag, and </p> is the closing tag. Tags like these define the type of content they enclose. The <p> tag, for instance, tells the browser to display the enclosed content as a paragraph. The tags themselves are not visible on the page.
