HTML

HTML, stands for HyperText Markup Language. We use it to mark up different content in our website in order for the browser to understand and render the website; or even to be successfully found on search engines. It is used to create websites. The most recent version of HTML is HTML 5.

HTML is not a programming language it is a markup language.

Front page

A file containing the code for your frontpage must be named: index.html, otherwise the server will not recognize this as the landing page and will not display the website.

Comment

            
<!-- This is a comment -->

Boilerplate code

Boilerplate code refers to the default code necessary to generate something. In this case it is the minimum amount of code to generate a website.

            
<!-- Sets the document type as HTML 5 -->
<!DOCTYPE html>
<!-- Sets the language type as english -->
<html lang="en">
<!-- The head tag has useful information invisible to the user -->
<head>
    <!-- Meta tag sets the character set as UTF-8 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Makes the website responsive, meaning it resizes to fit certain devices -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- The title tag can be seen at the top of a tab -->
    <title>Document</title>
</head>
<!-- Body tag houses the actual content the user sees on the website -->
<body>
<!-- closes body tag -->
</body>
<!-- closes HTML tag -->
</html>

Link CSS files

            
<!-- link tag -->
<!-- href or hyper reference needs the file path of the stylesheet in the root folder -->
<!-- rel refers to the type of document linked -->
        <link rel="stylesheet" href="stylesheet.css" />

Website structure tags

Is written in the body tag. Improves the SEO of a website or Search Engine Optimization, meaning a website is now easier found be web crawlers form search engines.

            
<!-- Content sectioning -->
    <header></header>
    <section></section>
    <nav></nav>
    <footer></footer>
    <address></address>
    <aside></aside>
    <main></main>
    <section></section>
    <article></article>
<!-- Text content -->
    <blockquote></blockquote>
    <div></div>
    <figure></figure>
    <menu></menu>
<!-- Ordered list -->    
    <ol></ol>
<!-- Unordered list -->    
    <ul></ul>
<!-- List item -->    
    <li></li>

For more information visit the Mozilla developer page.

Text content

            
<!-- Different headers -->
<!-- There can only ever been one h1 tag -->
    <h1></h1>
<!-- Every other tag can be used multiple times -->    
    <h2></h2>
    <h3></h3>
    <h4></h4>
    <h5></h5>
    <h6></h6>
<!-- Paragraph tag -->
    <p></p>     
<!-- Underline text -->
    <u></u>
<!-- Italicize text -->
    <i></i>
<!-- put text in quotes -->  
    <q></q>
<!-- break tag breaks up a line of text --> 
    <br>        
<!-- horizontal rule draws a line across the canvas--> 
    <hr>

Links

            
<!-- anchor tag means a link -->
<!-- href or hyper reference houses the link which may include -->
<!-- file paths to a sub page or a external web link, or URL -->
    <a href="https://luxformel.info/index.html" >link text</a>
<!-- between the tag is the text to click on -->
    <a href="" target="">link text</a> 
<!-- target attribute is optional -->
<!-- _blank opens the link in a new tab -->
    <a href="rootfolder/index.html" target="_blank">link text</a>

Images

Images enrich content and must include an alt attribute for accessibility.

              
  <!-- Basic image tag -->
  <img src="/img/example.jpg" alt="Description of image"/>
  <!-- Responsive image with srcset -->
  <img src="/img/example-small.jpg"
       srcset="/img/example-small.jpg 480w, /img/example.jpg 1024w"
       sizes="(max-width: 600px) 480px, 1024px"
       alt="Example responsive image"/>

Tables

Use tables for tabular data. Add a caption and use header cells where appropriate.

              
  <table>
    <caption>Monthly sales (EUR)</caption>
    <thead>
      <tr><th>Month</th><th>Sales</th></tr>
    </thead>
    <tbody>
      <tr><td>January</td><td>1.200</td></tr>
      <tr><td>February</td><td>1.450</td></tr>
    </tbody>
  </table>

Forms

Forms collect user input. Always pair inputs with <label> for usability.

              
  <form action="/subscribe" method="post">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required/>
    <label for="plan">Plan:</label>
    <select id="plan" name="plan">
      <option value="free">Free</option>
      <option value="pro">Pro</option>
    </select>
    <button type="submit">Subscribe</button>
  </form>

Media: Audio & Video

Use native tags to embed audio and video with controls and fallback content.

              
  <audio controls>
    <source src="/media/song.mp3" type="audio/mpeg">
    Your browser does not support audio.
  </audio>

  <video controls width="640">
    <source src="/media/video.mp4" type="video/mp4">
    <p>Fallback: download the video <a href="/media/video.mp4">here</a>.</p>
  </video>

Meta tags & SEO

Meta tags help with search engines and social sharing. Put them in the <head>.

              
  <meta name="description" content="Short description for search results" />
  <meta name="robots" content="index, follow" />
  <meta property="og:title" content="Page title for social" />

Accessibility

Accessible sites reach more users. Use semantic elements, alt, proper labels and ARIA when necessary.

Provide meaningful alt text for images.
Use <label> with form controls.
Ensure sufficient color contrast in CSS (see `/css/main.css`).

Complete example

Small example combining several elements into a simple page:

              
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <meta name="description" content="Tiny example page"/>
    <title>Example</title>
  </head>
  <body>
    <header><h1>Welcome</h1></header>
    <main>
      <section>
        <h2>Picture</h2>
        <img src="/img/example.jpg" alt="Landscape"/>
      </section>
      <section>
        <h2>Subscribe</h2>
        <form><label>Email<input type="email"/></label></form>
      </section>
    </main>
    <footer>© Luxformel</footer>
  </body>
  </html>