- CSS is used to control presentation, formatting, and layout.
Now, let’s go over each one individually to help you understand the roles each plays on a website and then we’ll cover how they fit together. Let’s start with good ol’ HTML.
HTML is at the core of every web page, regardless the complexity of a site or number of technologies involved. It’s an essential skill for any web professional. It’s the starting point for anyone learning how to create content for the web. And, luckily for us, it’s surprisingly easy to learn.null
Let me show you what I mean. Take a look at the article below. If I were to ask you to label the types of content on the page, you’d probably do pretty well: There’s the header at the top, then a subheader below it, the body text, and some images at the bottom followed by a few more bits of text.
Markup languages work in the same way as you just did when you labeled those content types, except they use code to do it — specifically, they use HTML tags, also known as “elements.” These tags have pretty intuitive names: Header tags, paragraph tags, image tags, and so on.
Every web page is made up of a bunch of these HTML tags denoting each type of content on the page. Each type of content on the page is “wrapped” in, i.e. surrounded by, HTML tags.
For example, the words you’re reading right now are part of a paragraph. If I were coding this web page from scratch (instead of using the WYSIWG editor in HubSpot’s COS), I would have started this paragraph with an openingparagraph tag: <p>. The “tag” part is denoted by open brackets, and the letter “p” tells the computer that we’re opening a paragraph instead of some other type of content.
Once a tag has been opened, all of the content that follows is assumed to be part of that tag until you “close” the tag. When the paragraph ends, I’d put a closing paragraph tag: </p>. Notice that closing tags look exactly the same as opening tags, except there is a forward slash after the left angle bracket. Here’s an example:
<p>This is a paragraph.</p>
Using HTML, you can add headings, format paragraphs, control line breaks, make lists, emphasize text, create special characters, insert images, create links, build tables, control some styling, and much more.