Tek Eye Logo

Tek Eye

↓markdown↓ CMS Page Header and Meta Tags

The ↓markdown↓ Content Management System (md-CMS) allows for quick and easy web content creation, (see the article About ↓markdown↓). Unlike many other CMSs that use a database, web page content is simply stored in Markdown format files within folders on the web server. Not using a database means md-CMS requires fewer web server resources and serves up web pages quickly. The md-CMS Markdown format files (with a file extension of .md) can have a header section. This header can enable extra features for the web page sent to the user's web browser. E.g., the header can set the <title> tag or add metadata elements. This tutorial article shows how to use the header section to set up different web page features for md-CMS web pages.

A Simple md-CMS Header Example

The article Web Page Title Tag in ↓markdown↓ CMS introduced the md-CMS header section. That article shows how to set a web page title. The web page <title> tag is set with the Title attribute in the md-CMS header. The header is at the start of the Markdown file and is indicated with the <!-- and --> markers. These markers are familiar to HTML coders, they are used to add comments inside a web page's HTML code. In md-CMS the HTML comment tags at the start of a Markdown file indicate a md-CMS header section. Here is a simple md-CMS web page that sets the web page title:

<!--
Title: A Web Page Title
-->

A Website Page
--------------

This is a simple web page that has some simple text content.

Here is the resultant web page. The title is seen on the browser tab, along with the website name if it has been set (see the Website Home Page article on configuring a md-CMS site name):

md-CMS Title page

This is equivalent to setting the <title> tag in the <head> section of a web page:

<html lang="en-GB">
    <head>
        <title>A Web Page Title | Web Site Name</title>
    </head>
    .
    .
    .

Two types of md-CMS Header Markers

As shown above lines between the <!-- and --> markers are md-CMS header indicators. The header markers can be \* and *\, familiar to programmmers as they are used as comment markers in source code. Therefore, the header in the example above could have been:

/*
Title: A Web Page Title
*/

Pick the style of header markers that you are comfortable with.

md-CMS Web Page Attributes

The md-CMS header markers are used to control different aspects of the web page displayed in the destination browser. This is done using name-value pairs, as for the Title attribute shown above. The Title attribute is the name and the value can be set as required (e.g., as in A Web Page Title above). Other name-value pairs can be set for a md-CMS web page. They follow the same format of attribute name then a : (colon) then the value to be assigned to the name (any spaces between the colon and the value are ignored).

The following attributes are supported for a md-CMS header section, some useful for help with Search Engine Optimization (SEO):

Attribute Example Result Note
Title Title: A Web Page Title <title>A Page | Web Site Name</title> Sets the web page title (see above).
Description Description: Article on HTML <meta name="description" content="Article on HTML" /> Sets the web page description <meta> tag.
Author Author: A.N.Other <meta name="author" content="A.N.Other" />, plus, Author:A.N.Other is shown on the last line of the web page article. Sets the web page author <meta> tag and displays the author towards the bottom of the web page.
Published Published: 2020-12-25 Published:2020-12-25 is shown on the last line of the web page article. Adds a published date towards the bottom of the web page.
Updated Updated: 2021-01-01 Updated:2021-01-01 is shown on the last line of the web page article. Adds an updated date towards the bottom of the web page.
Comments Comments: Yes Appends a HTML form for comments to a web page. Set to yes to enable a feedback form for a web page, additional settings required, see the Feedback Form article.
Syntax Syntax: Yes Enables syntax highlighting of Markdown code sections (using tab indented text). Set to yes to color code sections, see the Code Highlighter article (with information on non-CDN use).
SynStyle SynStyle: github Set the code section highlighting Cascading Style Sheet (CSS). Sets the syntax CSS, see the Code Highlighter article for further information.

Here is an example of a md-CMS header section using some of attributes shown in the table above:

<!--
Title: What is HTML?
Description: Article on HTML.
Author: A.N.Other
Published: 2020-12-25
Updated: 2021-01-01
Syntax: Yes
SynStyle: github
-->

See Also

Author:  Published:  

ShareSubmit to TwitterSubmit to FacebookSubmit to LinkedInSubmit to redditPrint Page

Do you have a question or comment about this article?

(Alternatively, use the email address at the bottom of the web page.)

 This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

markdown CMS Small Logo Icon ↓markdown↓ CMS is fast and simple. Build websites quickly and publish easily. For beginner to expert.


Articles on:

Android Programming and Android Practice Projects, HTML, VPS, Computing, IT, Computer History, ↓markdown↓ CMS, C# Programming, Using Windows for Programming


Free Android Projects and Samples:

Android Examples, Android List Examples, Android UI Examples



Tek Eye Published Projects