HTML Tutorial

HTML stands for HyperText Markup Language. It is the standard language used to create web pages. Every website you visit, from a small blog to a big shopping site, is built with…

You do not need any special software to write HTML. A simple text editor like Notepad and a web browser are enough. Follow these steps to make and run your first web…

Every HTML page follows the same basic structure. Once you remember it, you can start any web page from this skeleton. Parts of an HTML page Part Meaning <!DOCTYPE html> Tells the…

The <meta> tag gives information about the web page to the browser and to search engines. It is placed inside the <head> and has no closing tag. The information is written with…

The <head> element is a container for information about the page, called metadata. Nothing inside the head is shown on the page, except the title which appears on the browser tab. Tags…

This page is a quick reference of the most used HTML tags. You will learn each of them in detail in the next chapters. Page structure Tag Meaning <html> Root of the…

A web page is made of many HTML elements, and each element is written with tags. Tags are like labels that tell the browser what the content is. HTML tags A tag…

Attributes give extra information about an HTML element. They are always written inside the opening tag, as a name and a value. Here href and title are attributes of the <a> tag….

HTML headings are titles and sub-titles on a page. There are six levels, from <h1> (the most important) to <h6> (the least important). Browsers show h1 in the biggest size and h6…

The <p> tag defines a paragraph. The browser adds some space before and after each paragraph. Extra spaces and lines are ignored HTML shows extra spaces and new lines in your code…

Every HTML element has a default display type. The two most common types are block and inline. This decides how the element takes space on the page. Block elements A block element…

<div> and <span> are two generic containers. They have no meaning of their own and no look by default. We use them to group content, so that we can style it with…

The class and id attributes give a name to an HTML element. With these names, CSS can style the element and JavaScript can find it. The class attribute A class can be…

You can change the look of an HTML element with the style attribute. This is called inline CSS. The value is made of CSS property and value pairs. Text colour and background…

HTML has special tags to format text, for example to make it bold, italic or highlighted. Some tags only change the look, and some also give a meaning to the text. Tag…

A comment is a note in your code that the browser ignores. It is not shown on the page. Comments help you and other developers to understand the code later. Syntax A…

Links (hyperlinks) are what connect web pages to each other. You click a link and go to another page, a file or a part of the same page. A link is created…

Images make a page more interesting. In HTML an image is added with the <img> tag. It is an empty element, so it has no closing tag. Attributes of the img tag…

HTML lists group related items together. There are three types: unordered lists (bullets), ordered lists (numbers) and description lists (terms with meanings). Unordered list (ul) Use <ul> for a list where the…

Frames were used in old websites to split the browser window into several parts, where each part loaded a different HTML page. They were created with the <frameset> and <frame> tags. How…

An iframe (inline frame) shows another web page inside your page. It is used to embed things like YouTube videos, Google Maps and payment forms. Syntax Attribute Meaning src Address of the…

The <input> tag is the most flexible form element. The type attribute decides what kind of field it is. HTML5 added many new types, which give better keyboards on phones and built-in…

HTML Forms are used to collect some data from users on a webpage. Learn Forms Elements – Input text, check boxes, radio & submit buttons with Examples here

An HTML table shows data in rows and columns. Tables are for data, like a price list or a timetable. Do not use tables to design the layout of a page; use…

Sometimes one cell must take the space of more than one cell. HTML has two attributes for this: colspan joins cells across columns, and rowspan joins cells down rows. They are used…

Some characters have a special job in HTML, like < and >. Other characters, like the copyright sign, are not on the keyboard. To show them, we use HTML entities. An entity…

A semantic element is a tag whose name tells its meaning. <footer> clearly says “this is a footer”, but <div> says nothing. HTML5 added many semantic tags, so that browsers, search engines…

Visitors open websites on phones, tablets, laptops and big monitors. A responsive page changes its layout to fit the screen. HTML and CSS together make it possible, and it needs only a…

HTML5 is the fifth major version of HTML. It became an official W3C recommendation in 2014, and it is what we use today. It made the web richer, because many things that…

Multimedia means sound, video and animation on a web page. In the past, websites needed plugins like Flash. Today every modern browser plays audio and video with the built-in <audio> and <video>…

The <video> tag plays a video file in the browser, with no plugin. The browser shows its own play, pause and volume buttons when you add the controls attribute. Basic example The…

The <audio> tag plays sound, like music or a podcast, directly in the browser. Add the controls attribute to show the player buttons. Basic example The browser picks the first file format…

The <canvas> element creates an empty drawing area on the page. By itself it shows nothing. You draw on it with JavaScript, so it is used for charts, games and animations. Create…