Web development is the design and development of web pages.
A webpage is a visual representation of a document written in HTML on a web browser. It is the part of the website that users can view and interact with, such as submitting a form, checking an image gallery, or using a social media platform. This is also called the frontend.
A front-end developer’s job is to build the user-interactive elements of a website or an application. This article will serve as a helpful guide for anyone interested in becoming a fantastic web developer. Let us start this adventure together.
This guide is in three parts, the first of which will be considered here.
Table of Contents
The following sections will be considered in this guide.
HTML: The Backbone of a Webpage
History of HTML
HTML Syntax
HTML Tags
HTML in use
Conclusion
HTML: The Backbone of a Webpage
Imagine the human body: smooth and beautiful skin with all the muscles and flesh in perfect condition… there’s just one issue: there are no bones. Even though the external components are perfect, there’s no structure - which is the skeleton - to hold them in place.
As the skeleton is to the human body, so is HTML to a webpage. HTML is the building block of a webpage. It is the language in which documents are written and determines how they appear on a website.
History of HTML
HTML is fully written as HyperText Markup Language. It was created by Tim Berners-Lee in 1993.
Markup language refers to a system of encoded texts having a set of symbols inserted in a text document to control its structure, formatting, or the relationship between its parts.
HTML Syntax
In programming, syntax is a set of guidelines that specify how code in a language should be written.
HTML code is written in tags. When the browser serves an HTML page, it interprets the tags’ functions and renders the elements according to the rules that define their visual appearance.
HTML code consists of three parts. An HTML element is the sum of these parts. The parts of an element include:
Opening Tag: This defines where the code starts. It is wrapped inside the open and close angle brackets
<>Text: This consists of two parts. The first is the text that defines how the tag will be displayed on a webpage. The second is the information that the tag will display.
Closing Tag: This defines where the code ends. It has the same structure as the closing tag but with the addition of a forward slash
</>
Using this structure to display paragraph text, we have:
<p>I identify as a paragraph, amigo!</p>
Nested elements
These are elements that can contain other elements. Nesting is a characteristic common to all HTML documents. An example is shown below:
<body>
<div>
<section>
<h1>H1 is the largest heading</h1>
<p>Hello! I'm the first paragraph</p>
<p>Hello! I'm the second paragraph</p>
</section>
</div>
</body>
A few key points to remember when writing HTML code include:
All HTML documents should always end with a .html extension
All HTML documents must start with a <!DOCTYPE html> declaration. This makes the browser identify it as an HTML document.
Nested elements should be indented with 2 or 4 characters, as shown in the example above. Indentation is a space that is put at the beginning of a line of code.
HTML tags are not case-sensitive; that is, they can be written in uppercase or lowercase format.
HTML Tags
Categories of HTML tags include:
a. Heading Tags
b. Body Tags
Heading Tags
These tags define the characteristics of an HTML document. These tags include:
The <head> tag
This is a container for the metadata of a page. Metadata is information about the data in a web document. The head tag contains some tags, such as:
-
The
<script>tag This tag is used to write JavaScript in an HTML document, as shown below:
<head>
<script type="text/javascript">
let one = 1;
let three = 3;
let minus = one - three;
</script>
</head>
-
The
<style>tag This tag is used to write CSS styles in an HTML document, as shown below:
<style>
h1 {
color: red;
}
</style>
-
The
<meta>tag This tag is used to define the page’s metadata, as shown below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>First HTML Document</title>
</head>
<body>
</body>
</html>
Body Tags
These tags display the part of the webpage that the user can see.
The <body> tag
It contains all the tags that define a page’s content. An HTML document can only contain one body tag.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body>
</html>
The two categories of elements in the body tag are:
a. Block elements
These elements take up the full width of the line they are written on. They do not permit any other element to be placed beside them. Think of it as a president’s podium. No one shares it with him/her. Examples include:
<figcaption> <header> <section> <article> <div> <figure> <hr>
<table> <aside> <footer> <li> <output> <blockquote> <form>
<main> <p> <ul> <fieldset> <h1>-<h6> <nav> <pre> <video>
An example of block elements in practice will be shown using the heading tags.
The heading tags are represented by the <h1> to <h6> tags. These tags are ranked from most important to least important.
<div>
<h1>Largest Heading</h1>
<h2>Second Largest Heading</h2>
<h3>Third Largest Heading</h3>
<h4>Fourth Largest Heading</h4>
<h5>Fifth Largest Heading</h5>
<h6>Smallest Heading</h6>
</div>
Here’s how the headings are displayed in the browser:
To demonstrate why these are block elements, rearranging the order of the headings as shown below gives the same result
<div>
<h1>Largest Heading</h1> <h2>Second Largest Heading</h2>
<h3>Third Largest Heading</h3> <h4>Fourth Largest
Heading</h4>
<h5>Fifth Largest Heading</h5> <h6>Smallest Heading</h6>
</div>
b. Inline elements
These elements can stay next to each other on a line, hence the name inline elements. They are way more accommodating compared to body tags (hehehe!). Examples include the following:
<a> <strong> <abbr> <br> <em> <label> <script> <sub> <var>
<acronym> <button> <i> <map> <select> <sup> <b> <cite> <img>
<object> <small> <textarea> <input> <q> <span> <time>
The button tag is used to define a button that can be clicked on in the webpage. It is used to show an example of inline elements in practice below:
<div>
<button>Hello! It's me</button>
<button>I'm another button</button>
<button>Another one!</button>
</div>
This will be displayed in the browser as shown below:
The buttons remain on the same line despite the separate lines in the code. A feature of inline elements.
HTML Attributes
These snippets provide more information about HTML documents. They are usually defined in the opening tag and come in key/value pairs. The syntax is key=”value”.
The two most common attributes are:
a. Class attribute
This defines one or several class names for an HTML element. There can be multiple class names for an element, separated by a space.
b. Id attribute
This defines a special identifier for a particular HTML element. There can only be one id used for each element, and it cannot be duplicated.
Furthermore, HTML has various elements for structuring and organizing the webpage, such as:
- Text-formatting elements
- Quotation elements
- List elements
- Container elements
- Page Structuring elements
- Form Elements
- Link elements
- Image elements
- Multimedia tags
- Iframes
For more information on these elements and a more in-depth look into HTML, check out these links:
https://www.w3schools.com/html/default.asp
https://developer.mozilla.org/en-US/docs/Web/HTML
Conclusion
This article has covered the basics of HTML, which is one of the tools needed to kickstart a career in front-end web development.
Learning HTML is the first step on your way to becoming an awesome front-end web developer.
Do well to check out the second part of this guide, which gives a comprehensive introduction to CSS. See ya!
Top comments (0)