Based on ABBREVIATIONFINDER, 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 upcoming blog posts.) HTML is the structure for all the Internet’s web pages in the form of headings, paragraphs, separating certain content from other things and the like. You can also insert images with HTML.
HTML is a markup language and not a programming language, since HTML code only has the task of providing structure. In order for a language to be called a programming language, there needs to be the ability to execute commands, which does not go with HTML.
Why is it really important to structure web pages, one might ask. A major 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 of 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 highlighted 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 labeled in the HTML code, allows search engines to understand that this blog post is about HTML and thus places more emphasis on it than on the other content.
How to use HTML?
Due to the good response from the blog post What is an API? , where I showed what an API is by using an API, I also thought about explaining what HTML is by means of practical examples.
HTML is really very simple. For example, 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 tag, content and end tag is called an element, in this case a paragraph element.
Headings are often important on websites so that a user can easily navigate to the right place as quickly as possible. For headings, 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 sub-heading far down in the header tree.
The title of this blog post uses an h1 tag, like this:
<h1> What is HTML? </h1>
The title of this section of your blog post is an h2 tag and is written like this:
<h2> How to use HTML? </h2>
For example, to emphasize part of a sentence, the strong tag can be used, like this:
<p> HTML is important for the
<strong> structure </strong>
of a website. </p>
The previous line is also an example of how one HTML element can be used inside another, the strong element is entirely within the p element. Namely, it is never possible to have an HTML element start in another element but end outside, in this way:
<p> If you use HTML like this, you
do <strong> error !</p> </strong>
To add images, use the img tag. One thing that is a bit special about the img element is that it has no end tag. To insert an image on Exsitec’s log, you write as follows (without line breaks):
<img
src = “https://www.gradinmath.com/hubfs/Newsletter
/Exsitec_Symbol_Original_RGB.png”
alt = “Exsitecs log”>
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 startup tags to provide additional information of some type. In this case, the path (src for source ) is specified for the image. Try typing in the address https://www.gradinmath.com/hubfs / Newsletter
/Exsitec_Symbol_Original_RGB.png and you can see that the image comes up. In the alt attribute, you enter the text to be displayed if the user cannot view the image for any reason.
A tag that may feel a little more abstract to a beginner is the div tag. It is used to define a section ( division ) in an HTML document. The reason why you want to divide a document into sections can be, among other things, because it is easier to see the structure itself, but also, for example, because you want 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 slightly unnecessary
and strangely long sentence mostly just
because I want it to require more
than one line to prove my point
with using the div tag. </p>
<p> And here comes another headline! </p>
</div>
In this example, CSS code is used using the attribute style = “…” to make the background color green and the text color white, but it is with the help of the div tag that that particular heading and two paragraphs can form a section where the color scheme applies, which does not apply outside the div element.
There is much else you can do with HTML, including tables and lists, but I am content with treating the most basic here.
At Exsitec, we make web applications for our customers, which basically work like regular websites and therefore we use HTML when we build them.