HTML Code Decoded

Interested in creating websites or web applications? Did you know that HTML is the primary language to create websites and web applications in conjunction with CSS and JavaScript?

Hypertext Markup Language (HTML) is used to create documents and build websites on the World Wide Web. It is also used to create web applications that are not connected to the internet. HTML defines the structure and layout of a web document or web application by using tags and attributes. HTML elements are referenced on W3Schools.com. HTML5 is the newest version of HTML.

What Is HTML5?

HTML5 is the W3C (World Wide Web Consortium) specification that defines the fifth major revision of HTML. HTML5 is designed to build web documents and websites without the need for software or browser plugins.

HTML5 can also be used to write web applications that are not connected to the internet. All of the main browsers support HTML5 attributes including Google, Chrome, Microsoft Edge, Firefox Mozilla, and Apple Safari.

Basic HTML

There are some basic HTML tags and attributes that help define the web document in the browser. The <head> section of the web page is where the important tags are placed for Google to understand what the overall web page is about. It is where the <meta> formatting occurs, identifying the <title> tag and <description> tag.

The title tag is displayed at the top of a browser window. The title tag is accompanied by the description tag in Google organic search results. The <head> section is also where most tags are placed to track website data using site verification for Google Analytics and other Google properties.

Basic HTML code also includes heading tags, with <h1> being the most important for Google organic search. It is essential to optimize the <h1> tag for better ranking in organic search results. Heading tags go from <h1> to <h6>. If you want to code a page break, use <br>.

Basic HTML also includes coding for language identification. The English language is defined with <html lang=”en”>. There are over a hundred different language codes, as well as over a hundred country codes that further define the origin of the web content.

HTML Formatting

The use of HTML formatting code helps web designers emphasize certain text or de-emphasize other text. The use of different font formatting codes includes <b> for strong, bold text, while some content management systems use <strong> to emphasize a heading or phrase.

Other HTML codes used to format a web page include <i> for italic text, <small> to identify smaller than normal text, <sub> for subscript text, and <sup> for superscript text. Text can also be formatted in different colors.

Font Color Coding

The web safe palette consists of 216 colors that display solid, non-dithered colors that are consistent on any monitor that meets a minimum of 8-bit color.

Every hex_number referenced color is formatted with a “#” and then a combination of numbers and letters. Black is coded as #000000 and white #FFFFFF. The hex color codes are made up of the levels of primary colors including red, green, and blue (RGB).

The hex_number format of each color can be displayed as #XXXXXX. The lowest intensity of color is 00, and FF represents the highest intensity. RGB code is more complicated and is displayed as rgb(255,0,0) using the intensity of the three primary colors in parentheses.

The color font attribute is represented in code as <font color=”red”>text in red</font>. All of the main browsers support these font attributes including Google Chrome, Microsoft Edge, Firefox Mozilla, and Apple Safari.

List Coding

When web designers want to include a list on the web page, they can use an unordered list (bullet points) as <ul> or an ordered list (numbered list) as <ol>. Each list item starts with the <li> tag to identify each phrase in the list.

Table Coding

Some web designers will want to use tables to make coding a website easier. The web designer will use <table> to define a table. The header cell in a table is defined by <th>, a row with <tr>, and individual cells with <td>.

Style Coding

With the increased use of content management systems and software, including WordPress and Drupal, HTML5 has added additional styling codes. To define a header in a document, a web designer will use <header>. The footer in a document is defined as <footer>. The main section of the document is defined by <main>, and sections in a document are defined with <section>.

Forms and Input Coding

If a web page includes a form or needs text input sent to the webmaster, form and input coding can be used. The start of the form is defined by the <form> tag.

To define the text area, use <input>, and to define multiple lines of text use <textarea>. To send the form’s information to the webmaster, the form will use a <button>. If the webmaster is using a drop-down to identify different variables, the web designer will use <option> for single options and <optgroup> for a group of related options.

Frame Coding

It is important to note that some frame coding is no longer supported with the introduction of HTML5. Tags that are not supported include <frame> to define a window in a frameset, <frameset> to define a set of frames, and <noframes> to define an alternate content for users whose browsers do not support frames.

Since many web browsers treat the content inside a frame as a different URL location (web address), frames are not supported by HTML5 or web browsers with the exception of <iframe> that defines an inline frame.

Image Coding

If the web designer wants to include an image in the web design, he/she will use the tag <img>. HTML5 has added some additional tags that make adding images to a web page easier. They include

  • <canvas> for drawing graphics with JavaScript
  • <figure> to specify self-contained content
  • <figcaption> to define a caption for a <figure> element
  • <picture> for defining a container for multiple image resources
  • <svg> to define a container for SVG graphics (graphics that can be enlarged without loss in clarity)

Link Coding

It is important to add both internal and external links to your website. Internal links help pass all of the link values from one page to another. The use of a sitemap will help pass link values from the homepage, where the majority of links point to other pages on the website.

In order to define a hyperlink, either within the website or to an external website, a web designer will use the <a> tag represented as
<a href=http://www.hunterbusinessschool.edu>Hunter Business School</a>.

HTML Status Messages

When using a browser to request web content from a web server, an error might occur. There are different levels of HTML statuses that range from 1XX to 5XX. The most common HTML status messages are 200 status for a web page that renders properly and 404 for a status of not found. A 404 error message is returned when the web page can’t be found on the web server. HTML status messages in the 5XX range are server errors.

Other common HTML status messages include 302 for a temporary redirect and 301 for a permanent redirect. If a redirect is going to be permanent, it is important to use a 301 redirect so that Google passes all the link values to the new web page to improve the ranking of the web page in organic search results.

Ready to get a job building websites and web applications with HTML5? Covered in coding courses at Hunter Business School are the basics of web development, starting with building basic Hypertext Markup Language (HTML) web pages.

The Web Application Design and Development program introduces HTML skills and the basics of web page styling using Cascading Style Sheets (CSS).

The Web Application Design and Development program transforms beginning computer coding students into entry-level, full-stack web developers. The Web Application Design and Development program focuses on the main programming languages including HTML, CSS, JavaScript, Java, Python, SQL, and PHP.

Career Services at Hunter Business School

Hunter Business School’s Career Services staff members help students jumpstart and then advance in stimulating and gratifying careers in the web app and coding field. The entire department helps the prospective employee make the transition to the workplace as quickly and easily as possible.

Placement services include job interviewing skills, résumé preparation, cover and thank you letter writing, job internships, and career counseling and support. Job placement assistance is available for Hunter Business School graduates for life.

Contact us today to find out more about how to become a webmaster on Long Island.

To access information on our graduation rates, the median debt of students who completed the program, and other consumer data regarding programs leading to gainful employment at Hunter Business School, please visit Consumer Information.