Mark Down HTML Cheat Guide for Efficient Content Creation

Author

Reads 465

Forty Percent Sale Sign on a Store Window
Credit: pexels.com, Forty Percent Sale Sign on a Store Window

Creating content efficiently is key, and Markdown HTML is a game-changer. It's a lightweight markup language that allows you to write formatted text using plain text syntax.

With Markdown HTML, you can create headers using the "#" symbol, like this: "# Heading". It's as simple as that, and it's a great way to add structure to your content.

This cheat guide will walk you through the basics of Markdown HTML, so you can start creating content like a pro.

Curious to learn more? Check out: Using Oembed in Base Html

HTML Basics

HTML Basics are a crucial part of creating effective Markdown documents. You can add a horizontal line to divide up sections of a document using HTML.

To make a horizontal line, simply type three or more hyphens between two sets of spaces: ---. This will create a clean and clear separation between sections of your document.

For more insights, see: Document Type Definition in Html

Lists

Lists are a fundamental element in Markdown, and there are two main types: unordered and ordered.

Credit: youtube.com, The Only Markdown Crash Course You Will Ever Need

You can use unordered lists for things that don't require sequential steps, such as a shopping list.

To create an unordered list, simply add a hyphen followed by a space before each line of text, and a blank line at the end of the list.

Unordered lists are not numbered, but you can use an asterisk, a plus sign, or a minus sign at the beginning of each item.

Ordered lists, on the other hand, are numbered and commonly used when you want to follow steps in a certain order, like following a recipe.

To create an ordered list, just begin each line with a number, like so:

Sub-items can be added to both ordered and unordered lists by indenting.

Formatting Text

Formatting text in Markdown is a breeze, and it's essential to get it right to make your content stand out. You can add emphasis to your text using bold, italics, and strikethroughs.

To make text bold, simply add double asterisks around your text, like this: Bold text. This is a great way to draw attention to important information. You can also use single asterisks or underscores to create italic text, like this: *Italics* or _Italics_.

Here's a quick reference guide to get you started:

Remember, too much emphasis can make your text harder to read, so use it sparingly.

Adding Typographical Emphasis

Credit: youtube.com, What Is Typographic Emphasis? - Graphic Design Nerd

Adding typographical emphasis to your text can make it stand out and convey important information. To make text bold, simply add double asterisks around your text.

You can make your text appear in italics by enclosing it within a single asterisk or an underscore. For example, *Italics* or _Italics_ will both give you the desired effect.

There are also other ways to add emphasis, like strikethroughs. To use this method, enclose your text within two tilde symbols, like this: ~~Strike through~~.

Here's a quick reference guide to help you remember how to add emphasis:

Remember to use emphasis carefully, as combining too much emphasis can make your text harder to read.

You can create links in Markdown by putting the text you want to link in square brackets, followed by parentheses containing the URL. This is similar to a regular link, but you include an exclamation point before the brackets.

Credit: youtube.com, VS Code tips — Add images and links in Markdown by dragging and dropping

Regular links let you link to various websites, with the name of the site or a phrase you want to use in square brackets and the actual link in parentheses. Automatic links are made with angle brackets surrounding the link, which is useful for spelling out the address in your text.

Adding images in Markdown is almost identical to links to Web sites, with the small difference being that image links begin with an exclamation point. The name of the image or a descriptive phrase is placed in square brackets, and the actual link is inside parentheses.

Links are a fundamental part of making your writing clear and eloquent.

There are two common ways to create links in markdown documents: hyperlinks and images. Both can be used to enhance your writing.

To create a hyperlink, you put the text you want to link in square brackets, followed by parentheses containing the URL. For example, "Kealan's site" would be surrounded by square brackets and the URL would be inside the parentheses.

A different take: Html Tag B

Credit: youtube.com, How to Add a Link to an Image

Regular links let you link to various websites by placing the name of the site or a phrase in square brackets, and the actual link inside parentheses. This is a straightforward way to add links to your text.

