DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Web Basics Episode 1: Introduction to HTML
Fahid Latheef A
Fahid Latheef A

Posted on

Web Basics Episode 1: Introduction to HTML

Introduction

In this series, I will try to discuss Web Basics Topics. In the first episode, the HTML Basics are covered.

Table of Contents

What is HTML?

HTML (Hyper Text Markup Language) is the language for describing the structure of Web pages. HTML gives authors the means to:

  • Publish online documents with headings, text, tables, lists, photos, etc.
  • Retrieve online information via hypertext links, at the click of a button.
  • Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc.
  • Include spread-sheets, video clips, sound clips, and other applications directly in their documents.

HTML Document structure

This is a rough structure of an HTML document.

<!DOCTYPE html>
<html>
    <head>
        Document Header
    </head>

    <body>
        Document Body
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

HTML Tags

HTML is a markup language and makes use of various tags to format the content. Except few tags, most of the tags have their corresponding closing tags. For example, <body> has its closing tag <\body.

Some Basic Tags

Tag Description
<!DOCTYPE...> This tag defines the document type and HTML version.
<html> This tag encloses the complete HTML document and comprises of document header and body.
<head> This tag represents the document's header.
<title> This tag is used inside the <head> tag to mention the document title.
<body> This tag represents the document's body which keeps other HTML tags like <h1>, <div>, <p>, etc.
<h1> This tag represents the top level heading. The tags <h2>, <h3>, <h3>, <h4>, <h5>, <h6> also represents other sizes of headings in which <h1> is the biggest and <h6> is the smallest.
<p> This tag represents a paragraph.

Singleton Tags

The singleton tags don't require a closing tag to be valid. These elements are usually ones that stand alone on the page.

Important Singleton Tags

Tag Description
<br> A line break which is used in text content to create a single line break instead of a paragraph.
<hr> A horizontal rule, which is a straight line on a page. These can be used to separate sections in a webpage.
<img> Used to embed an image in an HTML page. Technically, this tag creates a holding space for the image whose path can be referenced through src attribute.
<meta> Meta tags are "information about content." They are found in the head of a document and used to convey page information to the browser. There are many different meta tags that you can use on a web-page.
<input> A form element that is used to capture information from visitors.

Semantic and Unsemantic Tags

Semantic tags describes its meaning to both the browser and the developer.
Examples of non-semantic elements: <div> and <span>. These tells nothing about its content.
Examples of semantic elements: <form>, <table>, and <article> . These clearly defines its content.

Semantic Page Example

A semantic page example

HTML Header Section

Difference between <header> and <head>

The <header> element is a structural element that outlines the heading of a segment of a page. It falls within the <body> element.

The <head> element is not displayed on a page and is used to outline metadata, including the document title, and links to external files. It falls directly within the <html> element.

Navigation Section

The <nav> element identifies a section of major navigational links on a page. This allows us to link to other pages within the same website or to parts of the same web page

Title

<title> is used to give titles to web-pages. It is shown in browser's title bar.

Favicon

A favicon is a file containing one or more small icons, associated with a particular website or web page.
Now favicon.ico is used to display icon in our web-page (Typically can be seen close to the title in the title bar).

Charset

A character set (charset) refers to the composite number of different characters that are being used and supported by the html document.
To display an HTML page correctly, a web browser must know the character set used in the page. This is specified in the <meta> tag.

UTF-8, ASCII and UNICODE

ASCII UNICODE UTF-8
ASCII defines 128 characters, which map to the numbers 0–127 Unicode defines (less than) 221 characters, which, similarly, map to numbers 0–221 UTF-8 is one possible encoding scheme of Unicode characters
ASCII is subset of UNICODE UNICODE is super set of ASCII
Invented to accommodate non-English characters

Viewport

The view-port is the user's visible area of a web page. It varies with the device - it will be smaller on a mobile phone than on a computer screen.
This is defined using <meta tags in HTML

HTML Body section

Block Level tags

<h1> to <h6>

<h1> to <h6> tags are used for headings with <h1> being the largest and <h6> being the smallest.

Lists

<ul>, <ol> and <li> are used to list items in a web-page.

The list is started with either <ul> or <ol> and then <li> is used to list the elements.

<ul> aka unordered list

  • Item 1
  • Item 2
  • Item 3

<ol> aka ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Page Divisions or Sections

  • <div> is a non-semantic tag used to divide page contents.
  • <section> tag is a semantic tag used to define sections in a document.
  • <header> tag is a semantic tag used for header section in the document.
  • <footer> tag is a semantic tag used for footer contents in the document.
  • <nav> tag is a semantic tag used for navigation contents of the document.
  • <main> is a semantic tag used to define contents that are unique to the document. It should not contain any content that repeats across documents such as sidebars, navigation links, copyright information, site logos, and search forms.
  • <aside> tag is a semantic tag that is used to set aside the content it is placed in from the section.
  • <article> is used to specify independent, self-contained content.
  • <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript). It is transparent, and is only a container for graphics, you must use a script to actually draw the graphics.
  • <form> tag is used to create an HTML form for user input.
  • <table>tag is used to create tables in the document.

Inline Tags

An inline element does not start on a new line. An inline element only takes up as much width as necessary.

  • <span> is an inline container used to mark up a part of a text, or a part of a document.
  • <label> tag defines a label for several grouped elements, such as in drop-down, input-area etc.
  • <input> tag is used to create input field where users can enter the data.
  • <b> tag is used to bold the text.
  • <i> tag is used to make the text italic.
  • <img> tag is used to embed image in the web-page.
  • <button> tag creates a button create a clickable button in the web-page.
  • <a> tag is used to create links in the web-page.

Conclusion

That concludes the HTML basics. In the next episode, I will cover the Basics of CSS.

References

HTML Basics w3schools

HTML Basics Tutorial Point pdf

Web Design w3org

HTML Singleton tags

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.