At the end of the 1980s, the British computer scientist Tim Berners-Lee developed the basic com­po­nents of the World Wide Web. As an employee at the European Or­ga­ni­za­tion for Nuclear Research (CERN), he initially devoted himself to an internal project, which intended to enable cross-country in­for­ma­tion exchange between CERN lab­o­ra­to­ries, partly in France and partly on Swiss soil. As the basis for the planned network in­fra­struc­ture, Berners-Lee used hypertext, a text form that is conveyed through cross-ref­er­ences (hy­per­links) and written using a markup language. He co-developed this markup language, known as Hypertext Markup Language (HTML).

Together with many other com­po­nents, such as the HTTP transfer protocol, the URL, browsers, and web servers, HTML is still the foun­da­tion of global digital net­work­ing. This means that it’s com­pul­so­ry for de­vel­op­ers to learn this web language. To help you get to know the principle of the markup language and to make it easier to get started, we have sum­ma­rized the most important prin­ci­ples and tips for beginners in this HTML tutorial.

What is HTML?

HTML is one of the machine-readable languages, also known as 'computer lan­guages' that enable in­ter­ac­tion between computers and humans. It allows you to define and structure the typical elements of text-oriented documents, such as headings, text para­graphs, lists, tables, or graphics, by dis­tin­guish­ing them ac­cord­ing­ly. The visual rep­re­sen­ta­tion can be achieved using any web browser that in­ter­prets the code lines and therefore knows how the in­di­vid­ual elements should be displayed. In addition, the HTML code may contain data in the form of meta in­for­ma­tion e.g. about the author. As a markup language, HTML is now mostly only used in its de­scrip­tive function, while the design is defined using stylesheet languages such as CSS (Cascading Style Sheets). In the beginning of the web era, it was quite common to make visual ad­just­ments with HTML.

HTML has evolved from the now largely dis­ap­peared meta-language SGML (Standard Gen­er­al­ized Markup Language), a rec­og­nized ISO Standard (8879:1986). The same core notation of the SGML elements is also found in HTML. They are usually marked by a tag pair con­sist­ing of the start tag <> and the end tag </>. For some elements, the end tag isn’t required; fur­ther­more, there are some empty elements like the line break <br>. In addition to the tags, the following HTML features are rem­i­nis­cent of these examples:

  • Document type de­c­la­ra­tion: in­for­ma­tion about the HTML version in use e.g. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Tran­si­tion­al//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • Use of character entities: use of entities for recurring units, for example, &lt; für „<“ or &amp; for „&“.
  • Comment labeling: comments are added in HTML according to the <!--Comment--> pattern.
  • At­trib­ut­es: sup­ple­men­tary prop­er­ties of tags according to the <tag attribute="value"> pattern.

Which software do you need to write HTML code?

At the beginning of our HTML course, the question is: which software is best for writing HTML code? There is no general answer for this. On the one hand, there are so few re­quire­ments for the program that a simple text editor (found on every operating system) is suf­fi­cient. On the other hand, special HTML ap­pli­ca­tions offer clear sim­pli­fi­ca­tions in code writing. How suitable are the various options for learning HTML?

Simple text editors

You do not need so­phis­ti­cat­ed software in order to write clean HTML code. A simple editor like the Windows editor, also known as Notepad, or the Mac equiv­a­lent, TextEdit (in plain text mode) are suf­fi­cient basic options. You don’t have the option of changing the layout of the text, but this is the task of HTML for­mat­ting anyway. You can also the­o­ret­i­cal­ly use word pro­cess­ing programs such as Microsoft Word or OpenOf­fice Writer, but you will not benefit from the added features that can help when learning HTML. In some cases, the su­per­flu­ous features even slow down the learning process so you’re on the right track when using a simple text editor to acquire the HTML basics. These editors are pre-installed on every standard operating system.

HTML editors

