THE BASICS OF HTML - A COMPREHENSIVE GUIDE FOR BEGINNERS

#javascript #webdev #beginners #programming

What is HTML

HTML is a markup language that defines the structure of your content. HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way.

Anatomy of an HTML Element
The main parts of an HTML element are as follows:

The opening tag: This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets. This states where the element begins or starts to take effect — in this case where the paragraph begins.
The closing tag: This is the same as the opening tag, except that it includes a forward slash before the element name. This states where the element ends — in this case where the paragraph ends. Failing to add a closing tag is one of the standard beginner errors and can lead to strange results.
The content: This is the content of the element, which in this case, is just text.
Attributes: This contain extra information about the element that won’t appear in the content. In this example, the class attribute is an identifying name used to target the element with style information.
The element: The opening tag, the closing tag, and the content together comprise the element.

Element Attributes
Attributes contain extra information about the element that you don’t want to appear in the actual content (Placed in the opening tag).
Here, “class” is the attribute name and “text” is the attribute value. The class attribute allows you to give the element a non-unique identifier that can be used to target it (and any other elements with the same class value) with style information and other things.
An attribute should always have the following:

A space between it and the element name (or the previous attribute, if the element already has one or more attributes).
The attribute name is followed by an equal sign.
The attribute value is wrapped by opening and closing quotation marks. Please note the “id” attribute here is a unique identifier while the class attribute for instance is a non-unique identifier

Properties of an Attribute – HTML Tags

An attribute should always have the following:

A space between it and the element name (or the previous attribute, if the element already has one or more attributes).
The attribute name followed by an equal sign.
The attribute value wrapped by opening and closing quotation marks. Please note the “id” attribute here is a unique identifier while the class attribute for instance is a non-unique identifier

Semantic Elements

The <h1> element is a semantic element, which gives the text it wraps around the role (or meaning) of “a top level heading on your page.”
A great deal of web content can be made accessible just by making sure the correct Hypertext Markup Language elements are used for the correct purpose at all times.
By default, most browser’s user agent stylesheet will style an <h1> with a large font size to make it look like a heading (although you could style it to look like anything you wanted).
Some of the benefits from writing semantic markup are as follows:

Search engines will consider its contents as important keywords to influence the page’s search rankings (see SEO)
Screen readers can use it as a signpost to help visually impaired users navigate a page (accessibility)
Finding blocks of meaningful code is significantly easier than searching through endless divs with or without semantic or namespaced classes
Suggests to the developer the type of data that will be populated
Semantic naming mirrors proper custom element/component naming *These are some of the roughly 100 semantic elements available:
<a> Defines a hyperlink
<abbr> Defines an abbreviation or an acronym
<acronym> Not supported in HTML5. Use instead. Defines an acronym
<address> Defines contact information for the author/owner of a document
<applet> Not supported in HTML5. Use or instead. Defines an embedded applet
<area> Defines an area inside an image map
<article> Defines an article
<aside> Defines content aside from the page content
<audio> Defines embedded sound content
<b> Defines bold text
<base> Specifies the base URL/target for all relative URLs in a document
<blockquote> Defines a section that is quoted from another source
<body> Defines the document's body
<br> Defines a single line break
<button> Defines a clickable button
<code> Defines a piece of computer code
<del> Defines text that has been deleted from a document
<details> Defines additional details that the user can view or hide
<div> Defines a section in a document
<footer> Defines a footer for a document or section
<form> Defines an HTML form for user input
<h1> to <h6> Defines HTML headings
<head> Contains metadata/information for the document
<header> Defines a header for a document or section
<hr> Defines a thematic change in the content
<html> Defines the root of an HTML document
<img> Defines an image
<input> Defines an input control
<label> Defines a label for an <input> element
<li> Defines a list item
<main> Specifies the main content of a document
<meta> Defines metadata about an HTML document
<nav> Defines navigation links
<ul> Defines an unordered list
<tr> Defines a table row in a table
<title> Defines a title for the document
<th> Defines a table header cell in a table
<span> Defines a section in a document
<script> Defines a client side script
<select> Defines a drop down list