The first step to building a website is learning HTML. HTML is essential because it is the skeleton of all web pages. HTML provides structure to the content on a website, including text, images, buttons, videos, and links. HTML is a great place to start your learning journey when first learning to code. It is possible to build basic websites after learning some basic HTML, with text, images, and videos. HTML stands for hypertext markup language. This tutorial will take a closer look at how to get started writing HTML.
Basic HTML Markup
We can start with a simple example of HTML markup.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>Purpose Of HTML
HTML provides the skeleton for websites and is a great place to start when learning to code!
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/640px-HTML5_logo_and_wordmark.svg.png" alt="" width="100" height="100">HTML is used by:
- Web developers
- Marketers
- Content creators
- Entrepreneurs
- and many more!
The code above would roughly produce the following output in a web browser.
HTML Markup
HTML is a language for web development. It is the glue that holds all aspects of web development together. HTML is not a coding language but a markup language. Markup refers to a way of describing text that is separate from the text itself. Like a teacher might “markup” a student book report by underlining key sentences and circling summary points, HTML annotates the content within a web page. HTML separates content and annotation using HTML tags, denoted by angle brackets that look like less-than and greater-than signs (<markup/>).
How HTML Tags Work
HTML tags are the tool we can use to markup the text for HTML. They are a mechanism that provides information about the type of content they contain. An example of the syntax for how HTML tags surround content to create an HTML element.
The diagram above is an HTML paragraph element. The paragraph element is made up of an opening tag (<p>), the content (“Hello World!” text), and a closing tag (</p>).
Here is a further definition of each:
HTML element — a single piece of content in an HTML document created by HTML tags and the text or media it contains.
Opening Tag — the element name used to start an HTML element surrounded by opening and closing angle brackets.
Content — The text or media contained between the opening and closing tags of an HTML element.
Closing tag — the second HTML tag used to end an HTML element. Closing tags have a forward slash (/) inside of them, directly after the left angle bracket.
Practicing HTML Elements
To get a feel for how HTML markup affects the content, we need to practice. First, we’ll look at some raw text to understand how it displays in a browser, and then we can add some markup to it to see how it makes the appearance change.
Before Markup
Willy's Web Design. With over 10 years of experience in HTML, JavaScript, and CSS, we'll provide you with the highest quality website. Every design is unique, custom, and tailored to your tastes. Click here!
After Markup
Willy’s Web Design
With over 10 years of experience in HTML, JavaScript, and CSS, we’ll provide you with the highest quality website. Every design is unique, custom, and tailored to your tastes.
<button>Click here!</button>
By simply applying three different HTML tags (h1, p, and button), we can see a drastic difference in how the media is presented on the page.
What Is Hypertext?
Hypertext is text that is linked to other text. This diagram shows different websites that are connected to each other through links, which are represented by arrows.
The word hyper in hypertext gives a clue that the text goes beyond the traditional constraints of the written word. Instead of reading documents from beginning to end, like you would read a book, someone reading through hypertext can browse. This is where we come up with “Browsing the Web”. When clicking on links from one document to another, the user can jump to whatever page they find the most interesting and shape their own unique path through the open web.
It is common to find rich user experiences on the modern web, with features like embedded videos, animations, and interactivity, so it sometimes doesn’t feel like you are just navigating from one HTML page to the next. In reality however and despite all of the advances that the web has seen, at its core the web is still just a collection of hyperlinked documents.
Introducing Hyperlinks
Links are created in HTML with the href attribute, which stands for hyperlink reference. The href attribute allows us to specify the URL that a link should take users to. See below for an example of the href attribute in action.
<a href="https://vegibit.com/how-to-write-html-code/">Write HTML Code!</a>When we set the href property on an anchor tag (abbreviated to <a>) we can specify both the text that should be rendered for the user (the text within the anchor tag) and the URL that the browser should navigate to.
With this code, we’re assigning the value https://vegibit.com/how-to-write-html-code to the href attribute. When a user clicks on the text of this link (Write HTML Code!), they will be directed to Write HTML Code!.
<body> Element
Only content inside of the opening and closing body tags can be displayed on the screen. Here’s what opening and closing body tags look like:
<p> Element
The <p> HTML element stands for paragraph. Paragraphs represent blocks of text separated from nearby blocks by blank lines or first-line indentation. In HTML, paragraphs can be any structural grouping of related content, such as images or form fields and they are block level in nature.
This is a paragraph
This is another paragraph
<h1> Element
<h1> is the highest section level heading element. Use only one <h1> per page or view. It should concisely describe the overall purpose of the content.
Hello H1 Tag
This is a paragraph
This is another paragraph
<div> Element
The <div> HTML element is the generic container for flow content. It has no effect on the content or layout until styled in some way using CSS.
Hello H1 Tag
This is a paragraph
This is another paragraph
This paragraph is a child of the div element and a grandchild of the body element
A Note About HTML Structure
HTML markup is organized as a collection of relationships similar to a family tree. As you saw earlier, we placed <p> tags within <body> tags. and this is what is known as a child element. The <p> tag is a child of the <body> tag. It also means the child element is nested inside of the parent element.
This paragraph is a child of the body
In the example above, the <p> element is nested inside the <body> element. The <p> element is considered a child of the <body> element, and the <body> element is considered the parent. There can be multiple levels of nesting so this analogy can be extended to grandchildren, great-grandchildren, and so on. The relationship between elements and their ancestor and descendent elements is known as a hierarchy. It is important to understand HTML hierarchy because child elements can inherit behavior and styling from their parent element.
<h2> thru <h6> Elements
We already had a look at the h1 element, and in general, there should be only one of those per HTML page. There are also 5 other heading elements consisting of h2 thru h6.
- Heading information can be used by user agents to construct a table of contents for a document automatically.
- Avoid using heading elements to resize text. Instead, use the CSS font-size property.
- Avoid skipping heading levels: always start from <h1>, followed by <h2> and so on.
- Use only one <h1> per page or view. It should concisely describe the overall purpose of the content.
Hello H1 Tag
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
HTML Attributes
Attributes are a super important aspect of HTML. Think of attributes like content added to the opening tag of an element that can be used in different ways, from providing information to changing styling. Attributes are made up of two parts:
- The name of the attribute
- The value of the attribute
The id is a great place to start learning about attributes. It is used quite often and is used to uniquely identify sections on an HTML page. The id attribute can be used in many ways but for now, we’ll take a look at how it can help us identify content on the page.
Peppers
About Peppers
Types
Characteristics
Growing Peppers
Soil nutrition for growing Peppers
Required temperatures for Peppers
Recipes for Peppers
The markup above has three distinct sections with each being wrapped by its own div element. This is a common approach to organizing the data on a page. Also, note that we added an id to each div element to uniquely identify it. When you use an id on a page, the name of that id should only be used once.
Displaying Text with <p> or <span>
Peppers
About Peppers
Types
Peppers are both a fruit and a vegetable, so make sure to eat lots of them.
Characteristics
Peppers are a great source of vitamin C, and they are also a good source of potassium, which is important for the body’s ability to absorb and store energy.
Growing Peppers
Soil nutrition for growing Peppers
Peppers need rich organic soil to grow well.
Required temperatures for Peppers
Peppers need to be kept at a temperature between 70 and 90 degrees Fahrenheit for best results.
Recipes for Peppers
Stuffed Pepper Soup is a fantastic recipe!
<em> and <strong> Elements
It is possible to style text directly in the HTML markup without any CSS. For example, you can use the <em> tag for emphasis of text, or the <strong> tag to highlight important text.
These tags can be customized in how they display content in HTML by CSS but browsers have built-in style sheets that will generally style these tags in the following ways:
- The <em> tag will generally render as italic emphasis.
- The <strong> will generally render as bold emphasis.
Peppers
About Peppers
Types
Peppers are both a fruit and a vegetable, so make sure to eat lots of them.
Characteristics
Peppers are a great source of vitamin C, and they are also a good source of potassium, which is important for the body’s ability to absorb and store energy.
<br> Tag
Whitespace contained in an HTML file doesn’t actually affect the location of elements in a web browser. When entering a new line inside of HTML, the Browser simply will continue parsing the text from left to right. In order to introduce a new line in the rendered output, you can use HTML’s line break element: <br>.
The line break element is unique because it has no closing tag. You can use it anywhere within your HTML code and a line break will be shown in the browser.
This is on line 1
and this is on line 2
line 3 is here
Unordered Lists <ul>
Unordered lists are a staple in web development. The unordered list tag (<ul>) is used to create a list of items in no particular order. An unordered list displays each list item with a bullet point.
The <ul> element is not where the actual text is inserted into the HTML. Each list item must be added to the unordered list using the <li> tag. The <li> or list item tag is used to describe an item in a list.
<ul>
<li>Steak</li>
<li>Black Beans</li>
<li>Vegetables</li>
<li>Salsa</li>
<li>Lettuce</li>
<li>Cheese</li>
<li>Guacamole</li>
</ul>
Ordered Lists <ol>
An ordered list in HTML works much like an unordered list with the difference being that each element is numbered. Ordered lists are great for when you need to list different steps in a procedure or rank items from first to last. You can create an ordered list with the <ol> tag and nested <li> tags. Here we simply change the unordered list above into an ordered list here.
- Steak
- Black Beans
- Vegetables
- Salsa
- Lettuce
- Cheese
- Guacamole
<img> Element
Web pages can be a bit empty feeling with only text content. This is why we have the <img> tag so that web developers can add engaging pictures to their HTML. The <img> tag is how you add an image to a web page. An interesting point about the <img> tag is that it is self-closing. This means you simply add a forward slash / at the end of the <img> tag. There is no need for something like </img>.
In order to get an image to display, the src attribute must be populated with the location of the image. This would be a URL where a file is stored.
<img src="https://images.pexels.com/photos/8698152/pexels-photo-8698152.jpeg" width="400">
The alt attribute, which stands for alternative text, is used to assign meaning to the images on websites. This attribute can be added to the image tag just like the src attribute. It is used to specify an accurate description of the image. This is important for inclusive considerations such as when a screen reader is being used as an assistive technology when accessing the world wide web.
<img src="https://images.pexels.com/photos/8698152/pexels-photo-8698152.jpeg" alt="A beautiful sky with trees in the foreground" width="400"><video>
The modern web is becoming more and more dynamic every day. Users are now looking for moving images, aka video, to enhance the web experience even more. HTML supports displaying videos with the <video> element and requires an src attribute with a link to the video source. Unlike the <img> element, the <video> element does require both an opening and a closing tag.
<video src="awesome-video.mp4" controls="controls" width="400" height="300">
Video not supported</video>How To Write HTML Code Summary
This tutorial covered many of the basics that you’ll need to get started writing HTML code for the web. Let’s review what we now know.
- HTML is an acronym for Hyper Text Markup Language
- It is used to create the structure and content of a webpage
- HTML elements contain opening and closing tags with raw text or other HTML tags between them
- HTML elements can be nested inside other elements
- Visible content should be placed within the opening and closing <body> tags
- Headings and sub-headings, <h1> to <h6> tags, are used to provide titles for sections of content
- <p>, <span> and <div> tags specify text or blocks
- The <em> and <strong> tags are used for italics and boldness
- Line breaks are created with the <br> tag.
- Ordered lists <ol> are numbered
- Unordered lists <ul> are bulleted.
- Images <img> and videos <video> can be added using their src attribute
