HTML — A step-by-step walkthrough
What is HTML?
HTML is HyperText Markup Language and not a programming language. So what is the key difference between a markup language and a programming language? The main difference between markup language and programming language is that a markup language defines a set of rules for encoding documents in a format that is both human-readable and machine-readable while a programming language provides a set of commands and syntax that can be used to write computer programs which are understood by the computer. Basically, HTML consists of series of elements with opening and closing tags that might wrap the content and behave accordingly.
HTML Elements
An HTML element consists of an opening tag followed by the content followed by the closing tag.
<p> I am a sample content </p>- Opening Tag (<p>)
- Content (I am a sample content)
- Closing Tag (</p>)
An element can be nested within another HTML element and there can be any level of nestings. A typical HTML page might contain a root level <html> element that wraps the entire content of the webpage. <head> tag and <body> tag are child elements of <html> tag which itself consists of several child elements.
The HTML elements can be majorly categorized into two types, one is the Block-level elements and the other is Inline elements.
- Block-level Elements are the structural elements forming the visible block of a page that appears on a new line followed by its content. A block-level element can’t be nested within an inline element instead it can be nested within another block-level element. Few tags that fall under block-level elements are div, paragraph, headings, footer, lists, etc.
- Inline Elements are contained within the block-level elements which do not occupy the entire width of its parent but takes the width required for its content. These elements do not appear on a new line in the document. Few tags that fall under inline elements are span, em, a, strong, etc.
It’s not mandatory that every element in the HTML should have content within its opening and closing tags. Elements without content can exist and these elements are referred to as Empty elements. An example of an empty element is an image tag that might not have any content within it.
<img src = "https://cdn-images-1.medium.com/fit/c/64/64/1*ewXMUxmCEzHZ-uXuZoO62g.jpeg">HTML Attributes
An attribute specifies additional information about the HTML elements that are not visible in the content. Attributes are usually specified within an element separated by spaces between different attributes. Each attribute would contain the attribute name followed by an equal symbol followed by its corresponding value that is wrapped within double-quotes.
Example:
<p class=”paragraph”>I am a paragraph</p>In this example, we can see a paragraph element containing an attribute with a name as the class and its value as a paragraph wrapped with double-quotes. Here the class attribute can be used by the CSS as a query selector to format the styling of this paragraph element. Let's see some more examples of attributes with other elements.
<input type=”text” class=”username”/>Here the input element contains two attributes, the first one is the type attribute with value text and the second is the class attribute with value username each separated with space between them within the HTML input element. Also, never mix up single quotes and double quotes while you set an attribute value. Either it should be opened and closed with single quotes or with double-quotes.
Wrong way of setting an attribute with mixed up quotes
<input type=’text” />Right way of setting an attribute
<input type=”text” /> or <input type=’text’ />We also have a boolean attribute that would hold the boolean value which can also be represented even in shorthand notation within the HTML elements.
<input type=”text” disabled=”disabled”/>here we have a disabled attribute that disables the text box, preventing the user to type based on its value (true /false).
Same can be represented in short-hand as the following
<input type=”text” disabled/>If the disabled attribute is present within the element it's referred to as boolean true if the attribute is not specified it means disabled is false.
HTML Structure
Each individual HTML element does not give you any meaning to your web page until it's been combined together. Let us see the basic structure of the HTML web page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A step-by-step walkthrough of your first HTML page</title>
</head>
<body>
<p>This is my first HTML page</p>
</body>
</html>Notice: Each element in a new line doesn’t mean that there would be a huge space between them as HTML parser reduces each sequence of whitespace to a single space when rendering the code. The new lines & tab spaces are just added for better readability.
This is the basic structure of an HTML document, we will be having a detailed structure overview explaining all tags when and how they should be used as a separate topic later in another blog. For now, it's good to go line by line of this basic structure to understand it better.
<!DOCTYPE html>
DOCTYPE is actually not an HTML element instead it represents the information to the browser about what type of document to be expected. The older HTML declaration of the document type would be different from that of the latest one. <!DOCTYPE html> is the shortest string of characters that counts as a valid doctype.
HTML 4.0.1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">XHTML 1.1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">HTML 5<!DOCTYPE html>
2. <html>
HTML element wraps the entire elements also known as the root element of the HTML document in a web page.
3. <head>
The Head section is where we can find the information about the page that is crawled by the search engine bots over the internet. It also acts as a wrapper element for the external resources required for the document. Basically, the head tag contains some title, description, keywords, and other tags to import the external resources like <link><script><style>. Contents within this section are not visible to the viewers of the website.
4. <meta charset="utf-8">
Meta element with charset attribute specifies the character set UTF-8 for the document which includes human writable characters and the page can handle any textual content within it. We will look into more about meta tags and their added advantages to SEO (search engine optimizations) in later blogs.
5. <title>
The title element specifies the title for your web page that is visible on your browser’s tab. The same title will be used for saving the webpage in your bookmarks. Also, all search engine bots crawl the webpages and use this title to be displayed in their search results whenever a search keyword matches.
6. <body>
The body element contains all the contents of the webpage which is actually visible to the viewers of the website. This element might contain all types of content like text, images, audio, video, games, and another website within itself through iframes, etc.
we can see on some websites that the <script> the tag will be loaded within the body element and in some other websites those will be loaded within <head> element. so what is that difference?. Well, the answer to this question is just more about the priority of the script file. Suppose you have a script file without which you don’t want to display any content or basically your page requires that external resource to be loaded before the content gets rendered then we would need to add the script into <head> an element so that before the content in the body element gets rendered your script would be loaded and if we don’t want the rendering of the content to be blocked due to loading the external resources we could add the <script> tag just before closing the </body> tag.
HTML Comments
Comments are generally the notes for explaining your code or logic that are invisible to the viewers viewing your website as the browser ignores these comments. When someone new needs to do some changes to the code of your website, these comments would be helpful for understanding better. An HTML comment can be written by wrapping the content with the special markers <!-- and -->
<p>I'm not inside a comment</p>
<!-- <p>I am!</p> -->Here we have a list of points that one should know before writing the first HTML page.
- A HTML file will end with .html extension
- Add comments wherever necessary so when someone new sees your page would get clarity of sections and understand your page better.
- It's better to name the root file name as an index (index.html). It's not mandatory but it is the most convenient way I prefer for a better understanding of a project structure.
