Introduction to HTML – Part 1

HTML (Hyper Text Markup Language) is the core of designing websites. Part one of this introduction covers the difference between HTML and CSS, a simple HTML page, and Paragraphs/Line Breaks/Headings.

The Ultimate Designer Toolkit: 2 Million+ Assets

Envato Elements gives you unlimited access to 2 million+ pro design resources, themes, templates, photos, graphics and more. Everything you'll ever need in your design resource toolkit.

Graphics

Icons, Vectors & More

Graphic Templates

Logos, Print & Mockups

CMS Templates

Shopify, Tumblr & More

Explore Design Resources

HTML and CSS – The difference

Think of HTML as the structure of the website you are making. It will contain the text, images and links – all put in the correct order – to compose the page that you want to display. CSS is the look and feel of the page. In your CSS you define the colours, fonts, backgrounds and borders surrounding the content you have in your HTML file. We explain below how to attach your CSS file to your HTML file, but read our CSS tutorials for more information on that topic.

A simple HTML page

The best way to learn is by doing, so the following are a few examples of HTML in action. This is, at it’s simplest, a HTML page:

That’s it – it’s much more straight forward than you would expect. HTML works on a system of tags, with each one surrounded by brackets. Any tag that you open must be closed. This can be done as above with a seperate opening and closing tag (i.e. body ) or using one tag such as below, for a line break, br. Here is a brief description of the tags used in the above example:

html – This tells your web browser that you want to display a HTML page – everything inside those tags is HTML.

head – The ‘head’ is a section where you can show the title of the document and provide information about what the page contains.

title – The title is self explanatory, and displays in the title bar of your web browser window.

link rel="stylesheet" type="text/css" href="style.css" / – This links the CSS file (style.css) to your HTML document.

body – The ‘body’ is the main section. Anything inside the body tag will display in your web browser.

This won’t really do much good though, as it will display a blank page with ‘Website Text’ inside it. The following will explain how to get a little more advanced:

Paragraphs, Line Breaks and Headings

This is a slightly more advanced example which introduces the idea of defining headings, using the h1 tags, putting p around paragraphs, and using br where you just want a normal line break. Having one page is OK, but generally you would want more than one page, with the ability to link them together…

Introduction to HTML Part 2 – Links, Pictures and Lists