The Web Design Survival Guide
Part 1 | Getting Started
1. HTML Overview
This section of the guide provides an introduction to HTML (Hypertext Markup Language). HTML is the code that structures Web page content. It uses a system of “markup” represented by “tags” to organize content into HTML elements and provide instructions on how to display those elements to the Web browser. These HTML elements are the fundamental building blocks of Web pages. If you are new to Web Design, start by learning the basics of HTML here.
– “Try again. Fail again. Fail better.”
About HTML
HTML (HYPER TEXT MARKUP LANGUAGE)
HTML is a set of instructions that describe the structure of Web page content to Internet browsers. A Markup Language is a system of annotating a written document in a way that is distinguishable from the content. The idea and term evolved from early forms of “marking up” paper manuscripts.
HTML SYNTAX | HTML Example 1
HTML Tags are a library of elements used to “markup” the Web page content. They describe the instructions for placement and structure of content. HTML Syntax begins with an element name surrounded by the greater or less symbols < > and ends with the same name surrounded by </ > in pairs. Tags are nested within one another in parent / child relationships from the outermost elements to innermost elements similar to the hierarchy in a written outline. Notice how the indented pairs of tags are nested according to the position they reside in the structure of the code. The indentation format, spaces and line breaks have no meaning to the Web browser, but make it easier for a human to read the code.
What the code is actually instructing the Web browser to do in English is:
“Please display an <html> Web page. Inside the <body> of the page is a <section> and inside that section is a headline <h1>. Beneath that headline, also inside the section, is a paragraph of text <p>“.
Even though this is a really simple example, all HTML follows this basic logic. Early versions of HTML were also used to style page content, but nowadays the CSS code styles the appearance of HTML elements and the HTML primarily defines the document structure.
HTML CODE FORMATTING | HTML Example 2
The same code could be typed out in one continuous line of text and render the same exact result. In this case, the code is Minified and all author formatting and spaces in the code are removed. It’s actually faster for the Web browser to read it this way so finished code, particularity CSS & Javascript, are often published in this manner.
HTML STRUCTURE | HTML Example 3
The HTML structure of a common Web page includes the <head> tag. The head tag communicates important information to the Web browser about the document that is not displayed in the browser including meta data and the title of the Web page. Only HTML elements contained inside the <body> tag are displayed in the Web browser window. Inside the <body> there is a <header> tag where the navigation, hero image or a slider might reside. The <main> tag is used as container to wrap page sections, articles and other content. The main tag should only be used once per page. Inside the main tag is a <section> tag that contains an <article> tag. Inside the <article> tag there are two <div> tags with the class name class “column” that each contain a <p> tag. Notice that the innermost elements do not indent their respective beginning and ending tags. This indicates the end of the nesting of a HTML element in the code.
A <div> tag defines a division of space or section of an HTML document and is generally used to contain, or “wrap” other HTML elements. Before HTML5, all the main structural tags, like header, main, section, article and footer were defined by div tags. Since it was common to name div tags with these terms to identify them, HTML5 introduced tags with these names. They are essentially just div tags with HTML5 Semantic naming conventions. This simplifies the code and keeps it more consistent from one author to the next.
If you wanted, you could still define the entire structure of the Web page just using div tags but the code would be longer and each div tag would require names to identify them for styling. HTML5 semantic divs helps make the page code lighter and therefore it loads a little faster. Finally, this example has a <footer> tag which ends the page structure and often contains a copyright notice, disclaimer or other info that would appear on every page of a Website.
The <header> and <footer> tags are considered adjacent content to the <main> tag because they typically contain content that is repeated (such as navigation links or a copyright notice) from page to page of a website while the <main> tag contains content specific to an individual Web page.
See a full list of HTML Tags at w3schools.com.
HTML TEXT FORMATTING TAGS | HTML Example 4
HTML includes several tag elements that provide for the display of basic Text Formatting without applying a CSS Style Sheet:
<b> = Defines bold text, without any extra importance.
<strong> = Defines bold text, with “strong” importance.
<i> = Defines italic text, without any extra importance.
<em> = Defines italic text, with “emphasis” importance.
<mark> = Defines marked or highlighted text.
<small> = Defines smaller text.
<del> = Defines deleted (removed) text.
<ins> = Defines inserted (underlined) text.
<sub> = Defines subscripted text.
<sup> = Defines superscripted text.
The <br> tag:
Another important HTML element used to format text is the <br> tag. The <br> tag provides the ability to create a line break in text to simulate a return on the keyboard within a tag.
HTML ENTITIES
HTML reserves keyboard characters such as the greater-then and less-then symbols (< >) used in tags. For example, In order to write the (<) symbol into the code, it must be defined as (< or <). These special characters are known as HTML Entities.
A commonly used HTML entity is the Non-Breaking Space ( ). Since HTML ignores extra spaces in keyboard text, the ( ) entity is used to simulate more than a single space. It also prevents an automatic line break between two words when not desirable.
See a full list of HTML Entities at w3schools.com.
HTML DOCUMENT NAMING CONVENTIONS
It is important to always follow some basic naming conventions when saving HTML documents:
• Use all lowercase letters or numbers to name HTML files.
• Never use spaces in file names. Instead, use a hyphen to separate words.
• Always end the name of a HTML file with .html
Example: part-1-html-overview.html
Note: The home page of a website is always named index.html
Web browsers consider this the table of contents – or first page in a website.
HTML Example 1
<!doctype html>
<html>
<body data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1>
<section>
<h1>h1 Headline</h1>
<p>Paragraph.</p>
</section>
</body>
</html>Live Demo | Result:
h1 Headline
Paragraph.
HTML Example 2
<!doctype html>
<html><body data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1><section><h1>h1 Headline</h1><p>Paragraph.</p></section></body></html>Live Demo | Result:
h1 Headline
Paragraph.
HTML Example 3
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<html>
<body data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1>
<header>
<h2>h2 Headline inside the header tag</h2>
</header>
<main>
<section id="section-1">
<article>
<div class="column">
<p>Paragraph inside a div tag named column.</p>
</div>
<div class="column">
<p>Paragraph inside a div tag named column.</p>
</div>
</article>
</section>
</main>
<footer>
<p>Paragraph inside the footer tag.</p>
</footer>
</body>
</html>Live Demo | Result:
h2 Headline inside the header tag
Paragraph inside a div tag named column.
Paragraph inside a div tag named column.
HTML Example 4
<!doctype html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<html>
<body data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1>
<header>
<h2>h2 Headline inside the header tag</h2>
</header>
<main>
<section id="section-1">
<article>
<div class="column">
<p><strong>Paragraph inside a div tag named column with the strong tag.</strong></p>
</div>
<div class="column">
<p><del>Paragraph inside a div tag named column with the delete tag.
</del></p>
</div>
</article>
</section>
</main>
<footer>
<p>Paragraph inside the footer tag.</p>
</footer>
</body>
</html>Live Demo | Result:
h2 Headline inside the header tag
Paragraph inside a div tag named column with the strong tag.
Paragraph inside a div tag named column with the delete tag.
Related Topics
Proceed to the next part of the guide if you feel you have a solid understanding of the topics covered so far. Review the related links to study these concepts in more detail.
Part 1 | Getting Started
Related Links
Web Design Tools & Resources