why html is a must for every website

What is HTML?

HTML is a term that implies HyperText Markup Language.

It is the language of the web, through which websites are built. It makes up the full foundation of any web application we encounter on the web.

HTML makes up the full foundation of any web application

HTML is required for structure and semantics. Where semantics gives meaning to the website.

HTML combines HyperText and Markups.

HTML combines HyperText and Markups

With the use of tags, HTML Hypertext defines the link between the web pages and markups define the text document in the tag that gives the structure of web pages.

HTML consists of a series of elements and these elements tell the browser how to display the content.

All common websites we see and interact with around us, from Google, IBM, Facebook, Twitter and the likes have strong HTML foundations.

google dev.png

ibm dev.png

Why HTML is important for websites

HTML is important because of the structure it provides for our applications.

After using HTML to create structure and meaning, we then go further to stylise our pages and websites. The structure HTML provides makes our work easier when we start styling.

Another importance is semantics. Semantics gives meaning to our websites. CSS is a language that is mainly used to style our pages and websites.

HTML semantics give inner and hidden meaning especially when screen readers are being used to communicate content on the websites or pages. for example, when we want to indicate that particular content is important and should be emphasised, we use the <strong> elements. Unlike using the CSS text property of bold.

Search engines will only read and understand the styling of the CSS as bold, but will not go further to comprehend that we wanted the content to be important. HTML <strong> element will automatically alert the search engine of the importance of the content.

HTML also allows images and objects to be embedded and can be used to create interactive forms.

Proper HTML Semantics

Using HTML required us to know how to execute its syntax.

Understanding how to execute HTML syntax helps us write proper and more organised codes.

HTML syntax always starts with opening tags. The opening tags are usually denoted with brackets <> :

< opening-tag > : this is an opening tag

And it usually ends with a proper corresponding closing tag, even though some of the existing elements are empty elements. The closing tag must possess the forward-slash </> :

</ closing-tag > : this is a closing tag

These syntaxes help us write and document proper HTML codes whenever we are using the language.

Common tags used in HTML

HTML is a language that uses elements, made up of tags.

Below we briefly discuss some of the most commonly used tags to get us started with HTML.

Most important is the <!DOCTYPE html> declaration. It defines the document as an HTML5 document.
Then the <html> element is the root element of an HTML page. All our codes must be embedded inside the tag.
The <head> element contains meta-information about the HTML page. Character encoding, and links to external resources like stylesheets for CSS
The <title> element specifies a title for the HTML page (it is shown in the browser's title bar).
The <body> element indicates the body of the document, and will contain all the visible contents of our page, such as headings, paragraphs, images, forms, hyperlinks, tables, lists, etc.
The <h1> element defines a large heading. It ranges from h1 to h6. Where h6 is the smallest of the headings.
The <p> element defines a paragraph.
 is used to write comments in our code. The content of the comments is not displayed on our web pages.

<!DOCTYPE html>

<html>

<!-- Head Section content -->
<head>

<!-- Page title -->
<title>My first web page</title>

</head>

 <!-- Body Section content -->
<body>

<!-- Used to display heading content -->
<h1>This is the largest heading</h1>

<!-- Used to display paragraph content-->

<p>Hello, HTML</p>

</body>

</html>

Empty tags

Empty tags are tags that do not require a closing tag.

The <hr /> element defines a thematic break in an HTML page. Called the horizontal rule
The <br /> element is used to insert a line break. Called the line break.
The <link /> element defines the relationship between the current document and an external resource.
The <img /> element is used to embed an image into the document.
The <meta> HTML element represents metadata i.e., information.
The <input> element is used to create interactive controls for web-based applications and forms, for accepting the information from the user.

Other Important Elements

The <em> element defines emphasized text.
The <blockquote> element defines a section that is quoted from another source.
The <sup> element defines superscripted content.
The <sub> element defines subscripted content.
The <a> element defines a hyperlink, that is used to link from one page to another. This works alongside the href attribute, which gives the link its direction.
The <ul> and <ol> are unordered and ordered lists respectively. They are the parent elements of the <li> element, which contains the items of a list.
The <div> element is used to divide pages into sections. It also acts as a container for HTML elements.
The <cite> element defines the title of a work by referencing its source.
The <span> element is an inline element container for inline elements and content.
The <nav> element represents the section of a page that provide navigation links, either within the current document or to other documents.
The <footer> element defines a footer for a document or section.

Don't forget to give a thumbs up and use the comment section if you have learned something new from this article.

You can follow me up on Twitter @_bench3D

You can also link up with me on LinkedIn Benedict Chima Ogbulachi

blog_bench3D