cft

HTML For Dummies

A basic overview of HTML5 for code newbies.


user

Mildred Hart

2 years ago | 5 min read

Introduction

HTML is known as the basic building block of any web page. Switching my career into the tech filed was quite a big decision for me because i had no prior background knowledge of what it would entail.

I started my learning journey with basic HTML tutorials, because that is always a good start for every Frontend developer. This article will provide the fundamental guide for code newbies with the path of Frontend development.

What Is HTML?

HTML stands for Hyper Text Markup Language, It is a markup language not a progamming language. We use HTML to structure contents on the web page such as text, images and forms. The purpose of HTML is to maintain the user interface structure, it also provides the basic layouts of web pages before being ehanced with either CSS or Javascript.

HTML is known for the combination of Hypertext and markup language, Hypertext in HTML defines the link between web pages while markup language is used to get the text doucment within the HTML tags.

HTML is the most commonly used language to develop websites. The use cases for HTML are more visual when the computers can control how texts and images are displayed on the browser through the use of tags and elements.

In order for HTML to carry out it's duty, there is a need for elements that are represented by the HTML tags </> such as headings, paragraphs, links etc. It is important to note that each of each HTML tags carries it's own contents and beahaivors which are displayed by the browser.

History Of HTML

HTML was developed by a physicist called Tim Berners-Lee in 1991. He created the very first version which consisted of 18 tags, however not all of them are supported by modern browsers.

Timeline Of HTML

  1. HTML 1 : 1993.
  2. HTML 2 : 1995.
  3. HTML 3: January 1997.
  4. HTML 4 : December 1997.
  5. HTML 5 : 2014.

Struture Of HTML

Historically, all HTML elements are categorized into two types which are ; block-level elements and inline elements.

Block-level Elements

In HTML, a block-level element is any element that takes up the full width of a web page by creating a “block” around the content. Block-level elements take up as much space as possible by default, each block-level element will start on a new line on the page stacking horizontally or vertically.

The <p> tag is an example of a block-level element because each paragraph tag will appear vertically on a new line. Other block-level elements include ;

<div>

<section>

<ul>

<ol>

Inline Elements

Inline elements are the opposite of block-level elements as they display on a signle line, here they do not force the text after them to a new line.

An anchor tag is an example of an inline element. You can put several links in a row and it would display on a single line. Other examples of inline elements include ;

<img>

<strong>

<span>

The HTML doucment needs three specific block-level tags which are ;

  • The <head></head> tag ; This contains supporting infomation about the file referred to as “metadata” which holds the page's tittle and charset.
  • The <body></body> tag ; The body tag contains the main content that appears on the web page. Inside the body tag is where all the coding work is done.
  • The <html></html> tag ; This is known as the highest level element that wraps up all the code.

HTML Fundamentals

HTML works with pre-defined tags and elements which gives the browser a format to display it's contents. 80% percent of HTML tags always start with an opening tag and a closing one, for example <p>a paragraph of text<p/>

Attributes

The class and id attributes are the most commonly used for designinng contents, they are used to identify specific HTML elements. The id attribute is basically used for giving an element a “unique identifer”.

The id values are only used for signle elements such as sections or headers and they must not contain any white space, the (#) selector is used to identify id values in CSS stlying.

The class attribute is similar to the id attribute, it is for the same purpose which is the identification of specific elements. However, the class attribute can be used across multiple elemnts, where an elements can have many class values seperated by white spaces. The (.) selector is used to identify class attributes in CSS stlying.

Headings

HTML headings are described with the <h1> to <h6> tags which are in a form of tittles and subtittles that you want to display on the web. The <h1> tag defines the most important heading while the <h6> defines the least important heading.

paragraphs

The HTML <p> tag defines a paragraph on a web page. It is a block-level element which starts on a new line.

Links

Links are found on all web pages which allows users to click from page to page. HTML links are hyperlinks which are defined by the <a> tag also known as the anchor tag.The <a> tag defines a link with this syntax

<ahref="url">*link text*</a> .

The most important part of the anchor tag is the “href” attribute which indicates the links destination. HTML links have what we call target attribute which specifies where to open the linked doucment, and it could be in each of the following values ;

  • Self ; This is a default value, here the doucment is opend on the same tab/window it was clicked on.
  • Blank ; This value opens up the document in a new tab/window.
  • Parent ; Here the document is opened up in the parent frame.
  • Top ; This value opens up the document in the full body of the window.

Div

The <div> tag is a block-level element that allows you to section contents into seperate logical divisions on the web page. Div tags are mainly used for organization and stlying purposes which are then stlyed CSS or manipulated with the use of Javascript.

Any kind of content can placed inside the div tag, yes it's that awesome!

Lists

HTML lists are of two types ;

  • Unordered List ; An Unordered list is defined with the use of the <ul> tag with nested <li> tags for the list item. By default unordered lists are marked small bullets on the browser.
  • Ordered List ; An Ordered list is defined with the <ol> tag while the listed items are nested within the <li> tag. The list item will be marked by numbers on the browser by default.

Images

The HTML <img> tag is used to embed photos into the web page which ehances the design and apperance of the page. For these images to appear properly, they must be linked to the web page.

The <img> tag has two attributes which are ; <src> this specifies the path to the image and <alt> which gives an alternative text for the images( for users who are visually impared).

Conclusion

To become a master Frontend Developer you must have the basic knowledge of HTML, because it gives you the ability to create basic web layouts.

I hope you find this article very helpful if you are confused on what HTML is and how it works.

#HTML5 #Frontendev #beginneslearningtocode #htmlandcssseries.

Upvote


user
Created by

Mildred Hart

learning to be a Frontend web developer and documenting my tech journey as I learn. My articles are about HTML5 , CSS and JavaScript.


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles