<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Adeel</title>
    <description>The latest articles on DEV Community by Adeel (@adeel_159).</description>
    <link>https://dev.to/adeel_159</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4186651%2Fa81f450b-7a93-4bb1-9716-eaad0b805a05.png</url>
      <title>DEV Community: Adeel</title>
      <link>https://dev.to/adeel_159</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/adeel_159"/>
    <language>en</language>
    <item>
      <title>Markdown Syntax for Beginners: A Practical Guide</title>
      <dc:creator>Adeel</dc:creator>
      <pubDate>Thu, 15 Oct 2026 14:14:50 +0000</pubDate>
      <link>https://dev.to/adeel_159/markdown-syntax-for-beginners-a-practical-guide-l70</link>
      <guid>https://dev.to/adeel_159/markdown-syntax-for-beginners-a-practical-guide-l70</guid>
      <description>&lt;p&gt;Markdown is a lightweight way to add structure and emphasis to plain text using characters such as &lt;code&gt;#&lt;/code&gt;, &lt;code&gt;*&lt;/code&gt; and backticks. Learn a few core patterns, then preview your document in the place you plan to publish it.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Markdown is and why it is useful
&lt;/h2&gt;

&lt;p&gt;Markdown is a lightweight syntax for structuring plain text. A few familiar characters create headings, emphasis, lists, links and code, while the source remains readable even before it is rendered. Markdown files commonly use the &lt;code&gt;.md&lt;/code&gt; extension.&lt;/p&gt;

&lt;p&gt;It is useful for README files, technical documentation, notes and other writing that benefits from being easy to edit, compare and keep in version control. A renderer converts the syntax into HTML or another format. The original Markdown description left some behavior open, so &lt;a href="https://commonmark.org" rel="noopener noreferrer"&gt;CommonMark&lt;/a&gt; provides a more consistent core specification. GitHub Flavored Markdown (GFM) adds features such as tables, task lists and strikethrough. Because support varies, preview a document in its destination.&lt;/p&gt;

&lt;h2&gt;
  
  
  The core Markdown syntax
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Headings
&lt;/h3&gt;

&lt;p&gt;Start a heading with one to six &lt;code&gt;#&lt;/code&gt; characters. More characters indicate a lower-level heading. Add a space after the hashes, use one main heading for the document title, and keep heading levels in order.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight markdown"&gt;&lt;code&gt;&lt;span class="gh"&gt;# Project notes&lt;/span&gt;
&lt;span class="gu"&gt;## Setup&lt;/span&gt;
&lt;span class="gu"&gt;### Requirements&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;A consistent hierarchy makes long documents easier to scan and helps assistive technology and search systems interpret the page structure when it is published as HTML.&lt;/p&gt;

&lt;h3&gt;
  
  
  Paragraphs and line breaks
&lt;/h3&gt;

&lt;p&gt;A blank line separates paragraphs. A single newline inside a paragraph is usually rendered as a space. To force a line break without starting a new paragraph, end the line with two spaces or a backslash:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight markdown"&gt;&lt;code&gt;First line&lt;span class="err"&gt;\&lt;/span&gt;
Second line
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Bold, italic and strikethrough
&lt;/h3&gt;

&lt;p&gt;Use one &lt;code&gt;*&lt;/code&gt; or &lt;code&gt;_&lt;/code&gt; for italic text and two for bold. Three markers can combine both styles. Strikethrough with two tildes is a GFM extension.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight markdown"&gt;&lt;code&gt;&lt;span class="ge"&gt;*italic*&lt;/span&gt; and &lt;span class="gs"&gt;**bold**&lt;/span&gt;
&lt;span class="gs"&gt;***bold and italic**&lt;/span&gt;&lt;span class="err"&gt;*&lt;/span&gt;
~~removed text~~
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Lists
&lt;/h3&gt;

&lt;p&gt;Use &lt;code&gt;-&lt;/code&gt;, &lt;code&gt;*&lt;/code&gt; or &lt;code&gt;+&lt;/code&gt; for unordered lists. For ordered lists, put a number and period before each item. Indent nested items consistently. GFM also supports task lists:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight markdown"&gt;&lt;code&gt;&lt;span class="p"&gt;-&lt;/span&gt; Review the draft
&lt;span class="p"&gt;-&lt;/span&gt; Check the examples
&lt;span class="p"&gt;  -&lt;/span&gt; Confirm the code block
&lt;span class="p"&gt;
1.&lt;/span&gt; Open the editor
&lt;span class="p"&gt;2.&lt;/span&gt; Write the content
&lt;span class="p"&gt;3.&lt;/span&gt; Preview the result
&lt;span class="p"&gt;
-&lt;/span&gt; [x] Write the draft
&lt;span class="p"&gt;-&lt;/span&gt; [ ] Proofread
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Renderers generally count ordered-list items from the first number, so the source numbers do not always need to be sequential.&lt;/p&gt;

&lt;h3&gt;
  
  
  Links and images
&lt;/h3&gt;

