# HTML structure for a wedding website using FullPage.js

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>

<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">

<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

<!--DELETE THIS
-->

<script src="https://use.fontawesome.com/d48bf56f4a.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,
controlArrows: false,
scrollOverflow: true
});
});
</script>

<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">
<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>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>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-->

<div class="slide">
<img src="img/couple.gif" alt="The Couple">
</div>
</div>

<div class="slide">
<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>

<div class="slide">
<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>

<div class="slide">
<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>>

<!--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">
<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">
<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">
<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>

<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
arrangements.</p>
</div>
</div>
</div>
</div>

<div class="slide">
<div class="faqs">
<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>

<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>

• Consider making a Stack Snippet as a live demo. (Press Ctrl-M in the question editor.) Jul 28 '16 at 0:10
• 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 Jul 28 '16 at 0:12
• @RomanVottner Thanks for that great tip! Didn't know about it but will read into it! Jul 29 '16 at 10:54
• 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? Sep 4 '16 at 18:10

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">


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,
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."
• 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 />.
– unor
Jul 28 '16 at 11:25
• @unor sorry not a closing tag but in HTML5 you practically don't need it. Thanks I will update my answer Jul 28 '16 at 11:37
• 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? Jul 29 '16 at 8:16
• 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? Jul 29 '16 at 8:59
• @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. Jul 29 '16 at 9:39

### 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.

• Thanks a lot unor! I'll work myself through this tonight Jul 28 '16 at 12:01
• Hello unor, I also implemented all your changes. Where should I use the time element? Jul 29 '16 at 8:54
• @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>
– unor
Jul 29 '16 at 15:42