HTML In Content Authoring From A Newbie

Content Authoring In Sitecore From A Newbie

Let the newbie chronicles continue. In a previous blog, I wrote about being new to the world of content authoring which also includes the use of HTML. Again, this was something that intimidated me but it turns out it’s actually not that scary.

HTML takes the formatting guess work away from you when authoring because the actual ‘tags’ you use are what puts the entire look together. Don’t you love it when a system does the work for you?! What I mean by this is when you’re actually doing the typing, you don’t have to worry about physically adding the bold/italicized font, making headings stand out, making the lists (numbered or not) indented correctly etc., all you have to do is add the correct tags.

What Are Tags?

So glad you asked. A ‘tag’ is basically the instructions on how the content being entered is to be viewed. For example, if you want the text to be bold you use <b>This text will be bolded</b> tags.

Results: This text will be bolded

Common HTML tags

Here are a couple of examples of common tags used when I’ve authored in Sitecore:

• <p> - Start of a paragraph, at the end you would add ‘/’ to close out the paragraph</p>
• <h2> - Heading that isn’t the page heading, at the end add ‘/’ to close the heading </h2>
• <ul><li> - Beginning of a list that is not numbered. Two tags are used here ‘Unordered List’ is the 'ul' and ‘List Item’ is the 'li'. To end the list add </li></ul>
• <ol><li> - Start of a numbered list. Two tags here are ‘Ordered List’ and ‘List Item’, and the same is applied to end the list here, just add </li></ol>

Examples In Action

Here’s an example of how the first paragraph in this article was entered as HTML in Sitecore:

<p>Let the newbie chronicles continue. In a previous blog, I wrote about being new to the world of 

content authoring which also includes the use of HTML. Again, this was something that intimidated 

me but it turns out it’s actually not that scary.</p>

Lastly, here’s a quick example of what a numbered list would look like:

<h2> Give the list a heading </h2>
<ol> 
<li> First item of the list here, it’ll automatically be assigned the ‘#1’</li>
<li> Second list item</li>
<li>Third and last list item</li> 
</ol>

Putting this together in Sitecore allows you to see what the end result will look like in text form before using Experience Editor to see it on the website, this way you can correct any errors right away.