HTML: The skeleton
Hypertext Markup Language (HTML) is the language of the web, without HTML you wouldn’t have a website. HTML defines the content and structure of your website. Using a body for an analogy, HTML would be your skeleton, holding everything together and providing a base to hang everything off. A HTML file is made up of numerous HTML elements.
Here’s an example of a single HTML element: <h1> your content </h1>
<h1> is called an opening tag, this is the start of the HTML element and tells the browser that this is the start of a piece of content for the site.
</h1> is called a closing tag, this tells the browser that the piece of content is finished.
h1 is the type of content you want, h1 stands for heading 1 (the main title of your page).
your content is where you put the actual content for your heading, this is whatever you want the content to be.
The order in which you put HTML elements into your file affects how they are displayed on the page as well as the underlying structure of the page. Below shows two examples, both using the same HTML elements but in different orders.
Where the subtitle is before the main title doesn’t make sense structurally, as h1 should be the parent of h2 to align with the heading hierarchy.
You can add attributes to your HTML, attributes are used to provide additional information to your HTML element. An example is when you want to add a unique identifier to your element so you can style just that one element.
<p id=”summary-paragraph”> This is my summary paragraph </p>
The id attribute is added to the opening tag. After adding the id keyword, you add an equals followed by quotes. Inside the quotes you put a unique identifying word(s).
Once you have created your HTML file with all your content you have a working website, it may not look nice or do much, but it is a basic working page. This gives you your skeleton ready to hang your styles and behaviour off.
CSS: The skin
If HTML is the skeleton to our body, then Cascading Style Sheets (CSS) is the skin. CSS is used to change the look and feel of websites. It is where you define your colour schemes, fonts, spacing, layouts and more.
CSS is written in a separate file to the HTML. This is to allow separation of concerns and make our lives easier when it comes to testing and maintenance. This also makes our styles more reusable, if we put styles directly into the HTML then we wouldn’t be able to use the styles across different HTML pages.
90% of CSS is fairly straightforward, select the HTML element you want to style, specify what attribute you want to change and the value you want to change it to. Rinse and repeat this pattern and you can get very far. CSS becomes more complicated when you want to complex layouts, animations or CSS functions.
In the above example we are using three different CSS selectors. The first selects based on HTML element type. The second selects any elements with a class of ‘rounded-border’. The third selects the element with the id ‘second-subtitle’.