HTML (Hyper Text Markup Language) and CSS (Cascading Style Sheet)
HTML & CSS are the building blocks of most websites today and form a core element of any Development course. You must develop a strong understanding of these languages before you even think of starting a career in web development. Happily, we offer amazing courses on this, check them out.
What is HTML?
HTML tells your browser how to display text and images in a webpage. With HTML, you use tags to represent the various elements, determining the placement of paragraphs, headings, data tables, embedded images and video.
The importance of HTML is too often understated! HTML continues to be the predominant programming language for creating web pages. It is the skeleton of a web page, designed to allow website creation.
You may not end up using HTML every single day, especially when you’re developing websites through CMS (Content Management Systems) like WordPress, Wix, Joomla!, and Foursquare but when you do need it, you will be deeply grateful that you took the time to learn it. Being able to switch over to the HTML view mode in CMS websites and doing some manual ‘hacking’ to the code to get the website to behave is extremely valuable. You will save yourself hours of time and frustration (and delay the onset of grey hairs), not to mention that of course, you will be able to build websites from scratch without using a CMS system.
See some examples of HTML code below:
HTML5 offers other semantic html elements that you can add to the <body> to define different parts of a web page:
You can find more information on HTML5 below.
A <head> tag starts the header section of your file. The content that is included here will not appear on your webpage. Instead, it contains metadata for search engines and information for your web browser.
For basic webpages, the <head> tag will contain your title, and that’s basically it. But there are a few other things that you can include, which we’ll show you in a moment.
This tag sets the title of your webpage, that’s the name that will be displayed as the tab title when it’s opened in a browser, see below:
Metadata is primarily used by search engines and includes information about what’s on your page. There are a number of different meta fields, but these are some of the most commonly used:
- Description – A basic description of your webpage.
- Keywords – A selection of keywords applicable to your webpage – Please note that this meta tag now has very little effect on SEO.
- Author – The author of your webpage.
- Viewport – A tag for ensuring that your webpage looks good on all devices.
<meta name=”description” content=”A basic HTML tutorial”>
<meta name=”keywords” content=”HTML,code,tags”> Please note that this meta tag now has very little effect on SEO.
<meta name=”author” content=”MakeUseOf”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
The “viewport” tag should always have “width=device-width, initial-scale=1.0” as the content to ensure your page displays well on mobile and desktop devices.
After you close the header section, you get to the body of the webpage. You open this with the <body> tag, and close it with the </body> tag. That goes right at the end of your file, just before the </html> tag.
All of the content of your webpage goes in between these tags. See below:
Everything you want to be displayed on your page.
<h1> <h2> <h3> <h4> <h5> and <h6>
<h1>Big and Important Header</h1>
The <h1> defines a level-one header on your page. (Uber important for SEO). This will usually be the title of the page, and there will ideally only be one on each page.
<h2>Slightly Less Big Header</h2>
<h2> defines level-two headers such as section headers,
<h3> level-three sub-headers, and so on, all the way down to <h6>.
Image Source: Make Use Of
The paragraph tag starts a new paragraph. This usually inserts two line breaks.
Look, for example, at the break between the previous line and this one. That’s what a <p> tag will do.
<p>Your first paragraph.</p>
<p>Your second paragraph.</p>
Your first paragraph.
Your second paragraph.
This tag defines important text. In general, that means it will be bold.
<strong>Very important things you want to say.</strong>
Very important things you want to say.
What’s the difference between HTML and HTML5?
HTML or Hyper-Text Markup Language can be referred to as the Worldwide Web’s primary language. Most of the web pages hosted on the internet are written in some variation of HTML. Via HTML, developers ensure exactly how multimedia, text, and hyperlink among other things get displayed in web browsers. From the elements that establish connections with your document (hypertext) to the ones that make these documents interactive (e.g. forms); all are constituents of HTML.
The one consistent thing about the field of information technology is that periodic updates/changes are inevitable. No language is capable of avoiding upgrades and/or new releases. HTML is no exception. HTML5 was released with the primary objective of improving the World Wide Web experience for the developers and the end-users. One of the biggest advantages is that HTML5 has over its unnumbered predecessor is that it has high-level audio and video support which was not a part of the version specifications in previous HTML’s.
What is CSS?
CSS stands for Cascading Style Sheets. CSS is all about the look and the layout of a webpage within the areas set out by the HTML. It adds styling to a webpage such as fonts, colours, and is fundamental for layouts, particularly for the automatic, fluid rearranging of elements on a web page when viewed in different screen widths.
CSS is not a markup language like HTML, but rather a style sheet language. CSS, for example, allows you write code to make all the headings on your entire website purple; with CSS you would only need a single instruction for that instead of hand-coding each heading separately.
What’s the difference between CSS & CSS3?
The main difference between CSS and CSS3 is that CSS3 has modules.CSS is the basic version and it does not support responsive design. CSS3, on the other hand, is the latest version and supports responsive design. CSS cannot be split into different documents called modules whereas CSS3 can be split in modules. Also, CSS being an older version of CSS3, it is slower and less responsive.
In addition to this, CSS3 has many alignment features. CSS3 provides a box-sizing tool which will allow the user to get the correct size of any element without making any changes in dimensions or padding of the element. CSS does not have any box-sizing tool and hence the user needs to use the standard procedures defined to align text.
CSS provides basic colour schema and standard colours. CSS3 supports RGBA, HSLA, HSL and gradient colours. It also supports rounded image corners for text boxes.
Multi-column text blocks can be defined in CSS3. CSS only supports single text blocks.
Both HTML and CSS are frequently used. Have a look at this graph, which shows commonly used programming languages, from the 2018 Stack Overflow Developer Survey.
What’s the difference between a Markup Language & a Style Sheet Language?
A Markup Language is a computer language that is used to specify instructions for the data in a document. In other words, markup instructions aren’t the data in the document; they are data about the data in the document. A markup language is not a programming language because it does not have conditional statements such as “if” statement. A Markup Language is used to define exactly how multimedia, text, and hyperlink among other things get displayed in web browsers.
A Style Sheet Language is used to define what an element will look like when displayed in a browser. A style sheet language defines the look and the layout of a webpage within the areas set out by the markup language. This language adds styling to a webpage such as fonts, colours, and is fundamental for layouts, particularly for the automatic, fluid rearranging of elements on a web page when viewed in different screen widths.
Reasons to Learn HTML and CSS:
- HTML and CSS are the building blocks of all websites
- They are the core element in any Development Course
- These are both used and supported widely by browsers
- HTML is an easy language to learn and use. From there, you can move on to learn other Web and app development languages like Python.
- Nowadays, it’s quite easy to take a free Web template and build a website, however, your website will end up looking just like everyone else’s. Knowing HTML and CSS will enable you to customise websites.
How to Learn HTML and CSS:
With our Web Fundamentals HTML & CSS training courses, you will learn how to create and develop web pages. So whether you are a professional web developer or a beginner wanting to design your own website, we have a course to suit your skillset. Have a look at our Training Courses Here.