In addition to simple editors and complex word processor programs, there are also special editors that provide as­sis­tance: for example, these ap­pli­ca­tions emphasize syntactic accents and give you an excellent overview of the written code. In addition, any syntax errors are found if there are any. Another standard feature is the auto-com­ple­tion function that provides you with sug­ges­tions for extending or com­plet­ing the code when writing HTML tags. This feature is also able to au­to­mat­i­cal­ly complete end tags. Many HTML editors have a preview function that allows you to check the pre­lim­i­nary results of your code lines at any time, just by pressing a button. A highly-rec­om­mend­ed editor for Windows users is the free, GPL-licensed Notepad ++. A free solution for Unix operating systems is Vim. There’s another option that has its own charm and is in­te­grat­ed into almost all website building kits and content man­age­ment systems. These are HTML editors with real-image rep­re­sen­ta­tion, better known as WYSIWYG editors. The acronym stands for the basic idea of these programs 'What You See Is What You Get'. These editors have been developed specif­i­cal­ly for gen­er­at­ing HTML code and you really don’t need very much expertise at all in the markup language to use them. Just like in a word pro­cess­ing program, you can structure your text using pre-made menu buttons without needing to place a single HTML tag on the page. The WYSIWYG editor generates that in the back­ground, si­mul­ta­ne­ous­ly, which has its clear ad­van­tages. For learning HTML, editors such as Blue­Grif­fon aren’t very suitable – even if you are able to look at the generated code anytime you want.

Creating the first HTML pages

In the first step of the HTML tutorial, you will create a simple page that you can display using your browser. However, this isn’t a valid HTML page that has been built according to certain standards yet, but rather a pure test page. In order to create this page as well as other HTML examples in this tutorial, we have decided to use the Notepad++ editor mentioned earlier. If you are using a different program, the procedure may differ slightly from the following.

First, open the editor and save the new file under the name test. Choose 'Hy­per­text Markup Language File' as the file format, so that the browser knows that it’s an HTML page later on. If you are using a simple editor, you may have to select the film type 'All Files' (encoding: UTF-8) and define the HTML label directly in the 'File name' field by saving the file under the name test.html.

The generated file should now be displayed with your web browser’s icon. By double-clicking, you can open the page, but since all content is missing, you will see only a white page. So, in the next step, add the small sample text 'This is my first webpage!', save the document, and reopen the test.html file. The result should look something like this:

HTML: basics of the text structure

Your first website could be suc­cess­ful­ly created – even though you have not yet used any HTML markup language. However, if you insert a struc­tured text with headings and para­graphs in the same way, you will find that you don’t get very far without tags. The for­mat­ting that you have added with a word pro­cess­ing program, for example, dis­ap­pears in the browser view: breaks are au­to­mat­i­cal­ly removed, blank spaces are grouped together, etc. The solution is to label the different text modules as such using the ap­pro­pri­ate struc­tur­al elements – in other words, to take a step into the world of HTML.

Define para­graphs using the tag

To indicate para­graphs, you need the <p> tag. The start tag marks the beginning of the paragraph and the end tag marks when the paragraph is over. The text is then placed between these two markers. In all HTML versions (except XHTML), the closing tag is optional, but it is good practice to include it when learning HTML. You can directly test the accuracy of the paragraph’s de­f­i­n­i­tions on the newly-created test page by adding another section of text and marking them both using this tag:

<p>This is my first webpage!</p>
<p>This is the second paragraph of my first webpage.</p>

Note: the manual paragraph is for clarity only. You can also write both <p> elements in a single line.

Placing the headings: the tag

In order to structure your website’s text sections properly, it’s important to use headings. With HTML, you not only have the general ability to label these, but you can also set a clear hierarchy for all headlines you want to use. The tags <h1> to <h6> can be used, with <h1> being the main heading of the website. You should use this tag only once per page, unlike <h2> and the other heading tags. It is important to keep to a correct hi­er­ar­chi­cal order and not to jump between the different levels so that both readers and search engines can un­der­stand the text structure from the headings. We will add a main heading and a first sub-heading as an example on our test page:

