HTML Essentials: A Beginner's Guide to Web Development (Part One)
The start of front-end development
Structure
The structure is important for readers to understand what message you’re trying to convey and to help navigate the document.
You probably see structures when reading articles or newspapers. For each article there is a headline, text, and sometimes an image. There may also be a subheading that will split the story into separate sections. All of these will help the reader understand the article more easily.
Using headings and subheadings reflects a hierarchy of information. An article more than likely will start with a large heading, followed by an introduction. This will also be followed by a subheading. The purpose is to separate the text.
HTML
HTML code is characters living inside angled brackets which are called HTML elements. Elements have two tags: an opening tag and a closing tag. The closing tag will have a forward slash in it to differentiate it. The information you want to put will sit between the opening and closing tags.
For example,
The opening tag <html> indicates anything between it and a closing </html> tag is an HTML code.
The <body> indicates anything between it and a closing </body> is shown inside the browser.
The <h1> indicates anything between it and a closing </h1> is the main heading.
The <p> indicates anything between it and a closing </p> is the paragraph of text.
The <h2> indicates anything between it and a closing </h2> is the sub-heading.
Each of these tags has a left-angle bracket and a right-angle bracket and also a forward slash if it’s a closing tag.
The character in the bracket indicates the tag’s purpose, so <p> indicates paragraph.
Attributes
Attributes are used to provide extra information about an HTML element. They are specified within the opening tag of the element and consist of a name and a corresponding value. The name and value are separated by an equal sign (=).
For example,
<p lang="en">Paragraph</p>
The attribute name (lang) indicates the specific type of additional information you are providing about the content of an element. They serve as identifiers that define the purpose of the attribute.
The attribute value (use) represents the specific information assigned to an attribute. It is placed in double quotes.
Head, Body, and Title
<head>
This is what you’ll see first before the <body> element. This contains information about the page.
<body>
This is what it'll be shown inside the main browser.
<title>
This is the content shown at the top of the browser, above the URL of the page, or on the tab.
For example,
<!DOCTYPE html>
<html>
<head>
<title>Tile of the Page</title>
</head>
<body>
<h1>Main heading</h1>
<p>This is the paragraph</p>
</body>
</html>
Will give you this:
Text
Headings
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
HTML has six different kinds of headings:
<h1> is used for the main heading
<h2> is used for sub-heading
If you want smaller sections then the <h3> element is used and it gets smaller as you go on.
For example,
<!DOCTYPE html>
<html>
<head>
<title>Tile of the Page</title>
</head>
<body>
<h1>Main heading</h1>
<h2>Subheading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<h5>H5 Heading</h5>
<h6>H6 Heading</h6>
</body>
</html>
Paragraphs
<p>
If you want a paragraph, surround the words you want with an opening <p> tag and a closing </p> tag.
For example,
<!DOCTYPE html>
<html>
<head>
<title>Tile of the Page</title>
</head>
<body>
<p>This is the paragraph that I'm writing. When you begin a new paragraph it'll start a new line.</p>
<p>Normally you would have a heading above this paragraph to make it easier to understand for the readers, but this is just an example.</p>
</body>
</html>
Bold and Italic
<b>
By enclosing words between <b> and </b> we can make the words bold.
<!DOCTYPE html>
<html>
<head>
<title>Tile of the Page</title>
</head>
<body>
<p>This is the paragraph that I'm writing. When you begin a new <b>paragraph</b> it'll start a new line.</p>
<p>Normally you would have a <b>heading</b> above this paragraph to make it easier to understand for the readers, but this is just an example.</p>
</body>
</html>
<i>
By enclosing words between <i> and </i> we can make the words italic
<!DOCTYPE html>
<html>
<head>
<title>Tile of the Page</title>
</head>
<body>
<p>This is the paragraph that I'm writing. When you begin a new <i>paragraph</i> it'll start a new line.</p>
<p>Normally you would have a <i>heading</i> above this paragraph to make it easier to understand for the readers, but this is just an example.</p>
</body>
</html>
Superscript and Subscript
<sup>
This element is used to contain characters that should be superscript such as a mathematical concept.
<sub>
This element is used to contain characters that should be a subscript. Commonly used in chemical formulas such as CO2.
<!DOCTYPE html>
<html>
<head>
<title>Tile of the Page</title>
</head>
<body>
<p>On the 2<sup>nd</sup> year, we have discover a newly chemical formula.</p>
<p>This is known as CO<sub>2</sub>. It is truly something else</p>
</body>
</html>
White space
When there are more than two or more spaces next to each word, it’ll only display it as one space. Same thing with line breaks. This is known as white space collapsing. As you can see from the example below, spaces and linebreaks will display as a single space.
<!DOCTYPE html>
<html>
<head>
<title>Tile of the Page</title>
</head>
<body>
<p>The world is such a beautiful place.</p>
<p>The world is such a beautiful place.</p>
<p>The world is such a beautiful
place.</p>
</body>
</html>
Line Breaks and Horizontal Rules
<br>
If you want to do a line break then we’ll have to use <br>
<!DOCTYPE html>
<html>
<head>
<title>Tile of the Page</title>
</head>
<body>
<p>The world<br> is such a beautiful place. It is truly a <br>
a wonderful place.</p>
</body>
</html>
<hr>
To create breaks between paragraphs, we’ll add a horizontal rule using <hr>
<!DOCTYPE html>
<html>
<head>
<title>Tile of the Page</title>
</head>
<body>
<p>Planet Earth</p>
<hr>
<p>We going to Mars</p>
</body>
</html>
Emphasis and Strong
<em>
This will indicate the emphasis that changes the meaning of the sentence. By default, browsers will show it in italic.
<!DOCTYPE html>
<html>
<head>
<title>Tile of the Page</title>
</head>
<body>
<p>Planet <em>Earth</em> is being visited by Aliens</p>
<p>Planet Earth is being visited by <em>Aliens</em></p>
</body>
</html>
<strong>
This will indicate its content has strong importance such as being said with strong emphasis. By default, browsers will show it in bold.
<!DOCTYPE html>
<html>
<head>
<title>Tile of the Page</title>
</head>
<body>
<p>Planet <strong>Earth</strong> is being visited by Aliens</p>
<p>Planet Earth is being visited by <strong>Aliens</strong></p>
</body>
</html>
Quotations
<q>
This is used to quote words from a paragraph.
<!DOCTYPE html>
<html>
<head>
<title>Tile of the Page</title>
</head>
<body>
<p>Planet Earth is being visited by Aliens. I have no idea why, <q>but there are many UFO in Nevada</q></p>
</body>
</html>
Citations
<cite>
When referencing a book or an article, <cite> can be used to indicate where the citation is from.
<!DOCTYPE html>
<html>
<head>
<title>Tile of the Page</title>
</head>
<body>
<p><cite>The Beginning of Infinity: Explanations That Transform the World</cite> by David Deutsch</p>
</body>
</html>
Author Details
<address>
This is used to contain details for the author. It can contain a physical address, but it’s not required. The browser will display the content in italics.
<!DOCTYPE html>
<html>
<head>
<title>Tile of the Page</title>
</head>
<body>
<address>
<p>s@gmail.com</p>
<p>823 Trinup Ave</p>
</address>
</body>
</html>
Changes to Content
<ins>
This can be used to show content that has been inserted.
<del>
This is used to show text that has been deleted.
<!DOCTYPE html>
<html>
<head>
<title>Tile of the Page</title>
</head>
<body>
<p>This is the <del>greatest</del> basketball <ins>game</ins> of all time</p>
</body>
</html>
<s>
You can also use <s> to indicate something that is no longer accurate (but it shouldn’t be deleted).
<!DOCTYPE html>
<html>
<head>
<title>Tile of the Page</title>
</head>
<body>
<p>For a limited time:</p>
<p>$499</p>
<p><s>Previously $599</s></p>
</body>
</html>
Lists
HTML will provide us with three different types of lists:
Ordered list: Where each item in the list is numbered. For example, the steps for a recipe that needs to be done in order.
Unordered list: Where it begins with a bullet point.
Definition lists: Made up of a set of terms with definitions for them.
Ordered List
<ol>
The ordered list is created using <ol>
<li>
Each item is placed between <li> and the closing </li>. The li stands for list items.
<!DOCTYPE html>
<html>
<head>
<title>Tile of the Page</title>
</head>
<body>
<ol>
<li>Buy Steak</li>
<li>Cook steak for 10-20 minutes</li>
<li>Let steak rest</li>
<li>Enjoy!</li>
</ol>
</body>
</html>
Unordered Lists
<ul>
The unordered list is created using <ul>.
<li>
Each item is placed between <li> and the closing </li>.
<!DOCTYPE html>
<html>
<head>
<title>Tile of the Page</title>
</head>
<body>
<ul>
<li>Steak</li>
<li>Salt</li>
<li>Butter</li>
<li>Pepper</li>
</ul>
</body>
</html>
Definition Lists
<dl>
A definition list is created by using <dl>. You’ll see <dt> and <dd> inside it.
<dt>
This is used to contain the term you are trying to define.
<dd>
This is used to contain the definition of the term.
<!DOCTYPE html>
<html>
<head>
<title>Tile of the Page</title>
</head>
<body>
<dl>
<dt>Javascript</dt>
<dd>JavaScript, often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML</dd>
<dt>Python</dt>
<dd>Python is a high-level, general-purpose programming language</dd>
</dl>
</body>
</html>
Nested Lists
You can put a second list inside of an <li> element to create a nested list.
<!DOCTYPE html>
<html>
<head>
<title>Tile of the Page</title>
</head>
<body>
<ul>
<li>Ice</li>
<li>Pizza</li>
<ul>
<li>Soda</li>
<li>Chips</li>
<li>Salad</li>
</ul>
<li>Cheese</li>
</ul>
</body>
</html>
Links
Links will allow you to move from one web page to another.
Linking
<a>
You can create a link using <a>. You can put any link you want the user to visit in the href attribute. So for example,
<a href="https://www.instagram.com/">Instagram</a>
The link you want the user to go will be put in the href attribute, so in this case, I want the user to go to Instagram. The user will click on “Instagram” in order to go to the Instagram website.
The output would look like this,
Here is the full HTML example of using <a>,
<!DOCTYPE html>
<html>
<head>
<title>Tile of the Page</title>
</head>
<body>
<h2>Social Media Sites:</h2>
<ul>
<li><a href="https://www.facebook.com/">Facebook</a></li>
<li><a href="https://www.deviantart.com/">DeviantArt</a></li>
<li><a href="https://twitter.com/">Twitter</a></li>
<li><a href="https://www.tiktok.com/en/">TikTok</a></li>
</ul>
</body>
</html>
When linking to pages within the same website, you can use a relative URL. This will eliminate the need to specify the domain name in the URL. If all the pages are in the same folder then the href attribute is just the name of the file.
<a href="index.html">Home</a>
Email Links
mailto:
To send an email to someone we can use mailto: and the email we want to send. The href attributes start with mailto: and are followed by the email address we want to send. So if I wanted to send an email to David I can write,
<!DOCTYPE html>
<html>
<head>
<title>Tile of the Page</title>
</head>
<body>
<a href="mailto:david@example.com">Email David</a>
</body>
</html>
Open Links in New Window
target
If we want the link to open in a new window, we can use target on the opening <a> tag. The value should be _blank.
<!DOCTYPE html>
<html>
<head>
<title>Tile of the Page</title>
</head>
<body>
<a href="https://www.instagram.com/" target="_blank">Instagram</a>
</body>
</html>
Linking to a specific part
When you have a long page you might want to add links that go to a specific part of the page or you may want to add a link to go back to the top of the page rather than having users scroll back to the top.
Before you can link a specific part, we have to identify the points that we want the link to go to. You can do this by using an id attribute.
To link it using an id attribute, the href attribute has to start with the # symbol followed by the value of the id attribute. So, in this case, I have id h1 as “top” and link it using “#top”,
<!DOCTYPE html>
<html>
<head>
<title>Tile of the Page</title>
</head>
<body>
<h1 id="top">Home Page</h1>
<h2>Test</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis mollitia aut accusantium aspernatur quos blanditiis consectetur sapiente repellat impedit, placeat illo, molestias explicabo perspiciatis enim?</p>
<h2>Test</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus aliquid accusantium doloribus. Illum, aliquam quidem atque nam asperiores, aspernatur perferendis animi repellendus, voluptates tenetur doloribus est repellat! Dolorum dolores amet eos labore.</p>
<h2>Test</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel earum, reprehenderit omnis beatae, necessitatibus doloribus facilis nemo nam voluptatum rem sapiente ex deserunt odit numquam, natus ipsum tenetur quos? Neque.</p>
<h2>Test</h2>
<p><a href="#top">top</a></p>
</body>
</html>
This will allow me to go back to the top of the page without scrolling up. As I said before you can link it to any part of the page, so if I want to link another specific part I can just id another section such as,
<!DOCTYPE html>
<html>
<head>
<title>Tile of the Page</title>
</head>
<body>
<h1 id="top">Home Page</h1>
<h2 id="test">Test</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis mollitia aut accusantium aspernatur quos blanditiis consectetur sapiente repellat impedit, placeat illo, molestias explicabo perspiciatis enim?</p>
<h2>Test</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus aliquid accusantium doloribus. Illum, aliquam quidem atque nam asperiores, aspernatur perferendis animi repellendus, voluptates tenetur doloribus est repellat! Dolorum dolores amet eos labore.</p>
<h2>Test</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel earum, reprehenderit omnis beatae, necessitatibus doloribus facilis nemo nam voluptatum rem sapiente ex deserunt odit numquam, natus ipsum tenetur quos? Neque.</p>
<h2>Test</h2>
<p><a href="#top">top</a></p>
<p><a href="#test">Test</a></p>
</body>
</html>
[End of Part One]