1
\$\begingroup\$

I am fairly new to coding and currently trying to write as much as I can get my hands on. I started off playing around with templates but now I've decided to go without and therefore I am sure there is plenty for me to improve.

I created the website with FullPage.js and perhaps someone could have a look at the code structure of the html and tell me how I'm doing. The CSS is a whole new book I guess.

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="x-ua-compatible" content="ie=edge">
 <title>Wedding of J&amp; S</title>
 <meta name="description" content="">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="apple-touch-icon" sizes="57x57" href="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script src="js/vendors/jquery.easings.min.js"></script>
 <script type="text/javascript" src="js/vendors/scrolloverflow.min.js"></script>
 <script type="text/javascript" src="js/jquery.fullPage.js"></script>
 <script src="js/mailer.js"></script>
 <!--initialise fullPage.js-->
 <script type="text/javascript">
 $(document).ready(function() {
 $('#fullpage').fullpage({
 sectionsColor: ['#79BD8D', 'whitesmoke', 'whitesmoke', 'whitesmoke', 'whitesmoke'],
 css3: true,
 loopHorizontal: false,
 slidesNavigation: true,
 navigation: true,
 controlArrows: false,
 scrollOverflow: true
 });
 });
 </script>
 </head>
 <body>
 <div id="fullpage">
 <!--Start of: HOME-->
 <div class="section" id="home">
 <div id="logo">
 <img src="img/logo_wht.png" alt="2 Lobsters Logo">
 </div>
 <div class="textfield">
 <div class="seperator"> we're getting married! </div>
 <h1 style="font-size: 3em;">J &amp; S</h1>
 <div class="seperator"> 15 Sep 17 | P </div>
 </div>
 </div><!--End of: HOME-->
 <!--Start of: CALENDAR-->
 <div class="section" id="calendar">
 <!--START of: CALENDER DISPLAY-->
 <div class="slide">
 <h1>save the date</h1>
 <br>
 <div class="cal-display">
 <div class="cal-display-top-bar">
 <i class="fa fa-minus-circle fa-2x" aria-hidden="true"></i>
 <i class="fa fa-minus-circle fa-2x" aria-hidden="true"></i>
 </div>
 <!--calender columns-->
 <div class="cal-col">
 <!--first column-->
 <div id="cal-months" class="col-1">
 <div id="cal-jul" class="cal-month">
 <table id="month-jul">
 <col span="5">
 <col span="2" style="background-color: rgba(220,78,79,0.2);">
 <tr>
 <th colspan="7" style="text-transform: uppercase">July 2017</th>
 </tr>
 <tr>
 <th>Mon</th>
 <th>Tue</th>
 <th>Wed</th>
 <th>Thu</th>
 <th>Fri</th>
 <th>Sat</th>
 <th>Sun</th>
 </tr>
 <tr>
 <td>26</td>
 <td>27</td>
 <td>28</td>
 <td>29</td>
 <td>30</td>
 <td>1</td>
 <td>2</td>
 </tr>
 <tr>
 <td>3</td>
 <td>4</td>
 <td>5</td>
 <td>6</td>
 <td>7</td>
 <td>8</td>
 <td>9</td>
 </tr>
 <tr>
 <td>10</td>
 <td>11</td>
 <td>12</td>
 <td>13</td>
 <td>14</td>
 <td>15</td>
 <td>16</td>
 </tr>
 <tr>
 <td>17</td>
 <td>18</td>
 <td>19</td>
 <td>20</td>
 <td>21</td>
 <td>22</td>
 <td>23</td>
 </tr>
 <tr>
 <td>24</td>
 <td>25</td>
 <td>26</td>
 <td>27</td>
 <td>28</td>
 <td>29</td>
 <td>30</td>
 </tr>
 <tr>
 <td>31</td>
 <td>1</td>
 <td>2</td>
 <td>3</td>
 <td>4</td>
 <td>5</td>
 <td>6</td>
 </tr>
 </table>
 </div>
 <div id="cal-sep">
 <table id="month-aug" class="cal-month">
 <col span="5">
 <col span="2" style="background-color: rgba(220,78,79,0.2);">
 <tr>
 <th colspan="7" style="text-transform: uppercase">August 2017</th>
 </tr>
 <tr>
 <th>Mon</th>
 <th>Tue</th>
 <th>Wed</th>
 <th>Thu</th>
 <th>Fri</th>
 <th>Sat</th>
 <th>Sun</th>
 </tr>
 <tr>
 <td>31</td>
 <td>1</td>
 <td>2</td>
 <td>3</td>
 <td>4</td>
 <td style="background-color: #DC4E4F; color: #fff; font-weight: bold;">5</td>
 <td>6</td>
 </tr>
 <tr>
 <td>7</td>
 <td>8</td>
 <td>9</td>
 <td>10</td>
 <td>11</td>
 <td>12</td>
 <td>13</td>
 </tr>
 <tr>
 <td>14</td>
 <td>15</td>
 <td>16</td>
 <td>17</td>
 <td>18</td>
 <td>19</td>
 <td>20</td>
 </tr>
 <tr>
 <td>21</td>
 <td>22</td>
 <td>23</td>
 <td>24</td>
 <td>25</td>
 <td>26</td>
 <td>27</td>
 </tr>
 <tr>
 <td>28</td>
 <td>29</td>
 <td>30</td>
 <td>31</td>
 <td>1</td>
 <td>2</td>
 <td>3</td>
 </tr>
 </table>
 </div>
 <div id="cal-aug">
 <table id="month-sep" class="cal-month">
 <col span="5">
 <col span="2" style="background-color: rgba(220,78,79,0.2);">
 <tr>
 <th colspan="7" style="text-transform: uppercase">September 2017</th>
 </tr>
 <tr>
 <th>Mon</th>
 <th>Tue</th>
 <th>Wed</th>
 <th>Thu</th>
 <th>Fri</th>
 <th>Sat</th>
 <th>Sun</th>
 </tr>
 <tr>
 <td>28</td>
 <td>29</td>
 <td>30</td>
 <td>31</td>
 <td>1</td>
 <td>2</td>
 <td>3</td>
 </tr>
 <tr>
 <td>4</td>
 <td>5</td>
 <td>6</td>
 <td>7</td>
 <td>8</td>
 <td>9</td>
 <td>10</td>
 </tr>
 <tr>
 <td>11</td>
 <td>12</td>
 <td>13</td>
 <td>14</td>
 <td>15</td>
 <td>16</td>
 <td>17</td>
 </tr>
 <tr>
 <td>18</td>
 <td>19</td>
 <td>20</td>
 <td>21</td>
 <td>22</td>
 <td>23</td>
 <td>24</td>
 </tr>
 <tr>
 <td>25</td>
 <td>26</td>
 <td>27</td>
 <td>28</td>
 <td>29</td>
 <td>30</td>
 <td>1</td>
 </tr>
 </table>
 </div>
 </div>
 <!--end of first column-->
 <!--second column-->
 <div class="col-2">
 <div class="cal-display-main">
 <div class="cal-display-main-header">
 <p><span style="font-weight: bold">05</span> | August</p>
 <p style="font-size: 1.5em">2017</p>
 </div>
 <div class="cal-display-main-content">
 <div style="font-size: 7em">5</div>
 <div>Saturday</div>
 </div>
 </div>
 <div id="cal-details">
 <div class="cal-detail">
 <div class="cal-details-time">
 15:00
 </div>
 <div class="cal-details-location">
 <h4>Office</h4>
 <p>Address</p>
 <p>D-ZIP P</p>
 </div>
 </div>
 <div class="cal-detail">
 <div class="cal-details-time">
 17:00
 </div>
 <div class="cal-details-location">
 <h4>Restaurant</h4>
 <p>Adress</p>
 <p>D-ZIP P</p>
 </div>
 </div>
 </div>
 </div>
 <!--end of second column-->
 </div>
 </div>
 </div>
 <div class="slide">
 <h1>Standesamt P</h1>
 <br>
 <div class="cal-display">
 <div class="location">
 <img src="img/rathaus.jpg" alt="P - Town Hall">
 <p>
 We cordially invite you to share in the joy when we exchange marriage 
 vows and begin our new life together.<br>
 Located in the historic town hall is what some claim to be Germany's 
 most beautiful registry office. We chose this location to get married, 
 because P is the town where we first met and spent several of our best 
 years together.
 </p>
 </div> 
 </div>
 </div>
 <div class="slide">
 <h1>Das Restaurant</h1>
 <br>
 <div class="cal-display">
 <div class="location fp-auto-height">
 <img class="wide" src="img/Restaurant.jpg" alt="Das Restaurant - Restaurant">
 <p>
 We will continue with the reception where we will have perhaps the best 
 view over all of P, at Das Restaurant. <br>
 From here we will be overlooking the three rivers and historic old town
 and enjoy the company of friends and family alongside great food, drinks
 and music. Don't forget to bring your dancing shoes!
 </p>
 </div> 
 </div>
 </div>
 </div>
 <!--End of: CALENDAR-->
 <!--Start of: ABOUT US-->
 <div class="section" id="about-us">
 <!--ABOUT US SLIDE 1-->
 <div class="slide">
 <div class="about-couple">
 <h1>About us</h1>
 <img src="img/couple.gif" alt="The Couple">
 <p>slide to read more...</p>
 </div>
 </div>
 <!--ABOUT US SLIDE 2-->
 <div class="slide">
 <div class="about-couple">
 <h1>J Odebrecht</h1>
 <div class="bio">
 <img src="img/couple.jpg" alt="J Odebrecht">
 <p>J was born in Delaware and raised in Hongkong in Germany. She studied in P and now works as a controller.<br>
 When J is not at work she likes to spend time in the mountains, read or knit.</p>
 </div>
 </div>
 </div>
 <!--ABOUT US SLIDE 3-->
 <div class="slide">
 <div class="about-couple couple-details">
 <h1>S Kazi</h1>
 <div class="bio">
 <img src="img/couple.jpg" alt="S Kazi">
 <p>S was born in Newtown and raised in Washington, Tokyo and Berlin. He also 
 studied in P and now works as a headhunter at his own company.<br>When S is 
 not at work he spends most of his time behind his laptop or tablet, cooking 
 or trailing J in the mountains.</p>
 </div>
 </div>
 </div>
 <!--ABOUT US SLIDE 4-->
 <div class="slide">
 <div class="about-couple couple-details">
 <h1>Our story</h1>
 <div class="bio">
 <p>We met in P during our second semester and started dating soon after on 25 June 2009.
 After a little over 6 months we both decided to put the relationship to the test and 
 went abroad. Upon returning to P we moved in together.<br>
 In Sep 2012 we moved to Munich where we live and work today.<br>
 On 25 June 2016 we finally got engaged and we intended to get married on the same date one 
 year later, which didn't work out <i class="fa fa-smile-o" aria-hidden="true"></i></p>
 </div>
 </div>
 </div>
 </div>>
 <!--End of: ABOUT US-->
 <!--Start of: RSVP-->
 <div class="section" id="rsvp">
 <h1 style="margin-top: 1em;">Will you attend?</h1>
 <form id="ajax-contact" method="post" action="mailer.php">
 <div class="field">
 <label for="name">Your Names</label>
 <input type="text" id="name" name="name" required>
 </div>
 <div class="field">
 <label for="pax">How many persons?</label>
 <select name="pax" required>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
 <option value="5">5</option>
 <option value="6">6</option>
 <option value="7">7</option>
 <option value="8">8</option>
 <option value="9">9</option>
 </select>
 </div>
 <div class="field">
 <label for="email">Email:</label>
 <input type="email" id="email" name="email" required>
 </div>
 <div class="field">
 <label for="message">Where to expect you</label>
 <select name="message" required>
 <option value="ceremony">Ceremony</option>
 <option value="reception">Rececption</option>
 <option value="both">Both</option>
 </select>
 </div>
 <div class="field">
 <button type="submit">Send</button>
 </div>
 </form>
 <div id="form-messages"></div>
 </div>
 <!--End of: RSVP-->
 <!--Start of: FAQ-->
 <div class="section" id="faq">
 <div class="slide">
 <div class="faqs">
 <div class="heading">
 <h1>Questions &amp; Answers</h1>
 <h2>general questions</h2>
 </div>
 <div>
 <button class="accordion">Why 2 Lobsters?</button>
 <div class="panel">
 <p>Anyone who has followed the sitcom Friends should recall the scene
 from episode 14 of the second season, which ends with Phoebe exclaiming,
 that Ross is Rachel's Lobster. As Friends is our favourite TV show of all
 times, we chose this.</p>
 </div>
 <button class="accordion">Why this location?</button>
 <div class="panel">
 <p>P is the place we first met and also the town where we spent several
 of our best years. Das Restaurant was renovated and opened some years ago and upon
 visiting for the first time, S immediately said "This is where we'll get married!".
 You'll see why.</p>
 </div>
 <button class="accordion">Why now?</button>
 <div class="panel">
 <p>Why not?</p>
 </div>
 </div>
 </div>
 </div>
 <div class="slide"> 
 <div class="faqs">
 <div class="heading">
 <h1>Questions &amp; Answers</h1>
 <h2>travel &amp; accommodation</h2>
 </div>
 <div>
 <button class="accordion">What are the best means of transportation?</button>
 <div class="panel">
 <p>The most convenient is probably to rent a car, which can be done via 
 <a href="http://www.europcar.com" alt="Europcar" target="_blank">Europcar</a>, 
 <a href="http://www.sixt.com" alt="Sixt" target="_blank">Sixt</a>, 
 <a href="http://www.avis.com" alt="Avis" target="_blank">Avis</a> 
 and others that are well known. However we recommend 
 <a href="http://www.enterprise.com" alt="Enterprise" target="_blank">Enterprise</a> 
 or even better <a href="http://www.swing-autovermietung.de/" alt="Swing" target="_blank">Swing</a>, 
 as they offer excellent prices and are available in Munich.</p>
 <p>Another option is to travel by train, which is will cost you around 22 Euros via BayernTicket and
 can be recommended if you come from Munich and do not mind spending some time on the train.
 If you want to travel fast, pick the ICE, which is around 50% faster but will cost more than double.</p>
 </div>
 <button class="accordion">What about accommodation?</button>
 <div class="panel">
 <p>P offers hotels and hostels for different budgets. Please stay tuned, as we arrange for group prices.
 You should be looking to spend betwenn 30-100 Euros per night per double bed rooms.</p>
 </div>
 <button class="accordion">Barrier free travel</button>
 <div class="panel">
 <p>Das Restaurant has barrier free access to the restaurant itself as well as to the lavatories. Basically, 
 everything is easily accessible whether you are in a wheelchair or pushing a baby carriage. We even have parking 
 right outside the restaurant, if you do not want to walk too far.</p>
 </div>
 <button class="accordion">Let us help!</button>
 <div class="panel">
 <p>We have traveled to and from P a lot. Hence we know our way around and can probably give you some
 time and money saving insights. If you ask us, we'll be more than happy to help you with your travel and accommodation 
 arrangements.</p>
 </div>
 </div>
 </div>
 </div>
 <div class="slide">
 <div class="faqs">
 <div class="heading">
 <h1>Questions &amp; Answers</h1>
 <h2>Formalities</h2>
 </div>
 <div>
 <button class="accordion">Dress code</button>
 <div class="panel">
 <p>No white ties, no black ties. If you like: no ties. We will try to keep things as informal as
 possible. So whatever you feel comfortable wearing to a nice restaurant, should be great. Please keep
 in mind, that it might get hot (30° C) and there is no air conditioning but a light breeze.</p>
 <p>Also: Don't forget your dancing shoes!</p>
 </div>
 <button class="accordion">Different diets</button>
 <div class="panel">
 <p>As we will be a culturally diverse bunch we have made arrangements for all sorts of diets. 
 Whether you like kosher, halaal, vegetarian or gluten- or lactose-free we will have you covered.</p>
 </div>
 <button class="accordion">Gifts &amp; presents</button>
 <div class="panel">
 <p>Your presence at our wedding is all that we wish for. However, if you want to give a gift, we will be grateful 
 for a cash donation towards our honeymoon trip.</p>
 </div>
 </div>
 </div>
 </div>
 </div>
 <!--End of: FAQ-->
 </div>
 <script>
 var acc = document.getElementsByClassName("accordion");
 var i;
 for (i = 0; i < acc.length; i++) {
 acc[i].onclick = function(){
 this.classList.toggle("active");
 this.nextElementSibling.classList.toggle("show");
 }
 }
 </script>
 </body>
