Skip to content

Instantly share code, notes, and snippets.

@olexpono
Last active December 15, 2015 18:59
Show Gist options
  • Save olexpono/5308196 to your computer and use it in GitHub Desktop.
Save olexpono/5308196 to your computer and use it in GitHub Desktop.
HTML

HTML is a format for organizing information. In a website, HTML is the first real code you get from a web server any time you visit. It is the conductor and skeleton of everything that goes and can go into a web page. While there's a wide range of browsers and an impetus to improve experiences on the web, they need a standard. Otherwise all the browsers would behave differently, leaving developers hopeless to support all the browsers, and users hitting roadblocks because they prefer one browser over another. HTML, specifically 5, is the answer to all these problems. It's an evolving standard developed collaboratively by web industry professionals.

HTML governs whether something is a link and where that link points to. A link in HTML looks like this: Gifs & Dogs! The a is the tag's name, and the construct <a> is a "tag". href is an attribute, in this case an _h_yperlink which _ref_erences some address. On the right side is is </a>, which is how you close a tag. Note that the http:// is covered in {{HTTP}} and www.omfgdogs.com is in {{URL}}. You may also wonder what &amp; is all about. HTML has some special characters, such as < that you can't just shove together with text. One of those is &, which tells the browser that the next few characters represent a special character. So to make < appear in the browser, you need &lt;, which stands for _l_ess _t_han. The HTML &amp; tells the browser to output the & character itself, and the HTML to display &amp; is &amp;mp;. Ampersand saves itself and all its friends. This is called an escape in computer programming, and the translation from regular english to HTML text is called encoding. The browser does the decoding on the fly and most of the time you never end up seeing &amp. You should right click &mp; and inspect this paragraph, it's got lots of ∓mp;mp;'s.

HTML can be used to represent inputs, buttons, headers, times of day, ordered or unordered lists, the line items within, tables, and images. Or in html, that would be:

<input type="text">
<a href="http://google.com"> or <button>
<h1>Chunky Bacon</h1>
<ol> and <ul>
<li>
<table>, <tr>, <td>
<img src="http://any.web/site/cat.gif">

Almost every industry monitors something on the web, and it's all represented in HTML when you see it in your browser.

Remember href? The attributes are crucial to the behavior of some tags. Links need to point somewhere and <img> tags can fulfill their destiny of displaying a cat gif. One of the most important attributes for every element is class, which helps CSS style things in whatever way it chooses. HTML controls which elements are highlighted and distinguished, but all the visual styling - colors, borders, fonts, and page layout are the job of {{CSS}}.

HTML also adds a layer of semantics on top of just plain text, so Google can see that the title of your blog post is more important than the first paragraph: it's an <h1> tag versus <p> for paragraph. Some of these are built in to the standard, and others are simply conventions or imposed by crawlers like Google and Facebook.

The structure of your HTML, called the DOM, is directly used to apply styling and move around elements, but all the rules associated with rendering are part of {{CSS}}. Classically, HTML is rendered from templates on the server, though some sites such as Gmail and Twitter work almost entirely on one HTML page, and use client-side templating in Javascript to render and inject HTML. Don not confuse HTML with XML. While XML specifies the uses of < and > as well as the organization of attributes on each tag, the actual tag names and attributes are important in HTML.

{
"title": "html",
"type": "language",
"front_end": "0.1",
"rant_factor": "3.82",
"see_also": [
"css",
"http",
"multimedia",
"markdown",
"json",
"xml"
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment