JWS HTML & Style Patterns - Jasmine Web Starter Docs

Notes & News Feed Pattern

Whether you are looking to list and publish your research notes, or create a news feed with articles, we will show you how to make a very basic version of these. It will consist of patterns for 2 different page layouts, the first a listing page, and the second a news / research article page. Both will use the base styling that comes with the template CSS, though you can change or add your own styling within the style.css file if you wish to.

Listing page - Pattern 1

Once you have created your page with a header, main and footer, we can start to create our list area inside the <main> element.

First we create a parent div that will span across the width of the screen with the class "panel_full"

Inside of this div we need to create a child div. Now we can do this part a couple of different ways using either of these classes:

<div class="text_panel">
<div class="contents_panel">

Within this panel is where you will add your list of titles and links to either your research or news articles.

Option 1

HTML should look something like this:

<body>
    <main>
        <div class="panel_full">
            <div class="text_panel">
                <ul>
                    <li>List item 1</li>
                    <li>List item 2</li>
                    <li>List item 3</li>
                </ul>
            </div> <!-- closing div text_panel -->
        </div>  <!-- closing div panel_full -->
    </main>
</body>

Emmet snippet: div.full_panel>div.text_panel>ul>li*3

The above HTML results should then look this, though we have added some outlines to help demonstrate where the the outer edges of the two div's are, grey for the parent div and pink for the child div.

list item 1
list item 2
list item 3

Option 2

HTML should look something like this:

<body>
    <main>
        <div class="panel_full">
            <div class="contents_panel">
                <ul>
                    <li>List item 1</li>
                    <li>List item 2</li>
                    <li>List item 3</li>
                </ul>
            </div> <!-- closing div text_panel -->
        </div>  <!-- closing div panel_full -->
    </main>
</body>

Emmet snippet: div.full_panel>div.contents_panel>ul>li*3

For option 2 the HTML results should then look like this ( just like above we have added the coloured outlines for demonstration purposes ).

list item 1
list item 2
list item 3

As you can see the results are slightly different as the width of the text_panel div is constrained, where as the content_panel fills the whole width of the parent div. As its initial concept was for it to be used for mixed image & text content, like you see on a blog style listing or a info card (card pattern coming soon). But it would still work as a basic list if you are wanting your text to be able to fill across the whole screen, though for the purpose of accessibility the recommendation is that a comfortable length reading line should be constrained to between 45 - 80 characters long.

Styling the list

For a basic listing page you probably only need to add to each <li> list item a date, plus a subject title wrapped inside a link. But to give some of the information semantic meaning we need to add HTML tags rather than just simply typing it in.

Time

Using the <time> element, helps browsers, search engines, and assistive technologies understand the date format:

 <time datetime="2025-05-16">May 16, 2025</time>

This code will look like this when viewed:

May 16, 2025

The <time> element is important because it enhances accessibility, search engine optimization (SEO), and machine readability. Here’s why:

Semantics & Accessibility: It explicitly defines a date or time, helping screen readers and assistive technologies understand and convey the information correctly to users.
SEO Benefits: Search engines recognise <time> elements, allowing them to interpret dates more accurately—useful for events, articles, and structured data.
Machine Readability: The datetime attribute provides a standard, unambiguous format (ISO 8601), which can be useful for scripts, automated tools, and web crawlers.

Using <time> is a simple way to make your HTML more meaningful without altering how it looks to most users, when working on a project where structured data is important.

Title & Link

Normally when we talk about titles in HTML we would usually wrap them within a heading tag e.g. <h3> </h3> but in this scenario where we only want a list of dates & titles it's not really necessary. But you could add a heading tag if you wish to, just as long as they follow the flow of the page (how to use Core Styles - headings). Plus you should also nest the <a> inside the heading tag, that way screen readers should read and prioritise it as a heading rather than just a link.

<li>
    <a href="event-page1.html">
        <time datetime="2025-05-16">May 16, 2025</time> - Subject 1
    </a>
</li>

No heading tag, time tag inside <a> with title looks like this:

May 16, 2025 - Subject 1

<li>
    <time datetime="2025-05-16">May 16, 2025</time> <a href="link-to-subject1.html">- Subject 2 </a>
</li>

No heading tag, time tag not inside <a> with title looks like this:

May 16, 2025 - Subject 2

<li>
    <a href="link-to-subject1.html">May 16, 2025 - Subject 3 </a>
</li>

No heading or time tag, date and title inside <a> looks like this:

May 16, 2025 - Subject 3

Note: When using a heading tag inside an <li> it causes the heading to wrap onto a second line away from the li ::marker (list decoration symbol). We can override this behaviour by changing the heading display type to display: inline-block; with a class in your stylesheet that you then apply to your heading tag (e.g. <h3 class="class_name_here">).

<li>
    <h3> <a href="link-to-subject2.html">May 16, 2025 - Subject 4 </a> </h3>
</li>

No time tag, the heading tag around the <a> with date and title inside looks like this:

May 16, 2025 - Subject 4

<li>
    <h3 class="line_up"> <a href="link-to-subject2.html"><time datetime="2025-05-16">May 16, 2025</time> - Subject 5 </a> </h3>
