HTML (HyperText Markup Language)

Joran Hofman
March 6, 2021

What Is HTML?

It is the standard markup language for documents designed to be displayed in a web browser; it has a code and a basic structure for the specification of the content of a web page. It can be aided by programming languages ​​like JavaScript as well as Cascading Style Sheet (CSS) technology.

What Are HTML Tags?

HTML is a markup language, which means that it is encoded so that it can be read without initially being compiled. That is, the text of a web page is marked with codes to indicate to the web browser how the text should be presented. These markup codes or tags are HTML tags.

Through tags, a web browser can differentiate between simple content and HTML content. HTML tags contain three main parts: an opening tag, content, and a closing tag.

Web browsers read HTML files from top to bottom and from left to right.

An HTML file can use as many tags as you like depending on your code requirements.

All HTML tags must be enclosed in brackets <>.

Each tag in HTML performs different tasks, here are some examples of the most used and the most important:

<html> Open the document</html>

<head> Open the header</head>

Close the header

<body> Open the body of the document</body>

Close the body of the document

Close the document

<title> Indicate the title of the page. Significant for SEO.</title>

<link> and <style> They are to apply CSS styles to the document. With <link> a .css file is externally linked, and with <style>, CSS code is then written inside the header.</style>

<h1>, <h2>, <h3>…. <h6> They are headings, numbered from 1 to 6 in order of importance. Its use is essential for SEO, since through these, Google will understand how the content is made up and will be able to know what is really important.</h6></h3></h2></h1>

<table>, <tr> and <td> They are tables, rows and cells. Currently they are not used much but they still help from time to time.</td></tr></table>

<div> It is a depository component of other things and is the most used.</div>

<a> Used to add links. Here we must point out two key attributes, which are: href and target.</a>

<img> Images are attached through it. In this case, no closing tag is needed.

<li>, <ol>, <ul> Tags that check ordered and unordered lists. Example:</ul></ol></li>

unordered lists, the <ul> tag is used</ul>

ordered list, with <ol></ol>

item from one or another list, is controlled through <li></li>

<b> Make the text bold.</b>

<i> Italicizes text formatting.</i>

<p> A paragraph text is indicated.</p>

<br> Simple line break.

<div> To indicate the separation or section of a page. It is used as another way of giving a configuration to HTML.</div>

Class - Attribute used in <div> used to format HTML when using style sheets. When class is used, it means that this type of style can be duplicated many times in the document.</div>

id - Attribute also found in <div> and is to link the HTML tag with a component of a stylesheet. Id can only be used once.</div>

<script> Expresses that the text contained in this tag is a script that will add active and interactive qualities to the page</script>

<form> - Expresses that the area delimited by this tag is an HTML form that allows user input.</form>

<input> It is used inside an HTML form and is used to accept user input.

type - When used inside <input> allows data entry through text boxes, buttons, or select boxes. Also used to show a send button if the type equals "send"

<! -> - This is a comment tag. Used to add text that will not be displayed in the browser to a document, it is useful for documentation of the page layout.

Guides For Creation

 For many people, the visual form of a document is just as important as the document's textual content. However, it should be noted that HTML is not designed to monitor these aspects. What you need to do is use HTML to mark lists, paragraphs, headings, hypertext links, and parts of the structure of a document, and then add a stylesheet to mark the layout separately. Thus, not only are there more chances that the document will display correctly in all browsers, but it is also easier to change aspects such as color or font.

 Some word processing programs generate HTML code that is totally the opposite of the language's design purpose. They approach documents almost exclusively from a layout design vision and then simulate that layout in HTML using font tricks and other gimmicks; when HTML documents should be designed around structures like headings, lists, and paragraphs. Items that are rarely seen in these documents.

When updating the pages' content, or when you want to give it a new design is when problems come.

Using HTML properly, these design changes and content updates are made easily; this does not happen when there is a confusion of non-structural tags; maintenance gets uphill.

 Users who are blind or visually impaired have a very useful tool on the Internet. It should be noted that these users depend on Braille readers or speech synthesizers to be able to hear or reproduce the texts. This software requires carefully designed pages to handle the content correctly. As far as possible, style sheets should be used for the visual presentation part of the page and use HTML only to mark up the structure.

Details and descriptions can also be included with the images. In the tables' case, including a summary of the way it is structured and associate relevant headings with the data in the tables. For the forms that must be filled in by the user, labels must be included for each field of the form.

HTML Example

<!DOCTYPE html>

<html></html>

<head></head>

<title>Any Custom Webpage</title>

<meta charset="UTF-8">

<meta name="description" content="This is a Custom website example. It includes lots of information about work and more work.">

<body></body>

<h1>Welcome to my webpage</h1>

<p>Welcome to <em>my</em> brand new website.</p>

<p>This site will be my <strong>new<strong> home on the web.</strong></strong></p>

<a href="http://www.google.com">Google</a>

Our Table Of Contents is also made with HTML:

<div class="highlightbox"><h2>HTML</h2><ul role="list"></ul></div>
<li><a href="https://www.saleslovesmarketing.co/glossary/html#what">What Is HTML?</a></li>
<li><a href="https://www.saleslovesmarketing.co/glossary/html#tags">What Are HTML Tags?</a></li>
<li><a href="https://www.saleslovesmarketing.co/glossary/html#guides">Guides For Creation </a></li>
<li><a href="https://www.saleslovesmarketing.co/glossary/html#example">HTML Example</a></li>

Explore more glossaries