Blogs Web Development HTML Basics

HTML Basics

By Tim-Bo Tolbert, posted on Dec 15, 2021

What is HTML?

The abbreviation HTML itself stands for Hyper Text Markup Language, and it is the standard markup language that is used for creating web pages. There are other types of markup languages, however this blog post is just focusing on HTML.

Various major and minor versions of HTML have existed over the past, and the current major version in use today by most modern web browsers is version 5, which is commonly known as HTML5.

HTML document source code looks a lot like XML, in that it uses Tags, Elements, and Attributes. HTML uses these objects to describe the structure and layout of a web page.

What is an HTML Element?

HTML uses Elements as a means to represent and define HTML objects, objects such as Headings, Paragraphs, Images, Tables, Forms, etc...

Just like with XML, an HTML Element is defined by using a start tag, some content, and an end tag:

HTML5

<tagname>Some Content...</tagname>

The opening tag consists of a less than character, the tagname, then the greater than character : <tagname>

The closing tag should be identical to the opening tag, except that it should have a forward slash preceding the tag name: </tagname>

The tagname itself are predefined tag names that represents element object types, such as p for paragraphs, img for images, table for tables, etc...

Note: Even though HTMl in general is not case sensitive, HTML Element tag names are case sensitive for most web browsers, therefore it is advised to ensure that each elements opening and closing tagname's both use the same upper, lower, or camel casing.

Always close your tags. Unpredictable results and errors may occur if you do not close your tags. There are two ways to close an opened tag:

Place a forward slash at the end of the open tag just left of the greater than symbol, which is commonly used with elements that do not have inner content, for example : <br/>
Place a closing tag after content, which is commonly used with elements that do have inner content, for example : <p>Hello World</p>

What are Attributes?

Attributes are variables and their values which are added to an elements open tag. Attributes are used to provide additional information about an element. All HTML elements are capable of having attributes.

The following example is a demonstration of how attributes are used in elements:

HTML5

<label id="FeedbackLabel1">Welcome</label>

Nested HTML Elements

HTML elements can be nested, meaning that it is okay to place one or more HTML elements inside of another.

The major thing you need to concern yourself with when nesting elements is that you want to ensure that each elements tags are properly closed.

HTML Documents

All HTML documents must start with a document type declaration: <!DOCTYPE html>

The start of the HTML document itself is signified with the <html> opening tag and ends with the </html> closing tag.

HTML documents must also contain a <head>...</head> section within the html section, and the head section must contain a <title>...</title> tag.

The part of the HTML document that is visible to the client via their web browser is contained between the <body> and </body> tags.

The following is an example of a basic simple HTML web page's source code:

Example

<!DOCTYPE html>
<head>
    <title>Test Page</title>
</head>
<html>
    <body>
        <h1>Welcome!</h1>
        <p>Hello world, how are you today?</p>
    </body>
</html>

Common HTML Elements

The following is a list of some common HTML document elements and their description:

Element	Description
`<div>...</div>`	A divider or division, is used as a block-level container for placing multiple HTML elements within. Any sort of content can be placed inside the div tag. Some web browsers may automatically place a line break before and after the div as well.
`<span>...</span>`	A span, is used as an inline container, often used to mark up a part of a text or a part of a document, and is often used for applying CSS style to the text that it contains.
`<h1>...</h1>` `<h2>...</h2>` `<h3>...</h3>` `<h4>...</h4>` `<h5>...</h5>` `<h6>...</h6>`	A text heading, such as a title for a paragraph it is displayed in larger font and is usually more bold than normal text. H1 is the largest font size and H6 is the smallest font size.
`<hr/>`	A horizontal ruler, used to make a horizontal divider line across the page, often for decoration
`<img/>`	An image, used to display image graphic files, such as photos, pictures and/or animations.
`<a>...</a>`	The A element is an Anchor, and is often used for creating links. The anchored link usually either points to another web page (used as hyperlinks) or to a specific other section within that same web page (used as bookmarks).
`<p>...</p>`	A paragraph, is a designated text container for placing multiple sentences of words and numbers within. Paragraphs auto wrap the text of sentences within it, and they automatically include a line break at the end of the paragraph to space them apart and separate them from neighboring paragraphs and other elements.
`<label>...</label>`	A label, is a designated text container for placing a single sentence, word, or numbers within. Unlike a paragraph, a label does not automatically contain a line break.
`<br/>`	A line break, used to create a new blank line, often used to add additional vertical spacing between multiple elements, objects and texts.
`<ul>...</ul>`	An unordered list, used to create bulleted lists, where each list item in contained within its own `<li>...</li>` tags nested within this list element.
`<ol>...</ol>`	An ordered list, used to create numbered lists, where each list item in contained within its own `<li>...</li>` tags nested within this list element.
`<form>...</form>`	A form, is a container of form elements, used for gathering information from a client and sent to the server for processing. The two methods used for sending form data back to the server is via the POST and GET methods.
`<textarea>...</textarea>`	A text area, used to contain and define multi-line text input, in an adjustable textbox control. The textarea element is often used in a form to collect longer user text inputs like comments and reviews. The size of a text area is specified by the `cols` and `rows` attributes, or styled using CSS.
`<button>...</button>`	A button is a form input control, often used to submit a form back to the server for processing.
`<input>...</input>`	An input is a form control, used to create a textbox, an email entry field, a password entry field, or a button.
`<select>...</select>`	A select element is a form control, used to create a drop-down list. Each item of the drop-down list is identified and defined by using an `<option>` element, embedded within a select element.

There are many more HTML element objects than what is listed here, these are just a few of the most commonly used ones.

Final Thoughts

Thank you for reading, I hope you found this example and tutorial to be helpful and useful in some way. There is a lot you can do with web pages, this example is simply meant to introduce you to the basics of a web page structure and its minimum requirements.

	(0)
	(0)