<h1>Main heading: my first webpage</h1>
<p>This is my first webpage!</p>
<h2>Second heading</h2>
<p>This is the second paragraph of my first webpage.</p>

Em­pha­siz­ing passages and words using italic or bold features: , , , and

One of the most important HTML basics is the ability to emphasize in­di­vid­ual text excerpts in a certain way. In this way, you can make sure the reader focuses on what you want them to and means they will con­cen­trate on the most important elements. For example, you can use the <i> and <em> tags to italicize and emphasize phrases, technical ex­pres­sions, or thoughts. However, italic writing generally slows down the reading flow, which is why you should use this tag sparingly. More important are the elements <b> and <strong> that make words and text excerpts bold. The <b> should be used for content that you want to make the user in­ten­tion­al­ly aware of. In contrast to this, the <strong> tag shows which words are important for content elements and to show browsers how to display words or sections.

To il­lus­trate the tags, we will extend our HTML code a bit:

<h1>Main heading: <i>my first webpage</i></h1>
<p>This is my<strong>first</strong>first webpage!</p>
<h2>Second heading</h2>
<p>This is the second paragraph of my <em>first webpage</em>.</p>
<p><b>Note</b>:Typical example for the<b>-tag.</p>

Creating lists: tailored lists using the , , and tags

Lists aren’t only helpful when it comes to shopping: when designing texts, they can come in handy for loosening in­di­vid­ual para­graphs and therefore op­ti­miz­ing the reader’s ex­pe­ri­ence. With HTML, you can create both unordered and ordered lists for your web project. Use the <ul> tag to create unordered lists and <ol> to create ordered lists. The in­di­vid­ual list points can be defined with the <li> tag, which only works in com­bi­na­tion with one of the two types of lists. Test how HTML lists work by using the following code:

<ul>
    <li>first unordered-list item</li>
    <li>second unordered-list item</li>
    <li>third unordered-list item</li>
</ul>

The result should look something like this:

If you want to turn your list into a numbered list, simply swap the list type tag:

<ol>
    <li>first ordered-list item</li>
    <li>second ordered-list item </li>
    <li>third ordered-list item </li>
</ol>

Numbers will appear in the browser view instead of bullet points:

Pre­sent­ing struc­tured data using tables: , , and

For many years, it has been customary to use HTML tables, not only for pre­sent­ing complex data in a practical way but also for struc­tur­ing the complete layout of a web page or text con­sist­ing of several columns. With the rise of CSS, however, this ad­di­tion­al visual role has fallen into the back­ground more and more, which means that the tables are used today for their basic function – for pro­cess­ing data. Each table consists of at least three com­po­nents:

  • <table>: the <table> start or end tag iden­ti­fies the start or end of an HTML table. The browser can’t really do much with this markup alone since the tag doesn’t show the number of rows or the number of columns.
  • <tr>: use the <tr> ('table row') element to add a row to the table. There’s no limit on the number.
  • <td>: only once you’ve added columns have you completed the basic structure of your table. The tag <td> ('table data') is logically sub­or­di­nate to a <tr> tag because one or more data cells are to be generated within one line. The content of a data field is between the opening <td> and the closing </td> element.

In order to un­der­stand the somewhat complex structure, we will now create a simple HTML table con­sist­ing of only one row and two columns:

<table>
    <tr>
        <td>first data field</td>
        <td>second data field</td>
    </tr>
</table>

The preview of the generated HTML code makes it appear that an error may have occurred and that the table isn’t working as planned. The two columns haven’t been defined and it doesn’t look like a table at all. There is, however, a simple ex­pla­na­tion for this: by default, HTML table cells do not have any visual borders. For this typical table iden­ti­fi­ca­tion, you must extend the <table> tag using the border attribute, including the value 1:

<table border="1">
    <tr>
        <td>first data field</td>
        <td>second data field</td>
    </tr>
</table>

If you reopen the HTML document in your browser, you will see a more familiar table layout.

Note: HTML5 does not support the border attribute anymore (only the CSS is now re­spon­si­ble for the cell border).

