Weather application data structures and design
About the HTML

You shouldn’t use heading elements (h1-h6) like that. These elements give the heading for the section they create. Don’t use them for the name in simple name-value items, nor for stand-alone content (where no other content in the section exists).

You could represent each day as a section:



&lt;section&gt;&lt;!-- day 1 --&gt;&lt;/section&gt;
&lt;section&gt;&lt;!-- day 2 --&gt;&lt;/section&gt;
&lt;section&gt;&lt;!-- day 3 --&gt;&lt;/section&gt;
&lt;section&gt;&lt;!-- day 4 --&gt;&lt;/section&gt;
&lt;section&gt;&lt;!-- day 5 --&gt;&lt;/section&gt;


A section should ideally have a heading (and it’s the only one needed in this case). I think it makes the most sense to use the day+date as heading. The time element can be used to mark up the date in a machine-readable way. The abbr element can be used to give the full name of the day.

&lt;h2&gt;&lt;abbr title="Sunday"&gt;Sun&lt;/abbr&gt; &lt;time datetime="2017-12-31"&gt;Dec. 31&lt;/time&gt;&lt;/h2&gt;


The forecast can be given in a p. As the img seems to convey the same content, it’s correct to keep the alt attribute empty.

&lt;p&gt;clear sky&lt;/p&gt;
&lt;img src="clear-sky.png" alt="" height="60" width="60"&gt;


While you could use a list for the temperatures, I think three p elements are sufficient in this simple case.

&lt;p&gt;14 °C&lt;/p&gt;
&lt;p&gt;High: 20 °C&lt;/p&gt;
&lt;p&gt;Low: 6 °C&lt;/p&gt;


When using a label for the first temperature, too, I would go with a dl element instead:

&lt;dl&gt;
  &lt;dt&gt;Current&lt;/dt&gt; &lt;dd&gt;14 °C&lt;/dd&gt;
  &lt;dt&gt;High&lt;/dt&gt; &lt;dd&gt;20 °C&lt;/dd&gt;
  &lt;dt&gt;Low&lt;/dt&gt; &lt;dd&gt;6 °C&lt;/dd&gt;
&lt;/dl&gt;




So, an entry for a day could look like this:

&lt;section&gt;
  &lt;h2&gt;&lt;abbr title="Sunday"&gt;Sun&lt;/abbr&gt; &lt;time datetime="2017-12-31"&gt;Dec. 31&lt;/time&gt;&lt;/h2&gt;
  &lt;p&gt;clear sky&lt;/p&gt;
  &lt;img src="clear-sky.png" alt="" height="60" width="60"&gt;
  &lt;p&gt;14 °C&lt;/p&gt;
  &lt;p&gt;High: 20 °C&lt;/p&gt;
  &lt;p&gt;Low: 6 °C&lt;/p&gt;
&lt;/section&gt;


or with dl:

&lt;section&gt;
  &lt;h2&gt;&lt;abbr title="Sunday"&gt;Sun&lt;/abbr&gt; &lt;time datetime="2017-12-31"&gt;Dec. 31&lt;/time&gt;&lt;/h2&gt;
  &lt;p&gt;clear sky&lt;/p&gt;
  &lt;img src="clear-sky.png" alt="" height="60" width="60"&gt;
  &lt;dl&gt;
    &lt;dt&gt;Current&lt;/dt&gt; &lt;dd&gt;14 °C&lt;/dd&gt;
    &lt;dt&gt;High&lt;/dt&gt; &lt;dd&gt;20 °C&lt;/dd&gt;
    &lt;dt&gt;Low&lt;/dt&gt; &lt;dd&gt;6 °C&lt;/dd&gt;
  &lt;/dl&gt;
&lt;/section&gt;