HTML Basics - Webjar

HTML stands for Hyper Text Markup Language and is used as a standard markup language for creating Web pages. With HTML you can structure your webpages and add the content those pages need to become a great webpage.

Basic HTML document

Every HTML document starts with a basic structure to work as intended.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Hello World!</title>
    </head>
    <body>
        <h1>Hello World!</h1>
    </body>
</html>

Why do I need these different elements on my HTML page

<!DOCTYPE html>
A doctype is required for every HTML page. At the start of HTML in 1991 these were to set the document rules for HTML but these days they only make sure your page acts like a proper HTML page
<html></html>
The HTML tag wraps your entire HTML document in a root element.
<head></head>
The head tag is used as a container for all your code that is not used as content for your page. Things like keywords or CSS styling.
<meta charset="utf-8">
This element declares the character typing your page is built in. In most cases, this will be utf-8. Forgetting this element will result in problems when you start building more complex pages and websites.
<meta name="viewport" content="width=device-width">
This element will let your render know to shrink down this page for mobile devices. This does not make your website responsive but it makes sure that you can make your webpage responsive.
<title></title>
The title element is the title of your webpage. It differs from an H1 tag because it does not appear on your webpage. It shows on search engines and your browser’s tabs for example.
<body></body>
This tag is a container for all the content that will be shown on your website. Later in this blog, I will show you the most basic content elements you could use inside an HTML webpage.

Now that you know about a basic HTML structure and why you need the elements above you can move on to the fun part: Adding content to your webpage.

Structure your text

It is important to use the right tags for the right job to markup the text on your pages. Search engines will see and read the different tags, which will help your website with the right SEO. But for now, we will focus on the different text markup options available.

Headings

Headings and paragraphs are the most used tags in HTML as the title suggests these tags are used for the different headers and paragraphs.

There are 6 different headings “<h1> – <h6>” but most of the time you will only use the first 3 or 4.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Paragraphs and text styles

Not all text will be a heading or as important as a heading that is why there are paragraph tags as well there are indicated with a paragraph tag “”.

<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>

Some tags add text styles to your text the following tags will be used often:

This is bold text or This is also bold text
This I italic text or This is emphasized
This is marked text
<del>~~This is deleted text~~</del>
This is smaller text
_{This is a subscript}
_{^{This is a superscript}}

Lists

There are 2 types of list elements used in HTML pages to structure data in a list hence the name list item.

Ordered lists

Ordered lists ol display your data in the order indicated with numerals like 1.

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

Unordered lists

Unordered list ul by default show a list with bullet points instead of the numerals. This is used for a list without a specific order.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

How to add images

With an img tag, you can add images to your webpage to add images you need the following parts of the image tag. A source src is used to let the webpage know where the image is located in comparison to your webpage in the example below I have a folder on my desktop called “My first webpage” Inside this folder I created an “index.html” document with all the steps from above and the following image tag.

<img src="images/webjar_logo.png" alt="Webjar Logo" />

To make the webpage find this image I have to add the image file “webjar_logo.png” to a folder named “images” This folder is inside the folder called “My first webpage”. This is how my folder is structured to make my webpage find the right image.

The alt attribute inside the img tag is required to specify an alternate text for your images. this text will be displayed if the image can’t be found for some reason.

Links

A link is butter to your HTML bread. With links, you can set up menu structures to link to different pages, websites, or even content within the same page. Links are one of the reasons why webpages get interactive and they are very easy to setup.

<a href="https://google.com">Link to google</a>

The hypertext reference or href attribute is required and works similarly to the src attribute with images in this attribute you put the location you want to link to. Don’t forget to add the https:// part if you link outside of your website.

Conclusion

HTML is the basic layout and structure of all web pages on the internet but luckily it is very forgiving and easy to learn or set up as long as you use the right page structure and tags for your content.

Put it to the test

If we put it all of the earlier written HTML together we get this output in our browser.

You could try it yourself by copying and pasting the code below inside a text editor like sublime text, Visual Studio code, or Notepad++. Save this file as index.html and open it inside a browser.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Hello World!</title>
        
    </head>
    <body>
        <h1>Hello World!</h1>
        <p>This is your first HTML webpage</p>

        <h2>After this you could learn about</h2>
        <ul>
            <li>Advanced HTML</li>
            <li>Styling with CSS</li>
            <li>Interactive websites with Javascript</li>
        </ul>

        <img src="images/webjar_logo.png" alt="Webjar Logo" />

        <a href="https://google.com">Link to google</a>
        
    </body>
</html>