Automatic links are made with angle brackets surrounding the link, which can be a Web or email address. This is useful for spelling out the address in your text.

Here's an interesting read: Html Blank to Address in Mailto

Adding Images

Adding images to your content is a great way to break up the text and make it more engaging.

In Markdown, links to images are similar to links to websites, with a small difference.

The difference is that image links begin with an exclamation point (!).

The name of the image or a descriptive phrase is placed in square brackets ([]).

The actual link is inside parentheses (()).

Code and Syntax

You can add code snippets to your markdown with ease. Just type the three backticks followed by the programming language and then enter to start writing your code. End the code block with three backticks.

Credit: youtube.com, Markdown syntax Cheat sheet

Most modern programming languages are supported, so you can use JavaScript, Python, or any other language you're familiar with. The syntax highlighting will make your code look professional and easy to read.

If you want to add inline code, simply enclose the text within a single backtick on either side. This is a great way to highlight specific lines of code or variables.

To practice markdown syntax, you can use online platforms like readme.so or Dillinger. These tools will help you get familiar with the syntax and even allow you to create GitHub readme files.

For offline practice, you can try out the Runme Runs Markdown extension for VSCode or use software like Marker or Typora. These tools will let you read and write markdown syntax with ease.

Remember, markdown syntax is all about simplicity and ease of use. With a little practice, you'll be writing like a pro in no time.

Discover more: Markdown Html Link

Tables and Quotes

Credit: youtube.com, [063/100] What is Markdown - Cheat Sheet & Full Tutorial

To create a table in Markdown, keep the pipes (|) vertically in line, and your table will appear as intended. This is a crucial detail to avoid any formatting issues.

A markdown table is displayed with headers and values, as shown in the example: Name and Age as the headers and Kealan, Jake and 25 & 28 as the values. To add a quote, simply add the symbol, which renders it like the quote: "This is a quote, from someone who is very wise" - Anonymous.

Here's an interesting read: Showdown Markdown to Html

Writing Subscripts

Writing subscripts is a useful skill to have when creating content online. You can write the chemical symbol for water by typing H~2~0.

To make a subscript, you use the tilde symbol (~) to surround the number or text you want to make smaller. This is a simple yet effective way to add emphasis to your writing.

For example, if you want to write the chemical symbol for water, you can use the tilde symbol to make the "2" a subscript.

Create Tables

Web banner with online information on computer
Credit: pexels.com, Web banner with online information on computer

To create tables, you must keep the pipes (|) vertically in line, otherwise, your markdown table will not appear as intended. This can be a bit tricky, but with practice, you'll get the hang of it.

The syntax for creating tables is not as complex as you might think, and it's actually quite straightforward. You can refer to the cheat sheet or examples for a better understanding of how it works.

In markdown files, tables are created using a specific syntax that involves pipes (|) to separate the columns. You can see an example of this in the article, where Name and Age are the headers and Kealan, Jake and 25 & 28 are the values.

To make it clearer, an image is provided to illustrate how a markdown table is displayed. This image shows the headers and values in a clear and organized format.

Blockquotes

Blockquotes are a great way to add depth and context to your writing. To create a blockquote, you simply need to add an angle bracket (>) to the beginning of each line of text that you'd like to quote.

Credit: youtube.com, Formatting Block Quotes

Indenting the text is crucial, as it tells the reader that this is a separate block of quoted text. Just remember to add that angle bracket to the start of each line.

To format a blockquote properly, you need to separate it from the rest of the text by a blank line. This will ensure that the text inside the blockquote is formatted correctly.

I've found that using blockquotes can really help to break up the flow of a long piece of writing and make it easier to read.

Danny Orlandini

Writer

Danny Orlandini is a passionate writer, known for his engaging and thought-provoking blog posts. He has been writing for several years and has developed a unique voice that resonates with readers from all walks of life. Danny's love for words and storytelling is evident in every piece he creates.

Love What You Read? Stay Updated!

Join our community for insights, tips, and more.