HTML Basics for Absolute Beginners
Whether you’re interested in becoming a professional full-stack developer or you simply want to learn more about how websites work, the first basic thing you need to study is HTML. So this is gonna be an ongoing series, and each of them will cover different topics related to web development. As a stepping stone, let us start with Hypertext Markup Language (HTML)
Before we dive into HTML, I want to let you know that patience is the key to learn web development or anything for that matter. In fact, you can even study HTML for months if you decide to dive really deep into it, covering each and every inch of it. Anyways we are not gonna do that here, we are just gonna go through some of the very important and useful tips and tags. First of all, HTML is not a programming language, it is just a markup language used to edit and format what we see. HTML is probably the first step that fulfills Front-end development which grows into back-end, web, and finally full-stack development if you are interested in taking it a long way.
HTML is therefore strictly presentational which doesn’t involve any logic and to start with, all you need is a browser and a text editor. However this doesn’t make HTML any less important, and in my opinion, it is the building block and the most important element in creating a fully functional website. HTML has various versions and here we will be mainly focusing on HTML5.
Once you have picked your browser and text editor, the next step is to play with it. Open your text editor, type in anything and save it with an extension (.html) which will lead the file to open automatically through a browser. Anything written inside the file is displayed in the browser, even if it’s not included inside an Html tag.
Now that we have created an HTML file, let us look at the HTML tags. In HTML, the text we want to display is included inside an HTML tag, and each tag may represent a particular format of what we see. Generally, we have a <Start Tag> and an <End Tag> however there exists other tags as well that close automatically without defining an end tag (known as Self-closing tags)
Now let us go through the HTML structure,
1. <!DOCTYPE html> refers to the version of HTML i.e HTML5.
2. Every HTML file must start with a <html> tag.
3. <head> tag includes the title of the page, metadata, and the links to the CSS, javascript, and other files required to improve what we see and add dynamic functionality.
4. <body> tag contains the actual content of our website.
Now, let us jump into HTML tags. Although we are only gonna cover a few important ones here, feel free to check out more. Basically, we have two types of elements/tags, Inline & Block and all these tags are allowed to have multiple attributes within them.
Inline Elements doesn’t force the content to start fresh, it takes only the necessary width avoiding jumping onto the next line. Eg : <span> <img> <a>, whereas Block Elements make sure to take the entire width forcing the content to start in a new line. Eg: <h1> — <h6>, <p>, <header>, <footer> etc.
Before we move on, let us discuss about semantic tags. Semantic tags focus on the meaning rather than the syntax. As we go forward, we might end up with different tags having same functionality, in such a case, one of them is probably a semantic tag. Now let us go through some of the most common and important tags,
Basic Tags
<!DOCTYPE> Defines the document type
<html> Defines an HTML document
<head> Contains metadata/information for the document
<title> Defines a title for the document
<body> Defines the document’s body
<h1> to <h6> Defines HTML headings
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a thematic change in the content
<! — HelloWorld — > Defines a comment
Formatting Tags
<blockquote> Defines Quotation
<abbr> Defines Abbreviation
<cite> Defines the title of a creative work
<b> Defines bold text
<em> Defines emphasized text . It is a semantic tag for Italics
<i> Defines italic text
<strong> Defines important text. It is a semantic tag for Bold
<small> Defines smaller text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text, mostly used to specify external website links
<del> Defines deleted text, displayed with a penstrike
<mark> Defines marked/highlighted text
Forms and Inputs
<form> Defines an HTML form for user input
<input> Defines an input control
<output> Defines the result of a calculation
<textarea> Defines a multiline input control (text area)
<button> Defines a clickable button
<select> Defines a drop-down list
<option> Defines an option in a drop-down list
<label> Defines a label for an <input> element
Click here, to explore various attributes that can be used within these tags.
Images
<img> Defines an image
<map> Defines a client-side map image
<area> Defines the area inside a map image
<canvas> Used to draw graphics, via scripting (usually JavaScript)
<figure> Specifies self-contained content. It is an img semantic tag.
<figcaption> Defines a caption for a<figure> element
<picture> Defines a container for multiple image resources
<svg> Defines a container for Scalable Vector Graphics
Click here, to explore various attributes that can be used within these tags.
Audio / Video
<audio> Defines sound content
<source> Defines multiple media resources for media tags
<track> Defines text tracks for media tags
<video> Defines a video or movie
Click here, to explore various attributes that can be used within these tags.
Links
<a> Defines a hyperlink
<link> Defines the relationship between a document and an external resource (most used to link to style sheets)
<nav>Defines navigation links
Click here, to explore various attributes that can be used within these tags
Lists
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
Click here, to explore various attributes that can be used within these tags
Tables
<table> Defines a table
<caption> Defines a table caption
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
Click here, to explore various attributes that can be used within these tags
However covering all the attributes is beyond the scope of this article, so feel free to check it out! So far we have covered the absolute basics anyone who has the will get into web development can grasp upon. Once you’re confident in your HTML skills, you can move on to the next step in your web development journey — styling your page with CSS.