</li>

Heading tag around the <a> with time tag and title inside <a>, plus a class added to make the li and heading display inline-block, looks like this:

May 16, 2025 - Subject 4

News Page - Pattern 2

Once your list page is complete you will need to create another page for each item in your list. Each page will need to start off with a Quick start HTML skeleton just like we did for the listing page. The difference here will be with how we structure the contents inside the <main> section of the page, as we will be using more semantic HTML elements this time with <article>, <section> and <aside>, which will help give our page more contextual meaning for screen readers, web browsers and search engines, so they can understand the flow of the page and its contents easier.

So lets have a look at what we'll be using:

<article>: Its purpose is for self-contained, individual pieces of content that either stands alone or could potentially be reused elsewhere e.g. blog posts, news articles, forum posts. It should always contain a heading and can also contain other semantic elements such as header, section, aside and footer.
<section>: It logically groups together related content, either within a document, page or article. It often has its own heading too.
<aside>: Its purpose is for adding extra supplementary contents. That are either related to, or complements the main primary content, but are not necessarily an essential part of it. They are commonly used for content such as side notes, related links, sidebars, advertising sections, pull quotes, or general extra information.

<article>
    <h2>How to Grow Tomatoes</h2>
    <p>Tomatoes thrive in well-drained soil...</p>
</article>

<section>
    <h2>Tips for Healthy Eating</h2>
    <p>Eating a balanced diet is key...</p>
</section>

    /---- Aside being used as a supplementary note in an article ----/ 
<article>
    <h2>How to Grow Tomatoes</h2>
    <p>Tomatoes thrive in well-drained soil...</p>
    <aside>
      <h3>Related Tip</h3>
      <p>Consider companion planting with basil for better growth.</p>
    </aside>
</article>

News page main contents

Now we have a little understanding of what the elements are and how we can use them, lets see how we can add them to our page.

Wrapper and Page type

Inside the <main> we first want to start by adding a generic <div> with the class="panel_full", this will act as a wrapper around the other elements and contents we place within the page.

<main>
    <div class="panel_full">
    
    </div>  
</main>

Emmet snippet: div.full_panel

It is also where we can add a class to create what we call a page type. A page type is used when we want to control the styling or behaviour of particular HTML elements, that will only be relevant to this specific page, plus any others we also want to add this page type class name to. This way we won't effect or cause styling issues for these elements anywhere else across the site.

<main>
    <div class="panel_full press_release">
        <article>...</article>
    </div>  
</main>

Emmet snippet: div.full_panel.press_release

/*--- press_release styling ---*/
.press_release > article {
    inline-size: 80ch; 
    margin-inline: auto; 
    justify-items: center;
}
/*--- any article and its contents wrapped inside a press_release div will have this code applied ---*/

Note: If you wish to add this CSS to your own style.css file, you will need to manually copy and paste it.

Article and article header

We now want to add <article> tags inside our "panel_full", this will be where we add our self-contained, individual piece of content.

<main>
    <div class="panel_full">
        <article>
        
        </article>
    </div>  
</main>

As the purpose of this page is to inform people about your news/research we need to make sure each page clearly states what the subject of the page is from the start. We can do this by adding a <header> element to our <article>. It isn't strictly necessary to use a header element but an article should contain a heading, though adding a well crafted header will give your readers instant context, and can also make the article feel more polished.

Within this header element we need to add a heading e.g. a <h1>, <h2> (remember headings should flow in order down the page, see Core Styles - headings for more). A <p> with a <time> tag for the published date.

<main>
    <div class="panel_full">
        <article>
            <header>
                <h1>How to Grow Tomatoes</h1>
                <p>Published: <time datetime="2025-05-16">May 16, 2025</time></p>
            </header>
        </article>
    </div>  
</main>

Inside the header you can include other relevant information you want e.g. the author or topic info. You can even style it up more than the base styling that's provided in our style.css file.

Such as changing font colour / weight to a single word e.g. "Authors name" by wrapping a <span> tag around the word and add a class name to target it within the style.css file. Or you could target a whole tag with a class like the <time> tag below.

<main>
<div class="panel_full">
    <article>
        <header>
            <h1>How to Grow Tomatoes</h1>
            <p>Published:<time class="blue_font" datetime="2025-05-16">May 16, 2025</time></p>
            <p><span class="purple_font">Authors name</span></p>
            <p>Gardening / Vegetables / Propagating</p>
        </header>
    </article>
</div>  
</main>

/*--- My Own Style Choices ---*/

.purple_font {
    font-weight: 400;
    color: darkmagenta;
}

.blue_font {
    color: rgb(0, 0, 128);
}

Note: The class names above are used to help you understand the provided example clearly. However naming things is hard at the best of times but using a colour in the class name is never a great idea as if the colour is changed the class name will not then make sense. We plan to cover the naming of class names in more details soon.

Section and text_panel

We now need to add the main content of your article. If what you are publishing, comprises of logically grouped content each with its own heading (i.e. chapters, or separate subjects within a subject), you should probably use <section> tags, especially if it's a long document. This would help a user with a screen reader to move around your article easier. Though a section must contain a heading!

