HTML stands for Hypertext Markup Language, which I know doesn’t really tell you anything, but I’d be remiss if I didn’t tell you what those letters stand for. It is not a programming language (it is a markup language), but many people still refer to it as such. It defines the structure of a web page and tells the browser what to display using HTML elements. These elements carry meaning, such as whether this line should be a heading or that bunch of text a list. All web pages use at least some HTML and if you decide to study web development, HTML is probably the first language you’ll learn.
The first version of HTML was written in 1993 and since then the language has undergone many changes through multiple versions. The current version is known as HTML5, officially released in 2014 though available for years before that. HTML5 is an important update for a few reasons. It includes graphic elements and elements which allow video and audio content to play in browsers. Previously this was achieved using third-party software such as Adobe Flash, which was not available on all platforms.
HTML elements are the items that make up a web page. These are headings, paragraphs, images, forms, and just about anything else you see. They are all displayed using tags, represented by greater and lesser than signs. For example, here is how you would write a paragraph in HTML:
<p>Hi, I'm a paragraph!</p>
The <p> part is referred to as the opening tag, and the </p> is the closing tag. The text in between is the only part that will be displayed on the web page and is known at the content.
Some elements are considered ‘self-closing’ because they have no content and do not need a separate closing tag. For example, a ‘break’ element looks like this:
That’s all! This creates a line break after another HTML element, which can be useful when you do not want to use the <p> tags. A line break has no content; all the information it needs is in the tag itself, so it is self-closing.
All HTML elements can include attributes within their opening tag which provide additional information to the browser. Most attributes come in name/value pairs. Some elements have mandatory attributes such as the image element:
<img src="image_name.jpg" alt="image description">
The ‘src’ attribute tells the browser where to find the image to be displayed; the given filename is the value. The ‘alt’ attribute describes the image in the event the user is using a screen reader or is otherwise unable to view the image itself. There are also optional tags that can be added to describe the height or width, among other things.
Every HTML element has a separate list of attributes that can be applied, but there are global attributes which can be added to any element. One of these is the ‘style’ attribute added which allows you to change various visual elements such as the color, font weight and background color. However, as you’ll see in the upcoming CSS post this is not the best way to achieve such effects.
If you’re interested in learning how to write HTML, check out the W3 Schools website which is a great place to start. You can also refer to the web development section of my resources list where I’ve linked some courses which will teach you HTML, among other things.