Introduction

Try it yourself

You want to get into web development but you don’t know where to start ? HTML is the way. If you inspect any website, you will see HTML, no matter how the site is built, which stack it uses nor how it is host. You can write websites using python using framework such as django, you’ll use python but the result will be HTML once compiled. Don’t be afraid, i won’t go deep, it was just an example to prove you how basic and common HTML is. Something awesome to start with web development is that all you need is a text editor and a web browser. There a great chances that your computer was shipped with a default text editor and Web navigator likely being notepad and Microsoft Edge if you are on Windows. Create a new file wherever you want with the .html extension (you might need to toggle the extension visibility in your file explorer). Open the file with your text editor and with your navigator (simply click on “open with” to select an application). You will meet a white page, this means you are ready to go ! Don’t forget to save the file and refresh your page after each modification.

Tags principle

HTML is a tag based markup language which means that we use defined tags represented by the “less than” and “more than” symbols containing a short name. It looks like this :

<p>

This syntax opens a tag, some tags are self closed but the majority have to be closed by another tag, it looks like the opening tag but with a slash right after the “less than” symbol, let’s complete the above example :

<p></p>

And here is a self closing tag for instance :

<br/>

Your web browser will render the content of the HTML file but it will read the tags to know how to render it, for instance, the “p” tag right here represent a text paragraph. As it is empty, you won’t see it, we will add a small text.

<p>This is a paragraph</p>

Will be rendered like this :

This is a paragraph

You can find all the informations you need about HTML elements inside the tags folder where each element has it’s own page.

Attributes

Attributes are like parameters we pass to an element. There are universal attributes that are commons to each elements and attributes working only with a specific element. Attributes always goes inside the opening tag.

<a class="link" href="https://nebu.ovh">Link to nebu</a>

In this example, i used the class attribute which is, without any doubts, the most used attribute, it let us style all the elements with the same class the same way. Anyway i will detail the styling later on, in the CSS documentation. I also used the href attribute which is specific to the “a” element and let us give a link whether internal or external.

Nesting

Tags are nestable, in fact this is the concept, we nest tags inside other tags to build complex website

Basic setup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

This is a basic website setup given by emmet abreviations. Prepare yourself because we will detail this code snippet. Hopefully you can read this section later if needed.

<!DOCTYPE html>

This declaration defines the document type and version of HTML. In this case, it specifies that the document is HTML5. It helps the web browser to display the web page correctly by informing it of the markup language used in the page (HTML5).

<html lang="en">
</html>

This is the root element of an HTML page. The lang attribute specifies the language of the page’s content, which in this case is English (en). This helps search engines and browsers to present and process the content in the correct language.

<head>
</head>

The <head> element contains meta information about the document.

<meta charset="UTF-8">

The meta element here specifies the character encoding for the page. UTF-8 is a universal character set that includes almost all characters and symbols from all writing systems. This ensures that the text on the page is correctly interpreted by browsers.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This meta element sets the viewport settings for responsive design. The name attribute’s value is viewport, and the content attribute provides instructions to the browser about how to control the page’s dimensions and scaling. Here, width=device-width sets the width of the page to follow the screen-width of the device, and initial-scale=1.0 sets the initial zoom level when the page is first loaded by the browser.

<title>Document</title>

The <title> element specifies the title of the document, which is shown in the browser’s title bar or in the top of the window. This title appears whenever the user looks at the list of open pages or their history. Here, it’s set to “Document,” but in a real-world application, you would typically use a more descriptive and meaningful title.

<body>
</body>

The <body> section contains the content of the document, such as text, images, videos, etc., that will be visible to users.