If a website is a house, HTML will be the bricks, cement and other materials that made up the building. HTML stands for HyperText Markup Language.
Hypertext or Hyperlink means texts that contains links leading to other texts. Markup Language is similar to punctuation marks in English. It shows the part a particular word or groups of word are playing.
Here is to explain HTML and what it entails. This article discuss important concepts of HTML and explains HTML elements, attributes and boilerplate. By the end of this article, you will understand the importance of HTML. You will get to know the invaluable role it plays in building a strong foundation for web projects.
Without further ado, let's get started.
Hypertext Markup Language : A Closer Look
HTML is a markup language. Unlike programming languages, Markup languages are mainly for description and structuring. HTML is the standard markup language for creating and structuring web content.
Tim Berner-Lee developed HTML in 1991. Why?
The goal was to facilitate the sharing and retrieval of scientific information among researchers. This invention laid the groundwork for structuring documents using simple tags like <head>, <title>, <h1>, <p> e.t.c.
Ever since then, HTML hasn't stopped evolving. The latest version - HTML5- presents a major leap in web technology with the introduction of semantic elements. The introduction of semantic elements enables developers to create semantic and more structurally meaningful document. The introduction of Canvas element and and the embracement of responsive design crowned it all.
The ongoing development of HTML5 involves a living standard with continuous updates and improvements.
HTML plays a pivotal role in defining the structure and layout of web pages. It ensures seamless information display across various browsers. This makes HTML a foundational skill for every web developer. HTML continues to be a cornerstone technology in the ever-evolving landscape of the world wide web.
Writing HTML Code : The Prerequisite.
To write HTML code, all you need is a Text editor. Text editors are software applications used for creating and editing plain text files. A text file is just like a container in which you write and save your code. Text files are similar to where you save your videos and audios on your smartphones.
The commonly used text editors include:
Notepad (Windows).
TextEdit (MacOS).
Visual Studio (VS) code.
Sublime text.
Atom.
Notepad ++ (Windows).
Vim and Emacs.
Bracket.
Ready to write some code ?
To start coding in HTML, follow these steps:
Create a text file.
Save the text file with a name ending in .html e,g yourfilename.html. File name shouldn't contain any space.
Open the file with your text editor and start writing your code.
HTML Elements : The Building Blocks of Web Documents.
HTML elements are components in which you enclose different part of the web content. They make the content enclosed within them to appear or behave a certain way on the browser. They can be used to italicize or embolden words, make words bigger, create hyperlink and so on. HTML elements are building blocks of the web document. They tell the browser where each part of the content belongs. For example, taking the below texts as a use case:
"HTML is a markup language."
We can tell the browser that the sentence above is a paragraph by enclosing it in a paragraph element.
When the code above is previewed on the browser, it will be displayed like this;
The opening and closing tags won't be rendered. They are just there to tell the browser that the content should be displayed as a paragraph.
Anatomy of an HTML Element
An HTML element is made up of three main parts:
- The opening Tag: HTML elements usually begin with an opening tag. The opening tag is made up of the symbol of the element, enclosed in two angle brackets.
<elementName>
The first letter(s) of the name of the element is usually made its symbol. The opening tag for the paragraph element is
<p>.
The content: This is the actual information or media enclosed between the opening and closing tags. It is the part of the element that is rendered by the browser. The content in the element above is HTML is a markup language.
The closing Tag: The closing tag looks similar to the opening tag. The only difference between the two is a forward slash (/). The forward slash is present in the closing tag between the opening angle bracket and the element's symbol. The closing tag for the paragraph element is
</p>.
The opening tag, together with the content and the closing tag forms the element. HTML5, the latest version of HTML include over 100 elements. Each of the elements plays a different role in defining the structure and content of a web page. Few examples of common HTML elements and their uses are:
Text Elements:
<p>: To create paragraphs.<h1>,<h2>, ...,<h6>: To create headings.<strong>: To embolden texts.<em>: To emphasize and change text-font to italic.<span>: To create an inline container for styling texts.
Links and Navigation:
<a>: To creates hyperlinks.<nav>: For navigation section.
Lists:
<ul>: To create an unordered list.<ol>: To create an Ordered list.<li>: To create list item.
Images:
<img>: To insert an image.
Tables:
<table>: To defines a table.<tr>: To define a table row.<td>: To define a table data/cell.
Forms:
<form>: To create a form container.<input>,<select>,<textarea>: To create form elements.
Semantic Elements (HTML5):
<header>,<footer>,<article>,<section>: Add semantic meaning to content<figure>,<figcaption>: For images and captions<main>: For representing the main content of the document.
Media Elements:
<audio>: To embed audio content.<video>: To embed video content.
Document Structure:
<html>: Root element.<head>: Contains meta-information about the document.<body>: Contains the document's content.
Scripting:
<script>: To embed or references external scripts.
The MDN docs contain everything you need to know about HTML elements.
HTML Attribute
HTML elements can also have attributes. Attributes provide additional information about HTML elements and helps define their behavior and appearance. They can also be used to target and style HTML elements. Attributes are always included in the opening tag of an HTML element. They are written as name\=value pairs.
The attribute name is followed by an equal sign (=) . The attribute value is enclosed in a single or double quotation mark. The example below shows the basic structure of an HTML element with an attribute;
Some attributes have no value, e.g required. Examples of common HTML attributes are src, alt, href, style and so on. Understanding how to use attributes effectively is fundamental to building well-structured and interactive web pages.
Void Elements.
Void elements are elements without content. They are usually made up of a tag and attribute(s). A good example is the <img> element.
<img src="images/favicon.png" alt="a cute cat"/>
The element above contains two attributes. It has neither a closing tag nor content. This is because the primary function of an <img\> element is to embed image(s) in your HTML page. It doesn't need any content to achieve this. All it needs is the link to the image and links are added as a values to attributes.
Nesting and Indentation : Arranging HTML Elements in Order.
Nesting is the act of inserting an HTML element inside another element. Indentation is the act of aligning HTML codes , so as to make it readable and understandable to another person. The example below shows how elements are nested and indented in HTML.
The HTML5 Boilerplate: Anatomy of an HTML Document.
Consider a website as a letter, and HTML5 Boilerplate will be the layout or design. It will show the space meant for the address, salutation, body of the letter and complementary close.
HTML5 Boilerplate is a layout showing the skeleton of the website. It is a standardized template or starting point for creating HTML documents. HTML5 boilerplate is designed to provide a solid foundation and best practices for web development projects. It includes a set of files, folders, and configurations. Its content aim to optimize performance, ensure cross-browser compatibility, and establish a consistent structure.
Here is a typical HTML5 boilerplate structure:
Let's break down the key components of the HTML boilerplate:
Document Type Declaration (DOCTYPE): The boilerplate starts with the DOCTYPE declaration. This tells the browser the HTML version and document type contained in the website. The
<DOCTYPE!>is used to tell the browser that the code is written in HTML5.Root
<html>Element: The<html>element serves as the root of the HTML document. It typically includes thelangattribute to specify the language of the document. It houses the<head>and the<body>sections.<head>Section: This contains the part of your website that ensures compatibility with browsers. Its contents are not visible to the users. The<head>Section contains metadata and links to external resources.
Below are the function of each of the meta tags:
<meta charset="UTF-8">: Ensures the correct display of the characters we are using on a webpage.<meta http-equiv="X-UA-Compatible" content="IE=edge">: Keeps your website compatible with internet explorer.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Tells the browser how the website should be displayed when it first opens.
<body>Element: This contains the actual content of the HTML document. It's where you include your text, images, links, and other elements.
The HTML5 Boilerplate is designed to be a starting point that developers can customize based on their specific project requirements. You can have the HTML5 boilerplate simply by "ENTERing" "!" into VS code, i.e (! + ENTER). You can equally download it from the [official website] (https://html5boilerplate.com/).
HTML Unveiled: Key Takeaways
HTML is a markup language used for creating and structuring web content. Developed by Tim Berner-Lee in 1991, HTML continues to evolve. The latest version of HTML is HTML5. HTML5 introduces semantic elements, Canva and embraces responsive design.
To write an HTML code, you need a text editor and a file saved with .html extension.
HTML5 has over 100 different elements. Elements are components in which you enclose different parts of a web document, to make them appear a certain way.
Elements can have attributes too. Attributes provide additional information that can be used to target elements for styling.
The HTML5 boilerplate houses the elements and other part of an HTML document. It is to web documents what a skeleton is to human body.
HTML forms just one part of the broader web development stack. But its importance cannot be overstated in building a strong foundation for web projects.