HTML stands for HyperText Markup Language and is one of the web’s basic building blocks along with CSS (Cascading Style Sheets) and Javascript. (What CSS and Javascript are will be answered in future blog posts.) HTML is the structure of all the Internet’s web pages in the form of headings, paragraph breaks, to distinguish certain content from others. You can also insert images with HTML.
HTML is a markup language and not a programming language, because HTML code only has the task of providing structure. In order for a language to be called a programming language, it needs to be possible to execute commands, which is not possible with HTML.
One really wonders why it is really important to structure web pages. A big reason is to make design and functionality possible, which is achieved in a collaboration between HTML and CSS and HTML and Javascript respectively. If HTML is the structure, you can say that CSS is the design and Javascript functionality of a web page.
In order to make all the headings on a web page red, a structure in the HTML code is needed that makes it possible to distinguish the headings from other content. In the same way, it is with functionality. In order to have a pop-up window appear when you click a button on a web page, that button needs to be marked in the HTML code.
Another reason why it is important to structure web pages is that the structure is used by search engines. The fact that this blog post is entitled “What is HTML”, which is marked in the HTML code, makes search engines understand that this blog post is about HTML and thus places more emphasis on it than on the other content.
How to use HTML
Let’s explain what HTML is using practical examples.
HTML is really very simple. For example, how to write a paragraph element:
<p> This is a common paragraph. </p>
A paragraph could be equated with body text and has the abbreviation p. You start with the start tag <p>, end with the end tag </p> and leave the content between these tags. The entire line of start tags, content, and end tags is called an element, in this case, a paragraph element.
Headlines are often important on websites so that a user can easily navigate to the right place as quickly as possible. For headings, the tags h1, h2, h3, h4, h5 and h6 are used, where the h stands for heading and the number defines the hierarchy of the heading. An h1 tag is often the main heading for a website or blog post while the h6 tag is a subheading far down in the title tree.
The title of this blog post uses an h1 tag, as follows:
<h1> What is HTML? </h1>
The title of this section of the blog post is an h2 tag and is written as follows:
<h2> How to use HTML? </h2>
To emphasize a part of a sentence, for example, the tag strong can be used, as follows:
HTML is important for
<strong> structure </strong>
on a website. </p>
The previous line is also an example of how an HTML element can be used inside another, the strong element is entirely within the p-element. You can never let an HTML element start in another element but end outside, in this way:
<p> If you use HTML like this
you make <strong> mistakes! </p> </strong>
To add images, the img tag is used. One thing that is a little special about the img element is that it has no end tag. To insert an image of a logo, type as follows (without line breaks):
<img
src = “https://Example.com/hub/Example
/Logo_Symbol_Original_RGB.png ”
alt = “Google logo”>
Note that the start tag in the above example is not empty, but contains the text src = “…”. This is called an attribute and is often used in HTML start tags to provide additional information of some kind. In this case, the path (src for source) of the image is specified.
One tag that may feel a little more abstract to a beginner is the div tag. It is used to define a section in an HTML document. The reason why you want to divide a document into sections may be, among other things, because it is easier to see the structure itself, but also, for example, because you want a certain design to apply to a certain part of a website but not another.
To give a section the background color green and the text white, you can do the following:
<div style = “background-color: green;
color: white “>
<h3> Here’s a headline! </h3>
<p> Here I write a little unnecessary
and strangely long sentence most just
because I want it to demand more
than a line to be able to prove my point
using the div tag. </p>
<p> And here’s another headline! </p>
</div>
In this example, CSS code is used using the style = “…” attribute to make the background color green and the text color white, but it is with the help of the div tag that this particular heading and the two paragraphs can form a section where the color scheme applies, which does not apply outside the div element.
There is a lot more you can do with HTML, including tables and lists, but I will confine myself to dealing with the most basic things here.