What is an index buffer and how is it related to vertex buffers? I have a vertex buffer like this:

0.0, 0.0,
1.0, 0.0,
0.0, 0.6,
1.0, 0.6,
0.5, 1.0


I have the following index buffer:

0, 2,
2, 4,
4, 3,
3, 2,
2, 1,
1, 0,
0, 3,
3, 1


I know I want to draw gl.LINES using WebGL, means multiple seperated line segments.

gl.drawElements(gl.LINES, 16, gl.UNSIGNED_SHORT, indexBuffer);


It seems to enable drawing of multiple line segments in a single draw call in WebGL.

Could someone ELI5 to me, what is an index buffer and how is it related to vertex buffers? How to generate index buffers from my primitives?
Could someone ELI5 to me, what is an index buffer and how is it
  related to vertex buffers


Your vertex buffer contains the X and Y coordinates of 5 vertices. They are:

index |  X  |  Y
  0   | 0.0 | 0.0 
  1   | 1.0 | 0.0
  2   | 0.0 | 0.6
  3   | 1.0 | 0.6
  4   | 0.5 | 1.0


Your index buffer contains information about which lines to draw between these vertices. It uses the index of each vertex in the vertex buffer as a value.

Since you are drawing lines, each pair of consecutive values in your index buffer indicate a line segment. For example, if the index buffer starts with 0, 2, it means draw a line between the 0th and 2nd vertices in the vertex array, which in this case would draw a line going from [0.0, 0.0] to [0.0, 0.6].

In the following graphic each pair of indices is color coordinated with the line it indicates:



Similarly, if you were drawing triangles instead of lines, you would need to supply an index buffer where each 3 consecutive values indicate the indices of three vertices in the vertex buffer, e.g. 

0, 1, 2,
2, 1, 3,
2, 3, 4,