HTML, or Hypertext Markup Language, is coding that forms the main building blocks of every website on the Internet. In the past, using HTML directly was far more common, but Content Management Systems (CMS) and WYSIWYG (What You See Is What You Get) interfaces that streamline the design process as well as developments in additional types of coding such as CSS, javascript, and JQuery have made websites far more aesthetic, functional, and easy to set up. Despite these tools, however, knowing HTML is valuable when setting up a website because HTML forms the framework that a website bases all elements from. Therefore, even a basic understanding can provide valuable insight in what’s going on behind the scenes.
Webpages
Before delving into the coding itself, it’s essential to have a working knowledge of how HTML functions. Every page on a website can be thought of as a single HTML file. The HTML coding is like a language that speaks to a web browser. The browser translates the HTML files so that it can display them correctly.
HTML is static in nature, so without more advanced programming such as PHP, all of the information being displayed will have been manually coded by the individual in charge of maintaining the website. This means that automatic, dynamic content will need additional resources. However, it’s still easy to make a website using HTML and maintain it without advanced programming unless there are a large number of pages or a need to be constantly updating.
Like a browser, a person that’s creating the website will also need to learn the HTML language in order to get the page to display with the correct information and presented in the desired aesthetics in mind.
HTML Coding
The majority of HTML coding consists of opening and closing tags enclosing the text or information that it informs. Both the opening and closing elements are surrounded by the brackets usually used to designate greater than and less than in mathematical equations. The closing tag will differ from the opening tag with a forward slash before the element’s name (e.g. < h1 >This is a heading< /h1 >).
Commonly Used Tags
< html > – The website must begin with this tag. Without it, the browser will not be able to recognize the page as an HTML file. At the end of the file, the < /html > tag is used, designating all content that’s enclosed as the page’s content.
< head >< /head > – This composes the first major section of the content. Enclosed within should be the <title></title> tags that tell the browser what the name of the page is.
< body >< /body > – This is the other major section of the content. These HTML tags designate the bulk of the web page’s content and design elements such as text, tables, images, and links.
< h1 >< /h1 > – These tags designate any text enclosed within them to be formatted as the “Heading 1.” In short, this is the largest header text. Smaller headers can be defined with h2, h3, etc. with each getting progressively smaller. The h6 tag is the smallest defined heading.
< p >< /p > – These tags designate a single paragraph that should be displayed on a single line with word wrap, of course.
< a >< /a > – These tags will add a link to the page. The destination will be designated in the opening tag, and the anchor text (what is displayed) will be enclosed between the opening and closing tags like so:
< a href=” destination location “>This is the display text< /a >
< strong >< /strong > – This formats text as bold.
< em >< /em > – This formats text as italic.
Some HTML coding does not need a closing tag because all elements are defined within the single opening tag. Perhaps the most used instance of this is when HTML coding is used to display an image. The coding for this goes as follows:
< img src=” location of the picture” />
Other elements such as size, alignment, hover text, and border can also be defined within the tag, and a closing is not needed because the source of the image must be included in the tag itself rather than enclosed between two tags.
There is a multitude of other HTML elements that can be learned, so if it’s necessary to learn more, visit other online HTML reference sites for more information.
Example of HTML in Action
< html >
< head >
< title >This is the title< /title >
< /head >
< body >
< h1 >This is Heading 1< /h1 >
< p >This is the < em >first< /em > paragraph.< /p >
< p >This is the < strong >second< /strong > paragraph, and < a href=”www.google.com”>here< /a > is a link to Google.< /p >
< img src=”image.jpg” alt=”This is hover text” width=400 height=400 />
< p >This is the third paragraph.< /p >
< /body >
< /html >
The above coding could be copied into a notepad document and saved as a .html file. When you open the file in the browser, the HTML would actually trigger and display like an actual website.
Jazzing Things Up
CSS (Cascading Style Sheets) can be used to define the way specific HTML elements function and is particularly helpful in mastering the layout of the page. Some of the most common functions include designating the default font on the page, choosing to how a drop-down menu operates, and getting pictures to change when the cursor hovers over them.
Javascript and JQuery both help with the aesthetics and functionality of a page by adding movement and options to attract a user’s attention. From picture galleries and image slideshows to moving text and pop-up boxes, the options are endless.
Make a Website Using HTML
HTML is a coding language, and learning a language is difficult. Unlike other languages, however, HTML can be troubleshooted through various means, and there are numerous online resources that can help someone do so. Using HTML doesn’t have to be difficult, and it can even be fun.
Even though sites do not typically just use HTML anymore, this type of coding still informs the way all websites are set up. Other coding languages simply influence the way HTML behaves and displays, and there are many interfaces, systems, apps, and tools that facilitate the coding process. Nonetheless, having a basic grasp of how HTML functions can be invaluable when both designing a site from scratch and while utilizing additional resources.