Computer scienceFundamentalsEssentialsStandards and formatsMarkup languages

Markdown: extended elements

5 minutes read

You're probably familiar with the basic Markdown syntax, but page layout would not be complete without such elements as links, images, code, and tables. Knowing how to add them will help you improve the structure of your text, share links to external resources, better convey the essence and content of the text with a suitable image, and show some code snippets to comment on. This topic is aimed at teaching you how to do all the above. So, let's get to it.

Links

Suppose you start making your document using Markdown, but it turns out that you need to provide links to external resources. Of course, you don't want to have them just out in the open. You want to send users to an external resource when they click on some piece of text. For this Markdown allows you to format text as links. This is very useful when you need to refer to some external information. You can create links according to the following template:

[Link text](URL)

Inside square brackets you need to specify the text of the link and the URL address between parentheses. Do not separate the different types of brackets with space or other characters, otherwise you will not be able to create a link. Take a look at the example below:

Markdown	Result
[Github](https://github.com)	Github

Images

When you want to add variety to your text, enhance its readability, or explain important details, adding images is often a good solution. Adding images of diagrams, charts, and graphs will help you better present your ideas. Photos from your trips will diversify your travel blog and generate additional interest from the readers. Illustrations will help you better present your product.

Markdown has an option to add images to the document. You can do it the following way:

![Alternative text](URL)

First, write the exclamation point, then add an alternative text for an image in square brackets, and, finally, add the URL of the image in parentheses.

The alternative text is a text description of the image that will be displayed if the user's browser for some reason cannot load it. Below you can see what adding an image to Markdown looks like:

Markdown	Result
![Github logo](img/github_logo.png)

Code

Sometimes you might need to visually separate the code from the rest of the text. This could be in correspondence with a colleague, chatting on a forum, or it can even happen during the writing of the project description. Situations are different, but one thing remains the same: there is a need to somehow indicate that a certain part of the text is code. Markdown provides you with the tools for this.

When you need to show that part of the text in a sentence is code, enclose it in backticks (`). Such code snippets will stand out from the rest of the text with a background color and a monospaced font.

Markdown	Result
The `<html>` tag indicates that it is an HTML document.	The `<html>` tag indicates that it is an HTML document.

You can also create blocks of code in Markdown. This is useful when you need to insert several lines of code at once. For example, to quote program source code or demonstrate your code snippet.

To create code blocks, you will need to start each line of the code with an indentation of four spaces or one tab.

Markdown Result

    <html>
      <head></head>
      <body></body>
    </html>

<html>
  <head></head>
  <body></body>
</html>

The text will look like a formatted code block until you write a line without the four-space indentation.

Tables

If your document contains a lot of the same type of data, you can try to structure it and present it in a form that's convenient for your readers. For example, you can organize data into rows and columns. Markdown has tables for this. Tables can be useful if you need to present data for analysis in your document.

In Markdown, you can create a table using pipes (|) to separate columns and hyphens (-) to specify the column's header. The finished table will look something like this:

Markdown Result

| Name             | Age |
| ---------------- | --- |
| Laura Heath      | 34  |
| Gilbert Simmons  | 22  |
| William Perkins  | 40  |

Name	Age
Laura Heath	34
Gilbert Simmons	22
William Perkins	40

Conclusion

Markdown is a markup language. It was developed to make it easier to write and read markup code, which in turn makes it easier to understand. In this topic you've learned how to create tables in Markdown, how to add links and images, and how to format text as code. Also, you've read about the situations in which these elements are commonly used. Let's practice what you've learned so far.

102 learners liked this piece of theory. 0 didn't like it. What about you?

Report a typo