Introduction to HTML – elements, tags and attributes

Hello students, welcome to Kwickprep. Every website you open, from your school site to a cricket score page, is built with one language. Which one? HTML. Today we will learn what HTML is, and the three words every exam asks: elements, tags and attributes.

Let us start with the name. HTML stands for HyperText Markup Language. It tells a web browser what to show on a page and how to arrange it. HTML is a markup language, not a programming language, because it has no calculations or decisions. It was created by Tim Berners-Lee, and the version used today is HTML 5.

Let us break the name into parts. HyperText means text that contains links, which take you to another page when clicked. Markup means we mark parts of the text, like saying this line is a heading. Language means it has a fixed set of rules that the browser understands.

You need only two free things to write HTML. First, a text editor, like gedit, Notepad or SciTE. Save the file with a name ending in dot html, like home dot html. Then open that file in a web browser, like Firefox or Chrome, to see your page.

Here is a complete, simple web page. Everything sits inside the html tag. The head part holds information about the page, like the title shown on the browser tab. The body part holds what the visitor actually sees. Here, the body shows a big heading, Welcome. Modern pages also start with a doctype line, which tells the browser this is HTML 5.

Now the first key word, tag. A tag is a keyword written inside angle brackets, the less than and greater than signs. A start tag looks like h1 in brackets, and an end tag has a forward slash before the name. Browsers accept tags in capital or small letters, but small letters are the usual style.

Tags come in two types. A container tag has a start tag and an end tag, with content in between. The paragraph tag p is a container. The bold tag b is also a container. An empty tag has no end tag, like br, which breaks to a new line. Other empty tags are hr, which draws a line, and img, which shows an image.

The second key word is element. An element is the complete unit: the start tag, the content, and the end tag together. In this line, the start tag is p in brackets. The content is Kwickprep classes. The end tag is slash p. All three together make one paragraph element.

Pause and predict. Look at this line. How many elements does it have? Only one, the b element. Which word is bold? Only Hello, because world is outside the end tag.

The third key word is attribute. An attribute gives extra information about an element, and it is written inside the start tag. It is written as a name, an equals sign, and a value in double quotes. In the image tag, src gives the image file, and alt gives text to show if the image cannot load. In the a tag, href gives the page the link opens.

Here are attributes you will use often. For img, src and alt give the file and the backup text. Width and height set the image size in pixels. For the a tag, href gives the link address. The align attribute of p sets left, center or right; it still works, but HTML 5 prefers CSS for this.

Exams often ask you to tell these three apart. A tag is just the keyword inside angle brackets. An element is the start tag, the content and the end tag together. An attribute is extra information inside a start tag, as a name and value pair.

Let us revise what we learned today. HTML is HyperText Markup Language, used to make web pages. A page has html, a head with a title, and a body. A tag is a keyword in angle brackets, and it can be a container or empty. An element is the start tag, the content and the end tag. An attribute is a name and value written inside the start tag. Type the first web page yourself and open it in a browser.