Intro to HTML
HTML is the most essential language on the modern web. Without it, there would be no content, whether it’s server-generated pages from a database, static hand-coded sites, or any other technological approach.
In this first tutorial, we’ll take a look at the general structure of an HTML page, along with a couple of basic elements. We’ll also cover the concept that HTML should only be used for structural purposes, not for controlling the presentation (or style) of the page’s content.
An HTML (HTML = HyperText Markup Language) document must have four basic tags to be a functioning page: <html> is the outermost tag, and it wraps the entire page in its opening and closing tags. <head> sits inside of the <html> tag, and provides a place for various elements that don’t render on the page itself. This includes the <title> tag, which provides the page title that is displayed at the top of the browser tab, or as the name when the page is bookmarked.
We won’t get into too much detail on the various elements that can sit in the <head> section of the markup. Rather, we’ll be focusing on the <body> tag, which is where all of the rendered content sits - links, tables, paragraphs of text, and more.
Here is the simplest possible HTML page that is still a functional page:
<!doctype html> <html> <head> <title>My First Page</title> </head> <body> </body> </html>
You might have noticed an unexplained tag at the top of the page - “<!doctype html>”. The doctype tag tells the browser which version of the HTML or XHTML standards the page is in compliance with. Simply typing “<!doctype html>” as it appears above tells the browser that the page is HTML5, which will work fine for now.
Let’s get some text on the page now! The <p> tag stands for “paragraph”, and it simply denotes a paragraph of text in HTML. The paragraph can contain links, images, and other elements. By contain, I mean that links and images can be nestled inside of the <p> and </p> tags of the paragraph. Here’s an example:
<!doctype html> <html> <head> <title>Some paragraphs</title> </head> <body> <p> Here is my text, my paragraph! Brought to you by <a href="http://fonte.me/labs">Fonte Labs</a> </p> </body> </html>
As you can see, the <p> element has both text and an <a> tag inside of it. The <a> tag is known as an “anchor tag”, and is generally known as a hyperlink or a link. The syntax for anchor tags is as follows: The attribute “href” is set to the URL of the page being linked to. An attribute is simply text inside of the opening HTML tag, with the format “<a attribute=”attribute value”>text</a>” The text inside of the <a> and </a> tags is what the displayed link will look like on the page - the actual link address is not directly shown on the page. Now, let’s add a header to the web page - there are six sizes of headers, and largest to smallest they are h1, h2, h3, h4, h5, and h6. It’s easy to add a header by simply wrapping an h1 tag around the header text:
... <body> <h1>This is my Page</h1> <p> some text </p> </body> …
Search Engine Optimization techniques (how to make your page rank well on a Google search, basically) include providing quality titles in the header tags, rather than the generic example I just gave. Try to come up with a phrase that describes your page with accuracy, and is also readable and not too long.