</html>
chicks
2,8593 gold badges18 silver badges30 bronze badges
asked Jul 27, 2016 at 18:11
\$\endgroup\$
4
  • \$\begingroup\$ Consider making a Stack Snippet as a live demo. (Press Ctrl-M in the question editor.) \$\endgroup\$ Commented Jul 28, 2016 at 0:10
  • \$\begingroup\$ From a first look you could include some semantic descriptions like schema.org or open graph. If you don't need semantically annotated tags or meta data, you at least should use HTML5 <article> tag to specify the main content so search hits may be more precise \$\endgroup\$ Commented Jul 28, 2016 at 0:12
  • \$\begingroup\$ @RomanVottner Thanks for that great tip! Didn't know about it but will read into it! \$\endgroup\$ Commented Jul 29, 2016 at 10:54
  • \$\begingroup\$ Hi all, I came up with a new question. The above layout really isn't all that great for desktop browsers. How would I go about if I wanted to put the content of several slides (e.g. the "about us" section) onto one slide if the screensize exceeds 768px? \$\endgroup\$ Commented Sep 4, 2016 at 18:10

2 Answers 2

2
\$\begingroup\$

Just passing by, few things I have to say :

  • All meta elements should be placed together to avoid clutter e.g

    <meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

    To be honest, you don't need indentation with the meta elements.

  • Same with your link elements

    <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link href="https://fonts.googleapis.com/css?family=Josefin+Slab|Pacifico" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css" />