HTML offers the pos­si­bil­i­ty of high­light­ing column headings. For this, it is necessary to enclose the relevant column with the <thead> tag and replace the <td> labeling of in­di­vid­ual data cells with the <th> tags. To create an example table with four rows and three columns, including the heading, use the following HTML code:

<table border="1">
    <thead>
        <tr>
            <th>Column heading 1</th>
            <th>Column heading 2</th>
            <th>Column heading 3</th>
        </tr>
    </thead>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>

Basic HTML framework: this is the basic structure of webpages

This section of our HTML tutorial is about the general structure of a website. HTML documents contain not only text, links, and other in­te­grat­ed content such as images and videos, but also the afore­men­tioned meta in­for­ma­tion, which tells the browser, as well as search engine crawlers, how they should read the pages. When a visitor accesses a web page, they don’t see many of these ad­di­tion­al details, only some in the title bar of the browser window, in the tab, in the history, or as a headline for search engine entries.

Keeping the code to a minimum while still including all necessary com­po­nents means that the HTML page will look like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Here you can find all information about the HTML basic framework">
    <title>Learn HTML: The basic framework</title>
</head>
<body>
</body>
</html>

The file is therefore composed of the three areas DOCTYPE, head, and body, whereby the first component, which is the document type de­f­i­n­i­tion, must be the only one before the <html> tag. This is where you let the in­ter­pre­tive ap­pli­ca­tions know which standard you used when creating the document – in this case, HTML5. Every browser rec­og­nizes this document type; in addition, it allows you to use both current HTML5 and older HTML codes, which is why you should use it by default, es­pe­cial­ly when learning HTML.

In the following <head> section, write down the header data if your HTML file. This includes, for example, the character encoding to be used by the browser (meta charset), the meta de­scrip­tion (meta name="de­scrip­tion"), and the title of the web page (title) that appears in the browser header. In addition, you can make countless other meta state­ments, even the in­for­ma­tion included in our example is optional, but you’re rec­om­mend­ed to leave it in for a good search engine eval­u­a­tion. One exception is the <title> in­for­ma­tion, which, in addition to the document type de­f­i­n­i­tion, is the only mandatory element of an HTML page. In the header, you can later add the link to your CSS file, which struc­tured the website’s design. The <body> section contains every­thing that is to be displayed to the user in their browser.

Note: the tags for the HTML basic structure are optional and can the­o­ret­i­cal­ly be omitted. In this case, the browser au­to­mat­i­cal­ly creates the tags <html>, <head>, and <body> and assigns the ap­pro­pri­ate elements to them. It is, however, customary to write this in­for­ma­tion yourself. In addition, the breakdown makes the document easier to read, which is es­pe­cial­ly ben­e­fi­cial for HTML beginners.

How to integrate images, photos, and graphics onto your web pages

Texts are in­dis­putably the most important part of general HTML pages. Visual stimuli in the form of images, pho­tographs, or graphics, however, influence user ex­pe­ri­ence greatly, which is why they are just as in­dis­pens­able for a suc­cess­ful web presence. The following three formats are supported by all browsers:

  • JPG: for photos or photo-like graphics with strong contrast and colorful diversity, you usually use the JPG format. JPG images support 16 million colors and heavily compress files although this may result in some loss of quality.
  • PNG: graphics and logos are best saved in PNG format, which can display 256 (PNG8) to 16.7 million colors (PNG24). Unlike JPG, PNG com­press­es without reducing quality, but the file is also larger.
  • GIF: GIF files can only display 256 colors, but are still required in web de­vel­op­ments because they can be used to display small an­i­ma­tions, nav­i­ga­tion­al elements, or simple graphics.

Re­gard­less of the format, you can include an image with the <img> (image) tag in the desired web page. In addition, it is necessary to specify the storage location of this image, otherwise the browser can’t find it and therefore can’t display it. For this, you need the src (source) attribute and the relative path name of the image file. Simply create a subfolder named 'Images' in your website’s project folder (which also contains the HTML document) and store all relevant images there. Our HTML tutorial sample file has the file name graphic1.png and is located in the folder entitled 'Images'. The code used to integrate this graphic looks like this:

