HTML Basics Series: What Is HTML?

What is HTML?

HTML stands for HyperText Markup Language, it is a markup language used for webpages. HTML elements are represented by opening tags <> and closing tags </> these are the building blocks of HTML pages.

Which code editor should I use?

The most popular code editor to use is Visual Studio Code, but any other code editors such as Atom or Brackets or any other editor is fine as well, just make sure you have Emmet installed. For VS code Emmet is automatically installed. As for HTML, you do not need to install anything.

Extensions required

If you are using VS code as your editor download LiveSever to preview your website. For Brackets click on the lightning bolt on the right-hand side. For Atom atom-live-server.

Opening and Closing tags

<p>.png

The above picture shows the anatomy of an HTML element.

The opening tag: Consists of the element (p which means paragraph) which is wrapped in the opening (<) and closing brackets (>). This states where the paragraph starts.

The closing tag: Similar to the opening tag, except it, includes a forward slash (/) before the element name. Stating this is where the element ends or in this instance where the paragraph ends. Always remember to add the closing tag as this is a common mistake for beginner developers.

The content: This is the content of the element, in this case, is the "Hello World" is just text which you want to be displayed.

The element: The opening tag, the closing tag, and the content together comprise the element.

The structure of an HTML document

doctype.png

doctype.png This declaration is not an HTML tag. It is "information" to the browser about what document type to expect.

htmltag.png The HTML element wraps the entire content on the page and is also sometimes known as the root element.

head.png This element acts as a container for all the stuff you want on your HTML page but are not showing your page visitors. This includes things such as CSS to style your content, keywords and much much more.

utf8.png Sets the character set your document should use to UTF-8. This includes most characters and symbols from a vast majority of written languages. There is no reason not to set this and it can help avoid some problems later on.

title.png The title element sets the title of your page which is visible in the browser tab, it is also used to describe a page when you bookmark a page or add it to your favourites.

body.png Contains all the content that you want to show to the website visitors when they visit your website, whether that's text, images, videos, games, playable audio tracks, or anything else.

Conclusion

Here we have explained the basic outline of an HTML document, along with an explanation of every element. In the next article, we will talk about Headings, paragraphs, Bold, italic, emphasis, Structural and semantic markup.

No Comments Yet