HTML stands for HyperText Markup Language.
- HTML, while being the building block of the Web, is, by definition, not a programming language, but a markup language.
- A markup language is here to help you format a page and its content the way you want. It also provides some meaning/semantic to the different parts of a text in a document.
- HTML files are used to create the structure of a WebPage and to contain its content, like text, links, images. You can compare it to text files, with extra complexity.
- The hypertext part refers to the use of links/hyperlinks to connect/redirect to other web pages.
- Everything that looks pretty, or that you can interact with, is not being taken care of by HTML, but by CSS, a style sheet language, and Javascript, a programing language.
- As of 2022, there's a general consensus to use a standardized version of HTML, the 5th iteration of HTML, HTML5.
HTML has its own syntax.
- When you write HTML, you will need to understand that it uses a specific syntax.
- This syntax is based around opening and closing tags, which is defined as an element.
<openingtag> element </closingtag>
<p>Here is some text in a paragraph element.</p>
- HTML possesses a lot of different elements, some are used often and some are used in rare situations.
- Some tags are self-closing, like the
<img>tag.
Your first HTML page.
Creating an HTML file and rendering your first webpage is really easy.
- You need to create a file with any name you want, but not in a .txt format. You need to use the .html format.
- Then you write some text as you do in a text document.
When you open this HTML document in a Web browser, it will look like that:
That's why we are using HTML tags, to structure, organize and contain your content.
If you don't use any tags element, you won't be able to create a meaningful webpage.
When you write a word-text document, you use headings and paragraphs. You will do the same in HTML and give meaning and semantics to your structure with different specific tags.
The classic structure of an HTML file.
Without going into details, the basic structure is this one:
<html>
<head>
</head>
<body>
</body>
</html>
- html element tag that will contain all the other HTML elements.
<html>
</html>
- head element that will contain information about your website, but won't render on the page. It can give a title, a description, or create a link to another file.
<head>
</head>
- body element is what the user will see on the webpage, and require a specific structure to help developers work more efficiently.
<body>
</body>
The classic structure of the body element.
<body>
<header>
<nav>
</nav>
</header>
<main>
<article>
<h1>Some text</h1>
<p>Way more text</p>
</article>
</main>
<footer>
<nav></nav>
</footer>
</body>
- You will need a header element. The header will be there to introduce your content, it will contain a navigational link, a logo, a name, a search bar, and will usually be at the top of the page.
<header>
</header>
- You will need the main element. It will contain your main content and will be split into different sections if needed.
<main>
</main>
- You will need a section or article element to organize the structure of your content.
<article>
</article>
- You will add some headings, paragraphs, links, or images elements inside those sections/articles elements...
<article>
<h1>Here is the main header.</h1>
<p>Here you will write your paragraph and everything you have to say.</p>
</article>
- You will need a footer element that will usually be at the bottom of the page and could contain additional information, like the name of the author, the copyright, another navigational bar, or some link to your social media pages.
<footer>
</footer>
- The basic structure should look like that:
<html>
<head>
</head>
<body>
<header>
<nav>
</nav>
</header>
<main>
<article>
<h1>Some text</h1>
<p>Way more text</p>
</article>
</main>
<footer>
<nav></nav>
</footer>
</body>
</html>
There's a lot to tell and a lot to present about HTML, but what you must remember is:
- it is the building block of the web.
- it is a document, with a specific format.
- it is a markup language used to structure and format your content.
- it has its own syntax and semantics.
- it uses opening and closing tags to create elements.
Thanks for reading.
If you find any big mistakes in my post, please, let me know about it.
You can find me on twitter.
If you want to learn more about HTML, CSS, or Javascript, I recommend you to start with FreeCodeCamp, or to join the community 100Devs on discord.
For any questions or requests, don't hesitate to contact me.
In addition to various youtube videos, here are my principal sources:
Top comments (0)