<img src="images/graphic1.png" />

However, there are other at­trib­ut­es for images that are rec­om­mend­able to use. You can specify the width and the height of the image. These values enable the browser to place a place­hold­er in the ap­pro­pri­ate size on the page until the image has com­plete­ly loaded. It can also si­mul­ta­ne­ous­ly display ad­di­tion­al content in the browser window without having to complete the loading process of the image file, which in turn speeds up the website’s general loading time. On the other hand, there is the alt attribute that can be used to define an al­ter­na­tive text for the image. You should include it in your HTML basic reper­toire for a variety of reasons since it…

  • Con­tributes to the page’s ac­ces­si­bil­i­ty by offering an al­ter­na­tive to visually impaired users or when the page won’t load.
  • Helps the search engine crawlers to classify images and also counts as ad­di­tion­al content.
  • Is specified in the HTML spec­i­fi­ca­tion.

To extend these at­trib­ut­es, the HTML code looks something like this:

<img src="images/graphic1.png" width="960" height="274" alt="Learn HTML: this is how the embedded sample graphic 'click here' appears:" />

Note: the values for width (960) and height (274) used here are the original di­men­sions of the sample graphic. The browser au­to­mat­i­cal­ly cal­cu­lates the size in pixels.

Image: The embedded sample graphic in the browser view
Source: https://pixabay.com/de/klicken-sie-hier-button-webseite-1312391/

Linking pages and content – the important role of hy­per­links

Hy­per­links, better known under the ab­bre­vi­a­tion 'links', are the main reason for the internet’s in­com­pa­ra­ble success. Without these elec­tron­ic links, which lead the user to a different website or encourage them to carry out an action such as down­load­ing a product, net­work­ing such as the internet wouldn’t be possible. There are three types of links:

  • Internal links: internal links are used to structure the entire website and show visitors around. There are different struc­tures that you can use. For a linear structure, for example, the user follows a certain path from page to page. Whereas for a tree structure, the user navigates from a home page to various sub­or­di­nate pages. You can also place internal links within a single page, which allow the user to jump directly from the bottom of the page to the top.
  • External links: external links are those that lead the user to different web projects. You use this type of link to offer your visitors extra value by directing them to another website. However, you should make sure that you don’t place too many links on a page, and also make sure that the content you’re linking to is trust­wor­thy. Otherwise, you could be penalized by the search engine.
  • Other links: not all links direct to HTML documents. Depending on the link target, clicking a link can also trigger a download, open an e-mail client, or activate a PDF viewer.

Internal links: how to link in­di­vid­ual pages of your web presence

While you will likely have to design and develop a complex link structure for your web presence at a later stage in your HTML studies, this HTML crash course will show you how to in­ter­nal­ly link two pages. In addition to the test.html you already created, you need another HTML document. Be sure to give this second file a different name e.g. tar­get­page.html, and be sure that it can be found in the same directory as the test page.

In order to create a link, you require the HTML tag <a> (anchor), which is only to show that a link is being used. For this reason it cannot stand alone and needs the href (hypertext reference) attribute to specify the link des­ti­na­tion. The link text, which the browser displays is blue and is un­der­lined by default, should be written between the opening and closing <a> tags. Place the first internal link by adding the following code line to test.html:

<a href="targetpage.html">Jump to target page</a>

If you have set up the link correctly, clicking on it should open up an empty page since the tar­get­page.html is still un­processed. For this reason, we will add a new internal link to this document in the next step, which will take you back to the source page when clicked on:

<a href="test.html">Back to previous page</a>

Note: if the page you want to link is not in the main directory, simply enter the cor­re­spond­ing path of the sub­di­rec­to­ry, for example, sub­di­rec­to­ry/tar­get­page.html. You can return using <a href="https://www.ionos.ca/digitalguide/../test.html">.