<main>
<div class="panel_full">
    <article>
        <header>...</header>
        <section>
            <h2>How to sow Tomatoes</h2>
            <p>.........</p>
        </section>
        <section>
            <h2>Propagating Tomatoes</h2>
            <p>.........</p>
        </section>
    </article>
</div>  
</main>

What if the content isn't logically grouped or separated by headings? Not to worry as you also have the option to use a div and add a class name to it which you can then callout in your stylesheet. Though for those using our template CSS file we have this covered with our <div class="text_panel">.

<main>
<div class="panel_full">
    <article>
        <header>...</header>
        <div class="text_panel">
            <h2>How to sow Tomatoes</h2>
            <p>.........</p>
            <h2>Propagating Tomatoes</h2>
            <p>.........</p>
        </div>
    </article>
</div>  
</main>

Whichever way you choose either a <section>, <div class="text_panel"> or both, within each one you can use most HTML elements to organise and style your contents headings, paragraphs, code blocks etc...

Aside

If you have extra content, that's related to or complementary to the main content, but doesn't want or need to be in the main flow of the document. Then you should add this within <aside> tags. The aside is ideally used for side notes to the content, related links to other page sections, webpages or websites, a callout section, or even advertising such as other published articles you have written. Whatever your reason an <aside> element can also contain most HTML elements to structure the <aside> content as long as it has a related or supplementary purpose to its associated main content. You can also apply CSS styling to control the <aside> layout position and visual appearance within the page.

<main>
<div class="panel_full">
    <article>
        <header>...</header>
        <section>...</section>
        <aside>
            <h2>Tomatoes Cam</h2>
            <p><a href="www.mygreenhouse...">Watch me live</a> in my greenhouse</p>
            <p>Everyday 12 till 2pm</p>
        </aside>
    </article>
</div>  
</main>

Article Footer

Inside <article> tags we can also add a footer. Typically this is where you can add information related to this particular article. Similar to the header we can add Publication date, author name, category keywords or tags, copyright info, related links.

Article Header & Footer styling

Adding header and footer elements within an article could cause some rather odd styling issues, as they will inherit whatever styling you already have set for your pages body header and footer in your style.css file.

This is fine in most cases as you can just apply new CSS values to make them appear how you wish. However what happens if, we don't want to use all of the applied styling? Well we can remove the applied style element to leave it like it was never set in the first place.

Resetting to default

We can remove the elements style that has been applied by setting its property value to revert, this will revert the element back to the default style that the browser applies for that element in the user agent stylesheet.

 /*--- style.css setting ---*/
article {
    inline-size: 80ch;
}
/*--- resets to browser default ---*/
article {
    inline-size: revert;
}

Targeting all articles

If you want all article header's and footer's within your website to have the same styling you can target the article > header adding or removing whatever properties and values you want to change.

 /*--- Overrides header position & padding ---*/
article > header { 
align-items: start;
padding: 0;}

/*--- resets our footer styling ---*/
article > footer { 
border-top: revert;
}

Note: These are a good starting point if you are using a header or footer in an article along with our JWS template style.css

Targeting specific articles

Using a Page Type (like we showed earlier in this page) allows us to target all articles within a page we add this class to, alternatively we can create a class name to add to specific articles that we wish to make different to any others.

Making code changes can be done either within the template style.css file you are using, or you can create and link a separate stylesheet of your own to each webpage below the original stylesheet link, this will override the properties and values you wish to change or add.

Website Files and Folders Extra:

We had a few questions relating to files and folders used within a website. We have plans to explore these in detail in the hosting and deployment section which is due to be released soon.

However lets take a quick look at them, firstly when you build a website like this each page of the website is a real file like a index.html within a folder that's deployed to your web server. So why do we name it index.html, each web server has what is know as a set of Default Documents or Default index pages defined that will be returned if a request is made to a folder.

On Linux Web Hosting platforms, the following are standardly set as default index pages (in order of priority):

index.php
index.html
index.htm
index.cgi
index.rb
index.py

On Windows Web Hosting platforms, the following are configured (in order of priority):

default.aspx
default.asp
index.php
index.htm
default.htm
index.asp
index.html
iisstart.htm

On managed WordPress Hosting platforms

Its common that only a index.php is set.

These can be changed by adjusting the config files like the .htaccess, web.config or changing web hosting control panel options but mostly you will not need to.

A standard working pattern when creating a website is to create a folder for each page on the website that has a default doc and a sub folder for pages that are children of a parent i.e. we have a News page /news then each news release would be a child of that folder which would give us a sub folder like /news/steve_joins or maybe /news/updatesforjune25

Its also standard practice to have a /css folder for style, a /img or /images one for images and a /js for JavaScript files, however it is also common to see these files as sub folder to a folder called /assets i.e. /assets/css

These folders and files are then typically uploaded to the web servers public_html folder. Anything inside the public_html folder is publicly available to your users to request/view.

We hope you found this outline useful

We are always keen to get your feedback, let us know if you think we should have covered more details on anything or if you are keen for us to write about another type of pattern, reach out using the Contact form to let us know.

Page Last Edited: 01/06/2025