Skip to main content

HTML

HTML: Brief Summary

HTML is the abbreviation for Hypertext Markup Language. This standard mark-up language for the Internet describes the structure of a website. Every browser “reads” HTML and outputs these instructions on the screen or display – in the form of pages with text, pictures, videos, graphics, buttons and many other elements.

HTML: Detailed Summary

If you want to get an overview of HTML, all you have to do is call up any website in your browser. The instruction “Show page source code”, which can be called up by right-clicking, shows the content of a website in the form of pure HTML. At first glance, this code seems cryptic. However, if you take a closer look (for example, with the help of a special editor), you will recognise clear structures – particularly the consistent nesting. The DOM (Document Object Model) makes use of this nesting: Each individual element of a website, for example, a paragraph, an image or a link, can be accessed with mark-up and programming languages such as CSS or JavaScript. In this way, the individual elements can be formatted but also hidden, animated or dynamically changed.

Explanation: How HTML Works

HTML consists of individual tags that define the structure of an HTML document. These tags determine the beginning and the end of the respective elements. The end tag is provided with a slash (/) for this purpose:

  • <h1>This is a heading</h1>
  • <p>This is a paragraph</p>

The distinction between the head and the body of a document is essential. The body contains the actual content – mainly text, images, videos and design elements. The head is interesting for programmers and designers, but also for SEO experts. Here you will find references to scripting languages such as JavaScript (<script>), formatting languages such as CSS (<style>) and descriptive information about the page content (<title>, <meta> tags for content information, keywords, the author, etc.). The <title> tag is especially important from an SEO point of view. This is because the content of this tag is not only displayed on the browser tab. As a rule, the title serves Google as a heading for individual search results.

HTML is, therefore, primarily used to define the semantic structure of a website. All elements of a website can be displayed with HTML in a simple and, above all, cross-platform manner.

From HTML 1.0 via XHTML to HTML5

The history of HTML is as old as the World Wide Web. The first version was published in 1992 (HTML 1.0), and this was intended exclusively for text display. The highlight of this new mark-up language was the anchor tag (<a> ). It is a simple way to link to other pages. One click – and immediately another document appears, possibly stored on a server thousands of kilometres away. This ability to provide quick linking was the real secret of HTML’s success.

After several syntax adaptations in the 1990s (HTML 2, 3, 4), the W3C (World Wide Web Consortium) published a new development in 2000: XHTML – Extensible HTML. This HTML version was essentially oriented towards the meta language XML. However, the project was abandoned in 2014 in favour of HTML5. HTML5 provides very simple possibilities for integrating multimedia content – for example, videos, audio files, diagrams, graphics and dynamic visual effects. The entire structure of a website (navigation, footer, articles, etc.) can be made clear in a simple way with HTML5.

HTML5 is primarily a response to the growing importance of mobile devices. A website whose source code is HTML5-compliant is also advantageous for search engine optimisation. Google registers the different versions of HTML and CSS and thus evaluates, among other things, the topicality of a website.

Explanation: The Most Important HTML Tags

 

Tag Meaning
<html>
The introductory tag for every HTML document
<head> The “head” of the document for individual technical instructions
<body> The actual document that is output by the browser
<h1>, <h2>, <h3> etc. Headings, in order
<p> Paragraph
<strong> Emphasis, bold (formerly <b>)
<em> Emphasis, italic (formerly <i>)
<a> Link
<table>, <tr>, <td> Table; table row; table cell
<ol>, <ul> Numbered list; list with bullet points
<li> A single list item

Tags can contain attributes, for example an ID (<p id=”explanation”) or a class (<p class=”redfont” ). The IDs or classes can be used to access the respective elements with the help of JavaScript or CSS.

HTML, JavaScript, PHP etc.

In addition to HTML, CSS, JavaScript and PHP play a major role in the layout and functionality of a website.

  • CSS (Cascading Style Sheets) is used to design HTML documents.
  • JavaScript is a programming language that was developed especially for websites. Ajax and jQuery use JavaScript as a basis.
  • PHP (Personal Homepage Tools or Hypertext Preprocessor) is a very powerful programming language that acts on the server side. PHP can create or modify HTML documents. In interaction with databases (especially in online shops), PHP shows great strengths.

The final formatting of the individual elements is done with CSS (Cascading Style Sheets). Example:

  • A CSS file contains the following command: p { colour: red; }
  • Every HTML document that refers to the CSS file in question shows all paragraphs (<p>) in red.

Google Also Reads HTML

The robots from search engines like Google analyse HTML. They examine the source text not only for the frequency of certain keywords but also for where they appear. The placement of keywords plays a decisive role in the thematic relevance of a website. For example, if the keyword “flowers” appears in an h1 heading (i.e. a first-order headline), this is a very strong indication that the entire text is about flowers.

Google’s algorithms only record the HTML source text. This also applies to images. The actual image file is less relevant. An alt attribute can be used to describe an image using HTML. This gives Google an indication of what is displayed on the image:

<img src=”flower.jpg” alt=”A red flower”/>

If you want to learn more about HTML, detailed documentation, tutorials and instructions on how to use HTML can be found on the w3schools website, the Mozilla developer pages and html.net.

Elements for Texts in HTML

A website whose syntax conforms to the HTML rules not only looks good. It is also rated positively by search engines. Four elements are particularly important for creating texts that do without images or additional effects:

  1. <h1>Headline</h1> (or <h2>, <h3> etc.)
  2. <p>paragraph</p>
  3. <strong>bold</strong>
  4. </em>italic</em>

If these four tags are used correctly, programmers and web designers have no problem preparing a text for the web and integrating it into a web page. The final design is done with tools like CSS or JavaScript. If you want to learn HTML, you can find a large number of tutorials on the Internet.



Join over 80,000 customers world-wide, and use Textbroker for your Content Marketing.
Register now for free


Managed Service

Textbroker offers an extended level of service with the Managed Service option. Managed Service gives you additional support and a personal account manager when you want us to manage your projects for you. Find out more here.

Request a customised offer

Self-Service

Do you need up-to-date content? Then manage your project through Textbroker’s Self-Service. You choose the quality level, price, and author for your content.

Register for free!

Authors

Thousands of authors from around the globe earn money with Textbroker, the leading provider of unique, custom content. Become a Textbroker author now and access thousands of projects to choose from.

Register for free!