External links: how to link to content on other websites

If you want to add an external link to your page, you don’t require a different tag to the one used in internal linking and you do not need to know the directory where the page is saved. Links to third-party content only require the full URL – this contains all the required in­for­ma­tion. Since the linked content is not on your own web server, you have no influence on how an external link works, so it’s rec­om­mend­able to check it regularly. Try to formulate an in­for­ma­tive anchor text since mean­ing­less place­hold­ers such as 'here' do not give the visitor any in­for­ma­tion about where the link leads. Try using the following code when linking ex­ter­nal­ly, which creates a link to our Digital Guide:

<p>HTML tutorial and numerous guides on the topic of websites, hosting, and much more at
<a href="https://www.ionos.com/digitalguide">IONOS Digital Guide</a>
</p>

When linking ex­ter­nal­ly, you’re leading visitors away from your own web project. The­o­ret­i­cal­ly, they can come back using the 'back' button, but many people don’t realize they have this option. There is a way to make the new page au­to­mat­i­cal­ly open in a separate tab, which means that they won’t have to leave your website. The attribute target describes where a linked document should be opened. With the value _blank, you specify that you want the page to open in a new window or tab. The link code looks like this:

<a href="https://www.ionos.com/digitalguide" target="_blank">IONOS Digital Guide</a>

On the home stretch – how to put your HTML page online

The sample pages that you have created in the HTML tutorial can be opened normally on your computer. However, if you send the cor­re­spond­ing page URLs to other people to show them the results, they won’t be able to do much. This is because the HTML documents and any embedded images, etc. are only stored locally on your PC and therefore can’t be sent to the re­quest­ing browsers. So that anyone can par­tic­i­pate in your creation, you must first register your web project online and find the right hosting structure. The first step is to find a suitable domain (web address) for your web project and to register it. You can register with any internet provider – at IONOS we offer many options for domain reg­is­tra­tion. The second step is to create the ap­pro­pri­ate basis for your web project by either setting up and con­fig­ur­ing your own web server or renting it from a web hosting provider. If you’re an HTML beginner, we recommend the latter option: you don’t have to deal with selecting, setting up, and main­tain­ing the server software. You simply choose the desired web space package, which gives you the necessary storage space for the documents of your project. For the last step, you need to upload your pages onto the rented web space. You usually need an FTP program for this. Using this client software, you can exchange data with the provider’s FTP server using the File Transfer Protocol. We have some excellent programs for you in the following guide. Detailed in­struc­tions and login data for accessing the FTP server are available directly from the re­spec­tive hosting provider. Note: when uploading to the FTP server, the directory structure remains, therefore it is worth investing in struc­tur­ing from the outset.

CSS and JavaScript – why HTML is only the beginning

In the course of the tutorial, we em­pha­sized several times that although HTML is the foun­da­tion for every website, the task of designing with the state of modern web de­vel­op­ment is almost a com­plete­ly different language: including which colors the in­di­vid­ual elements have, the layout of a page, or which font and size are used for text passages, headings, and other text elements. You can define all these points using the stylesheet language, Cascading Style Sheets (CSS). The strict sep­a­ra­tion of content and design makes the analyzing and main­tain­ing major web projects much easier. After learning HTML, it’s rec­om­mend­able to fa­mil­iar­ize yourself with CSS so that you can give your HTML pages the desired ap­pear­ance.

One component of modern websites that hasn’t yet been mentioned is JavaScript. You can expand your HTML pages with dynamic elements using this script language.  The dynamic elements enable visitors to interact with your pages and come in the form of picture galleries, dynamic nav­i­ga­tion menus, or external data downloads. For both JavaScript and CSS, you will find numerous ready-to-use code snippets, which you can integrate directly into your documents (CSS and JavaScript), without having to write your own scripts. Before doing so, however, you should have already developed a basic un­der­stand­ing of the two web languages in order to use these code lines correctly and to be able to trou­bleshoot problems if they occur.

Go to Main Menu