adebomiolusegun

Posted on Oct 2, 2022

Introduction to HTML and HTML Document Structure

#html #beginners #webdev #programming

Introduction

If web development is something you are interested in, HTML will be the first thing you learn. Before understanding other languages, everyone who has become a web developer has learned HTML. Images, text, videos, and forms are all displayed on websites using the HTML markup language.

What is HTML

"HTML" stands for Hypertext Markup Language. It's the skeleton of a website. HTML is a combination of hypertext and a markup language. Hypertext refers to links that connect pages either within the website or between websites.

HTML Tag Structure

The website is structured using HTML elements, tags, and attributes. An HTML tag indicates the start and end of an HTML element. The HTML tags are enclosed by an angular bracket. As a result, it is important that you close a tag after opening it. To close a tag, we use the same angular brackets, but we must use a forward slash.

<h1> This is an opening tag.
</h1> This is a closing tag.

Element

Elements and tags are not the same thing. An element is anything within the starting and closing tags.

<h1>HEADING1</h1>
<h1></h1> Are the opening and closing tags. 
HEADING 1 is the content

Some elements have no content and no closing tags. Such elements are known as "empty elements."
Some examples of empty elements are provided below.

<br> 
<hr> 
<img> 
<area>
<input>

Attributes

HTML attributes are special words used inside the opening tag to modify the behavior of the element. Additional details about the HTML elements you're working with are provided by HTML attributes. Attributes are made up of two parts: name and value. A semicolon follows the attribute value.

<openin_tag attribute_name= attribute_value ("value")>Element</closing_tag>

For proper comprehension, we will discuss the various types of attributes below.

Types and examples of Attributes

Some attributes are universal and can be applied to any element. As a result, they're known as standard or global attributes.
Here are some examples of global attributes.

The Class Attribute The class attribute assigns one or more class names to an element.

<h1 class="firstheader">Header 1</h1>

The ID Attribute The id attribute is used to uniquely identify an element, and unlike the class attribute, multiple elements cannot have the same id name. The same class name, on the other hand, may apply to many elements.

<h1 id="myid">Header 1</h1>

The Title Attributes The title contains text that provides additional information about the element to which it belongs and will be displayed as a tooltip if you hover over the element.

<p title="your welcome">Hello.</p>

The value of the of the title attribute will be displayed if you hover your mouse above the element.

The style attributes Fonts, colors, and other elements get styles added through the style attribute.

<p style="color:blue;">Hello.</p>

Some attributes must be used with a particular element or set of elements. As a result, they're known as required and optional attributes.
Here are some examples of required and optional attributes.

The ALT Attribute The alt attribute is used to display text as an alternative when you cannot view an image in the browser due to a slow network or other reasons.

<img src="car.jpg" alt="This is a toyota car">

The alt attribute can be used with the following elements.

<area>
<input> 
<image>

The Src Attribute The src attributes specify the URL to the image to be displayed.

 <img src="car.jpg">
     You can also get images from a folder on your computer. 
    <img src="/images/car.jpg">

The href Attribute The href attribute indicates the link's destination.

<a href="https://www.toyota.com">Visit Toyota</a>

The alt attribute can be used with the following elements.

<area>
<link> 
<a>
<base>

The Checked Attribute It specifies that an element should be pre-selected when the page loads.

<form action="/action_page.php">

The alt attribute can be used with the following elements.

The last is the event attribute, Most elements support event attributes, which can be used to execute JavaScript when certain events occur, You'll use and understand more of these attributes when you start writing javascript.
Here are some examples of required and optional attributes.

The On Mouseover When the mouse is moved over an element, the onmouserover attribute is triggered.

<div class="circle" onmousemove="mouseMoveFn()" onmouseout="mouseOutFn()"></div>

The onclick This event attribute is triggered when a user clicks an element with the mouse, this works with all HTML element.

<p id="click" onclick="myFunction()">Click me to change my text color.</p>

The ononline When the browser starts working, this attribute becomes active. It works with the body tag only.

 <body ononline="myFunction()">

The onwaiting Both audio and video can be used with this attribute. It is triggered when the media is paused and ready to resume.

<audio onwaiting="myFunction()">
<video onwaiting="myFunction()">

THE HTML Document Structure

The Doctype declaration, HTML, head, title, body, and body content make up the structure of an HTML document. This is the information that HTML sends to web browsers.

<!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>Document</title>
    </head>
    <body>   

    </body> 
    </html>

The !DOCTYPE html

The first thing on the page should be the DOCTYPE declaration, which tells the browser that the current version of HTML is HTML 5.

The html

The root element in HTML is the next. Everything in the document, including the "head" and "body" tags, is contained in this tag.

The head

The head element tag comes after the root element tag. This is where the metadata is saved; the browser will only read it, it will not be displayed on the page.

The Meta

The meta tag contains information about the webpage and instructs the browser on how to display it to the user.

The charset="UTF-8"

The charset attribute tells the browser what character encoding is used to display content on the webpage. Character encoding instructs the computer on how to translate digital data into symbols, letters, and numbers.

The UTF-8

This is the version of the character set. It is the most widely used character encoding format on the web, covering nearly all of the world's characters and symbols.

Http-equiv

This attribute uses HTTP headers to provide information about the web page.

Name Viewport

The viewport meta tag enables us to specify the width and scaling of the viewport in order to properly size all devices. On a desktop computer, for instance, it will appear larger, medium on tablet, whereas on a mobile device, it will appear smaller.

initial-scale=1.0

The initial scale controls the browser's initial zoom level when the page is first loaded.

Content

The content attribute contains the value linked to the name or HTTP-equivalent.

The tittle

This is the title of the document, and it appears in the browser's title bar.

The body

The content of the body element is displayed on the web page for the user that visits your website,all the content you see on the web page, including images, videos, and text, is contained in the body section.

Conclusion

We've all read and understood the fundamentals of HTML and have a basic understanding of how it works, and you'll learn more about HTML and its elements, as well as how to use them to structure your website. If you want to learn more about it, I recommend w3schools.com and freecodecamp.org.