How to add tags to blogposts

I'm trying to add tags to blogposts, these will be shown on the blog index so you can use them to filter and when you create a blogpost you can check tags relevant to the post which then will be displayed on the blogpost page. But I just don't get how I can add them to the blog creation in the CMS. Now I have read the blog tag related pages all about a million times, but I'm in that state of mind right now where everytime you read something you get more confused :(

This is my post.html, the part where I want the tags to show up is almost at the bottom of the code:

<article class="m-article o-grid o-grid--modern o-grid--equal-cells o-grid--modern-vertical-small">

    <div class="o-grid__cell o-grid__cell--fixed-small h-pos-relative small-col-1of1">

        <div class="o-ratio  small-col-1of1">
            <div class="o-ratio__size o-ratio__size--square">
                <div class="m-article--date o-ratio__content h-v-align-center-flex">
                    <time datetime="<perch:blog id="postDateTime" type="date" label="Date" time="true" format="Y-m-d H:i:s" order="3" divider-before="Publishdate" divider-after="Article" />">
                        <span class="m-date"><perch:blog id="postDateTime" type="date" time="true" format="%d" /></span>
                        <span class="m-date"><perch:blog id="postDateTime" type="date" time="true" format="%b" /></span>
                        <span class="m-date"><perch:blog id="postDateTime" type="date" time="true" format="%Y" /></span>
                    </time>
                </div>
            </div>
        </div>


        <div class="o-ratio  small-col-1of1">
            <div class="o-ratio__size o-ratio__size--square">
                <div class="m-back-link o-ratio__content">
                    <a class="m-back-link__link h-v-align-center-flex" href="/blog"><span class="m-back-link__body"><svg class="m-svg-icon-inline" height="24" viewBox="0 0 24 24" width="24" xmlns="https://www.w3.org/2000/svg"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>back to blog<span></a>
                </div>
            </div>
        </div>

    <perch:if exists="progress_25">
        <div class="m-progress-label m-progress-label--one-quarter">
            <perch:blog id="progress_25" type="checkbox" label="Progress 25%" value="25%" divider-before="Progress markers" />
        </div>
    </perch:if>

    <perch:if exists="progress_50">
        <div class="m-progress-label m-progress-label--one-half">
            <perch:blog id="progress_50" type="checkbox" label="Progress 50%" value="50%" />
        </div>
    </perch:if>

    <perch:if exists="progress_75">
        <div class="m-progress-label m-progress-label--three-quarters">
            <perch:blog id="progress_75" type="checkbox" label="Progress 75%" value="75%" />
        </div>
    </perch:if>

    <perch:if exists="progress_100">
        <div class="m-progress-label m-progress-label--finish">
            <perch:blog id="progress_100" type="checkbox" label="Progress 100%" value="end" />
        </div>
    </perch:if>

    </div><!-- END:o-grid__cell -->

    <div class="o-grid__cell small-col-1of1">

        <div class="m-wrapper m-wrapper--shadow">

            <div class="m-article--body">

                <div class="text-constrain">
                    <header>
                        <h1>
                            <perch:blog id="postTitle" type="text" label="Blog Title" required="true" size="xl autowidth" order="1" />
                        </h1>
                    <perch:if exists="blogPostSubtitle">
                        <span class="subheading h3">
                            <perch:blog id="blogPostSubtitle" type="text" label="Blog Subtitle" size="xl autowidth" order="2" />
                        </span>
                    </perch:if>
                    </header>
                </div>

                <perch:blocks order="4">

                    <perch:block label="Plain text with dropcap" type="b_plainTextDropcap">
                        <perch:template path="content/blocks/plaintext-dc.html" rescope="parent" />
                    </perch:block>

                    <perch:block label="Plain text" type="b_plainText">
                        <perch:template path="content/blocks/plaintext.html" rescope="parent" />
                    </perch:block>

                    <perch:block label="Pull quote" type="b_pullquote">
                        <perch:template path="content/blocks/pullquote.html" rescope="parent" />
                    </perch:block>

                    <perch:block label="Media - text | image" type="b_mediaTextImage">
                        <perch:template path="content/blocks/media-text-image.html" rescope="parent" />
                    </perch:block>

                    <perch:block label="Media - image | text" type="b_mediaImageText">
                        <perch:template path="content/blocks/media-image-text.html" rescope="parent" />
                    </perch:block>

                </perch:blocks>

            </div><!-- END:M-ARTICLE--BODY -->

            <div class="m-article--tags">
                <div class="text-constrain ">

                    <!-- TAGS GO HERE -->
                    <ul class="h-list-reset list-inline">
                        <li><a class="o-button o-button--tiny o-button--flat-grey" href="#">TAG</a></li>
                    </ul>

                </div>
            </div>

        </div><!-- END:m-wrapper m-wrapper--shadow -->

    </div><!-- END:o-grid__cell -->

</article>

So as I understand it the <ul> containing the list with the tags goes inside tag_link.html, and I assume

<?php perch_blog_post(perch_get('s')); ?>

gets all the blogpost info including the tags and

<?php perch_blog_post_tags(perch_get('s')); ?>

should only be used when I only want the tags to show up somewhere, right?

But again, I just don't understand how to make it so I can add them through "create blog post".