HTML Basics

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>