The first thing that we have to understand before we start to learn how to build a website with HTML and CSS, is to determine the differences between the two programming languages, their syntax and the common terminology of each language.
What Are HTML & CSS?
HTML stands for Hyper Text Markup Language, it’s a markup language used to create web pages. HTML gives content structure and meaning for instance, paragraphs, headings or images. While CSS which stands for Cascading Style Sheets, is a stylesheet language used to style the appearance of the content for instance, colors, fonts and spacing.
HTML and CSS are independent of one another because CSS should not be written inside of an HTML document and vice versa. So, to make your understanding about these two languanges simpler, HTML represents the content while CSS represents the appearance of that content.
Understanding the Three Common HTML Terms
As you get started with HTML, at first you will encounter some strange terms used but, don’t worry about that over the time you will get used of those terms and get more familiar about it. But, there are three common HTML terms and this is where you should begin they are the tags, attributes and elements.
Elements in HTML are designator that represent the structure and consists of a start tag, content and an end tag. The elements contains of less-than(<) and greater-than(>) angle brackets and sorrounds the element name. See the example as follows:
Tags are most commonly used to mark up the start and end of an HTML Element that consist of an opening and closing tags.
Opening tag consist of a less-than sign(<) then followed by the element name and it ends with the greater-than sign (>). For instance, <p>
Closing tag consist of a less-than sign(<) then followed by a forward slash (/) and the element name and it ends with the greater-than sign (>). For instance, </p>
The content between the opening and closing tags is the content of an element. See example below:
Attributes in HTML defines a property for an element. It appear inside the opening tag and their values are placed inside the quotation marks. The most common attributes are id, name, src, href and class.
- id attribute – identifies an element
- name attribute – identifies an element
- class attribute – classifies an element
- src attribute – it specifies the source for embedable content.
- href attribute – it provide links in pages.
This is the following format of an attribute:
<a href="itsourcecode.com">It Sourcecode</a>
Now that you have knowledge about HTML elements, tags and attributes, let’s now put this together on our first webpage on my next tutorial.