The HTML (Hypertext Makrup Language) is the standard markup language, which is the first building block needed for creating the structure and defining the layout of any website. And the first language a begginner should start learning before anything esle. HTML is not considered a programming language, as it does not allow creating any logic instructions to be executed by the web page, but a Markup Language. It’s intended to definde the basic structure and layout only, based on which more styling and decorating is built up using other languages, such as CSS, JavaScript, etc…
The following is an example of a very simple HTML webpage source code:
<!DOCTYPE html>
<html>
<head>
<title>Your Page Title</title>
</head>
<body>
<p>Hello Wold! This is the content of your web page...</p>
</body>
</html>As you might have noticed the HTML pages are created by writing HTML code which is rendered by the browser and then diaplays a user friendly font-end a more “aestetic” page with clean text and images, buttons, etc. The code is not shown to the end-user, unless if the user is some one with some technical skills, then they can view the source code of the page.
Now if, for any reason, you chose to create your website pages manually, you should wirte the HTML of your pages by hand line by line! That said, nowadays, many websites are created by ready made CMS, or using some WYSISWG software where the user doesn’t even have to know HTML but has just to know how to use the software, then the user defines the structure and feel-and-look of their page and the software takes care of generating the needed HTML code for the page.
Now let’s break down how HTML works…
As you might have noticed in the example above, the HTML source code is composed of some elements called “tags”, each of the tags has its own use and purpose, also some of the special HTML tags also have a specific emplacement.
HTML tags particularities
- The Document Type Declaration
In the older versions of HTML we had to introduce a longer and more complicated, and they had to carry a URL to the DTD (Document Type Definition). Like in version 4.01 the DOCTYPE was like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">Since the HTML5 was introduced, the DOCTYPE statment is much shorter and much easier to remember, and it is the one being widely used nowadays:
<!DOCTYPE html>- Starting and ending tags
Each tag in HTML language has a “starting” and “ending” tag, like this title tag example:
<title>Your Page Title</title>The starting HTML tags always start with the “<” sign then a keyword and ends with “>” sign: <title>
The ending HTML tags always start with the “<” sign then a keyword and ends with “/>” sign. Pay attention that the ending tag always carries a slash “/” before the ending “>” sign: </title>
- The html tags
The html tag are the very first tags an HTML document has to start with, and the last one to end with! As it indicates to the browser the starting and ending of the HTML document, like in the example above:
<!DOCTYPE html>
<html>
<head>
<title>Your Page Title</title>
</head>
<body>
<p>Hello Wold! This is the content of your web page...</p>
</body>
</html>- The head, title, and body tags
The head tags have to be placed right after the DOCTYPE declaration, it can contain some other tags that mostly read and used by the browsers and the Search Engine Robots, rather than by humans.
We always write the tags (let’s name them child tags) that we want to place inside other tags (let’s name them parent tags), between the starting tags and the ending tags of the parent tags, like in the following example, how we placed the title tags:
<head>
<title>Your Page Title</title>
</head>The title tags are used to define the Page Title, which is read by the browser, the SE robots, and also is visible to the user in the top browser tab:
The body tags are the tags thant enclose all the content of the web page, starting from the top down to the end of the page (header, navigation menu, central content, sidebar, footer, links, images, etc…).
<!DOCTYPE html>
<html>
<head>
<title>Your Page Title</title>
</head>
<body>
<p>Hello Wold! This is the content of your web page...</p>
</body>
</html>Now, arrived at this stage means that you have a good interes in learning HTML in a more indepth way. As the above was just a brief introduction to HTML, and some general information about HTML, however if you want to learn HTML in a more detailed way and and get yourself on the right way to be able to create your own professional site, subscribe to my Free Course HTML From A to Z which covres all the major fundamentals of HTML, and explains how to create fully funcional websites using HTML5.
Click Here to go to the Free Course HTML From A to Z