<link rel="stylesheet" type="text/css" href="css/main.css">

    Note : link element doesn't have a self closing
    <link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css" />
    should be
    <link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css">

  • For clarity, it's best to have all your javascript in either the head or body tags. so we can refactor those functions and place your script tag before the <body/> since your <head> is pretty busy at the moment.

    <script type="text/javascript">
 $(document).ready(function() {
 $('#fullpage').fullpage({
 sectionsColor: ['#79BD8D', 'whitesmoke', 'whitesmoke', 'whitesmoke', 'whitesmoke'],
 css3: true,
 loopHorizontal: false,
 slidesNavigation: true,
 navigation: true,
 controlArrows: false,
 scrollOverflow: true
 });
 });
 var acc = document.getElementsByClassName("accordion");
 var i;
 for (i = 0; i < acc.length; i++) {
 acc[i].onclick = function(){
 this.classList.toggle("active");
 this.nextElementSibling.classList.toggle("show");
 }
 }
 </script>

  • DRY (Don't Repeat Yourself): for instance, you have defined more than one column to have the same type of background Colour e.g

    <col span="2" style="background-color: rgba(220,78,79,0.2);">
<th colspan="7" style="text-transform: uppercase">

    You might as well create a css file and have one generalised style for those elements.

  • In as much as defining inline CSS for your divs and your table because it's easy to do so, I would suggest using an external stylesheet for your css to make it clearly and your HTML light weighted

  • Rather than having a lot of nested divs been used to convey the information of a section e.g <div class="section" id="calendar"> you should consider using <section>. Note: The difference between section and div is section is a semantic element that defines a section in a document. According to w3c's HTML5 documentation: "A section is a thematic grouping of content, typically with a heading."
200_success
145k22 gold badges190 silver badges478 bronze badges
answered Jul 28, 2016 at 0:09
\$\endgroup\$
6
  • \$\begingroup\$ Note that it’s perfectly fine to use <link /> (this is not a closing tag, but self-closing) instead of <link>. In HTML5 you have the choice, in XHTML5 you have to use <link />. \$\endgroup\$ Commented Jul 28, 2016 at 11:25
  • \$\begingroup\$ @unor sorry not a closing tag but in HTML5 you practically don't need it. Thanks I will update my answer \$\endgroup\$ Commented Jul 28, 2016 at 11:37
  • \$\begingroup\$ Hi, I've implemented all your changes so far. As for your last point with the nested <div>s. The class "section" was defined by fullPage.js which is why I used it. Is that okay then? \$\endgroup\$ Commented Jul 29, 2016 at 8:16
  • \$\begingroup\$ Another question I have. Even if fullpage.js does not want sections but rathers divs. If I was not using it: should I nest sections or use sections and divs within. Really when do I use sections and when divs? \$\endgroup\$ Commented Jul 29, 2016 at 8:59
  • \$\begingroup\$ @5h3z4n To be honest, both of them are used for thematic grouping of elements but a section is more suited if you want to have a heading(h1-h6) . You can also have chapters, articles(<article> and footers<footer> in a section. I noticed you tried to achieve that with nested divs . I hope this helps. \$\endgroup\$ Commented Jul 29, 2016 at 9:39
1
\$\begingroup\$

alt for your logo

<img src="img/logo_wht.png" alt="2 Lobsters Logo">

You should not use the term "Logo" in your alt value. For users that can’t perceive the image, it’s not relevant that it acts as a logo, it’s relevant what it represents. So if the logo stands for "2 Lobsters", simply use alt="2 Lobsters".

Don’t use style attributes

<h1 style="font-size: 3em;">J &amp; S</h1>
<col span="2" style="background-color: rgba(220,78,79,0.2);">
<th colspan="7" style="text-transform: uppercase">July 2017</th>

...

Special cases aside, it’s better to add all your styles in your CSS document. If you want to change the style, it’s better to just have to change your CSS document instead of having to look into both, your HTML and your CSS.

br is only for meaningful line breaks

<h1>save the date</h1>
<br>

The br element must only be used for meaningful line breaks (e.g., in addresses or in poems). If you need some space after the h1, use CSS instead (e.g., add a class to the h1 and use this class to add margin-bottom in your CSS).

span instead of i for font icons

<i class="fa fa-minus-circle fa-2x" aria-hidden="true"></i>

...

The i element has a meaning, and this meaning doesn’t cover font icons (details). Use the meaningless span element instead.

time element

For dates and times, you may want to use the time element.

Headings (h1-h6)

You are mostly using h1 and some h4. You should not do it like this. I don’t know FullPage.js, so I can’t say anything about its specifics (regarding using h1 all the time), but if you have a h1, the next lower heading should always be a h2, not a h4.

answered Jul 28, 2016 at 11:41
\$\endgroup\$
3
  • \$\begingroup\$ Thanks a lot unor! I'll work myself through this tonight \$\endgroup\$ Commented Jul 28, 2016 at 12:01
  • \$\begingroup\$ Hello unor, I also implemented all your changes. Where should I use the time element? \$\endgroup\$ Commented Jul 29, 2016 at 8:54
  • \$\begingroup\$ @5h3z4n: You can use time whenever you have a time, a date, a duration. See the list of "datetime" values. If the required format is not the same one you use on your page, you can use the datetime attribute, e.g.: <time datetime="2016年06月25日">25 June 2016</time> \$\endgroup\$ Commented Jul 29, 2016 at 15:42

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.