&lt;p&gt;Put link text in square brackets and its destination in parentheses. An image uses the same pattern with an exclamation mark before the brackets:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight markdown"&gt;&lt;code&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nv"&gt;Markdown Editor&lt;/span&gt;&lt;span class="p"&gt;](&lt;/span&gt;&lt;span class="sx"&gt;https://freetoolsnexus.com/tools/markdown-editor&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="p"&gt;![&lt;/span&gt;&lt;span class="nv"&gt;A description of the image&lt;/span&gt;&lt;span class="p"&gt;](&lt;/span&gt;&lt;span class="sx"&gt;https://example.com/images/diagram.png&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Choose link text that explains where the link leads. Give images meaningful alt text so people using screen readers can understand their purpose, and so the description can appear if an image does not load.&lt;/p&gt;

&lt;h3&gt;
  
  
  Blockquotes and code
&lt;/h3&gt;

&lt;p&gt;Start a quoted line with &lt;code&gt;&amp;gt;&lt;/code&gt;. Wrap a short code term in backticks. For longer examples, use three backticks on separate lines; adding a language name can enable syntax highlighting where the renderer supports it.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight markdown"&gt;&lt;code&gt;&lt;span class="gt"&gt;&amp;gt; Keep examples easy to read.&lt;/span&gt;

Run &lt;span class="sb"&gt;`npm install`&lt;/span&gt; to install dependencies.

&lt;span class="p"&gt;```&lt;/span&gt;&lt;span class="nl"&gt;json
&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nl"&gt;"name"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"Maya"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nl"&gt;"active"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;```&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;When documenting JSON, check that the example is valid with the &lt;a href="https://freetoolsnexus.com/tools/json-formatter" rel="noopener noreferrer"&gt;JSON Formatter &amp;amp; Validator&lt;/a&gt;. To display triple backticks inside another fenced block, use a longer fence around the outer example.&lt;/p&gt;

&lt;h3&gt;
  
  
  Tables and horizontal rules
&lt;/h3&gt;

&lt;p&gt;Tables use pipes to separate columns and a divider row under the header. Colons in the divider row set alignment. Tables are supported by GFM, but are not part of core CommonMark, so preview them on the platform where the document will appear.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight markdown"&gt;&lt;code&gt;| Format | Purpose |
|:-------|:--------|
| JSON   | Data    |
| YAML   | Config  |
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For a horizontal rule, put &lt;code&gt;---&lt;/code&gt;, &lt;code&gt;***&lt;/code&gt; or &lt;code&gt;___&lt;/code&gt; on a line by itself, with a blank line above it.&lt;/p&gt;

&lt;h3&gt;
  
  
  Escaping special characters
&lt;/h3&gt;

&lt;p&gt;If a character would normally trigger formatting, put a backslash before it to show the character literally:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight markdown"&gt;&lt;code&gt;&lt;span class="se"&gt;\*&lt;/span&gt;this is not italic&lt;span class="se"&gt;\*&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Markdown quick reference
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Element&lt;/th&gt;
&lt;th&gt;Syntax&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Heading&lt;/td&gt;
&lt;td&gt;&lt;code&gt;# Heading&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Bold&lt;/td&gt;
&lt;td&gt;&lt;code&gt;**bold**&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Italic&lt;/td&gt;
&lt;td&gt;&lt;code&gt;*italic*&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Strikethrough (GFM)&lt;/td&gt;
&lt;td&gt;&lt;code&gt;~~text~~&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Inline code&lt;/td&gt;
&lt;td&gt;&lt;code&gt;`code`&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Link&lt;/td&gt;
&lt;td&gt;&lt;code&gt;[text](https://example.com)&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Image&lt;/td&gt;
&lt;td&gt;&lt;code&gt;![alt text](image.png)&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Blockquote&lt;/td&gt;
&lt;td&gt;&lt;code&gt;&amp;gt; quote&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Bullet list&lt;/td&gt;
&lt;td&gt;&lt;code&gt;- item&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Numbered list&lt;/td&gt;
&lt;td&gt;&lt;code&gt;1. item&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Task list (GFM)&lt;/td&gt;
&lt;td&gt;&lt;code&gt;- [ ] task&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Horizontal rule&lt;/td&gt;
&lt;td&gt;&lt;code&gt;---&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Code block&lt;/td&gt;
&lt;td&gt;Three backticks around the code, optionally followed by a language&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  Writing Markdown for developer projects
&lt;/h2&gt;

&lt;h3&gt;
  
  
  README files and documentation
&lt;/h3&gt;

&lt;p&gt;Markdown keeps project documentation in plain text, which makes it easy to read, edit and review alongside code. Draft in the &lt;a href="https://freetoolsnexus.com/tools/markdown-editor" rel="noopener noreferrer"&gt;Markdown Editor with Live Preview&lt;/a&gt; to see how headings, lists and code blocks render before committing the file.&lt;/p&gt;

&lt;h3&gt;
  
  
  YAML front matter
&lt;/h3&gt;

&lt;p&gt;Some static site generators read page metadata from YAML placed between &lt;code&gt;---&lt;/code&gt; markers at the top of a Markdown file. This section is called front matter:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight yaml"&gt;&lt;code&gt;&lt;span class="nn"&gt;---&lt;/span&gt;
&lt;span class="na"&gt;title&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Project&lt;/span&gt;&lt;span class="nv"&gt; &lt;/span&gt;&lt;span class="s"&gt;notes"&lt;/span&gt;
&lt;span class="na"&gt;date&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;2026-10-09&lt;/span&gt;
&lt;span class="na"&gt;tags&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="pi"&gt;[&lt;/span&gt;&lt;span class="nv"&gt;markdown&lt;/span&gt;&lt;span class="pi"&gt;,&lt;/span&gt; &lt;span class="nv"&gt;guide&lt;/span&gt;&lt;span class="pi"&gt;]&lt;/span&gt;
&lt;span class="nn"&gt;---&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If your metadata is in JSON, convert it with the &lt;a href="https://freetoolsnexus.com/tools/json-to-yaml" rel="noopener noreferrer"&gt;JSON to YAML Converter&lt;/a&gt;. For a broader comparison of the formats and their trade-offs, see &lt;a href="https://freetoolsnexus.com/guides/json-vs-xml-vs-yaml" rel="noopener noreferrer"&gt;JSON vs XML vs YAML&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Comparing edits and cleaning up repeated text
&lt;/h3&gt;

&lt;p&gt;Markdown is plain text, so you can compare document versions to review exactly what changed. The &lt;a href="https://freetoolsnexus.com/tools/text-diff-checker" rel="noopener noreferrer"&gt;Text Diff Checker&lt;/a&gt; can help compare two drafts before publication.&lt;/p&gt;

&lt;p&gt;For repetitive edits, a regular expression can transform matching text. For example, this pattern and replacement turn a bare URL on a line into a Markdown link:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Find:    ^(https?://\S+)$
Replace: [$1]($1)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Test bulk replacements on a copy first. A pattern that matches more than intended can alter text outside the target lines.&lt;/p&gt;

&lt;h3&gt;
  
  
  Converting and reusing Markdown
&lt;/h3&gt;

&lt;p&gt;Use the &lt;a href="https://freetoolsnexus.com/tools/markdown-to-pdf" rel="noopener noreferrer"&gt;Markdown to PDF &amp;amp; HTML Converter&lt;/a&gt; to prepare a document for sharing as HTML or PDF. The &lt;a href="https://freetoolsnexus.com/tools/pdf-to-markdown" rel="noopener noreferrer"&gt;PDF to Markdown Converter&lt;/a&gt; can turn a PDF into editable text, but review the result: page layout, tables and multiple columns may not map neatly back to Markdown.&lt;/p&gt;

&lt;h2&gt;
  
  
  Common Markdown mistakes
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Leaving out the space after &lt;code&gt;#&lt;/code&gt;.&lt;/strong&gt; Write &lt;code&gt;# Title&lt;/code&gt;, not &lt;code&gt;#Title&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Skipping blank lines.&lt;/strong&gt; Add a blank line before a list or table so it is not interpreted as part of the preceding paragraph.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Inconsistent list indentation.&lt;/strong&gt; Use a consistent number of spaces for nested items.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Expecting every newline to create a line break.&lt;/strong&gt; Use a hard-break marker or a blank line when that is the intended layout.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Leaving special characters unescaped.&lt;/strong&gt; An asterisk or underscore in ordinary text can be interpreted as formatting; escape it or wrap the text in code.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Forgetting to close a code fence.&lt;/strong&gt; An unclosed fence can make the rest of the document render as code.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Using a pipe inside a table cell without escaping it.&lt;/strong&gt; Write &lt;code&gt;\|&lt;/code&gt; when a literal pipe belongs in a cell.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Assuming extensions work everywhere.&lt;/strong&gt; Tables, task lists and other additions vary by renderer. Preview the final document in its destination.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Relying on raw HTML.&lt;/strong&gt; Some platforms limit or remove HTML inside Markdown.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Try the tools in this guide
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://freetoolsnexus.com/tools/markdown-editor" rel="noopener noreferrer"&gt;Markdown Editor with Live Preview&lt;/a&gt;: live preview, formatting toolbar and one-click export, all in your browser.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://freetoolsnexus.com/tools/markdown-to-pdf" rel="noopener noreferrer"&gt;Markdown to PDF &amp;amp; HTML Converter&lt;/a&gt;: turn Markdown into a styled PDF or standalone HTML.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://freetoolsnexus.com/tools/pdf-to-markdown" rel="noopener noreferrer"&gt;PDF to Markdown Converter&lt;/a&gt;: extract editable Markdown from PDFs locally, with optional OCR.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://freetoolsnexus.com/tools/json-formatter" rel="noopener noreferrer"&gt;JSON Formatter &amp;amp; Validator&lt;/a&gt;: beautify, minify and validate JSON.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://freetoolsnexus.com/tools/json-to-yaml" rel="noopener noreferrer"&gt;JSON to YAML Converter&lt;/a&gt;: convert JSON into readable YAML.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://freetoolsnexus.com/tools/text-diff-checker" rel="noopener noreferrer"&gt;Text Diff Checker&lt;/a&gt;: compare two drafts and inspect every change.&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>markdown</category>
      <category>beginners</category>
      <category>tutorial</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
