This is a walk-through article by one of ClinkIT Solutions’ software developers on getting started with HTML.
HTML or Hypertext Markup Language is the standard markup language for documents designed to be displayed in a web browser. Web browsers, on which the web applications/websites are viewed, only interpret HTML when loading and displaying documents.
This means that HTML is one of the most important languages to learn when it comes to web development and web applications. It is the basic building block of the World Wide Web.
HTML5 is the fifth and latest version of HTML. It introduces new elements and attributes that reflect typical usage on modern websites – with support for the latest multimedia and other new features.
Getting Started With HTML
In this article, we will learn how simple it is to create an HTML document or a web page. To get started, we only need two things: a text editor and a web browser.
Most modern-day web browsers support HTML5 readily – Chrome, Firefox, and Safari as well as IE9+, Edge or Opera. But for IE7/8 and the older versions that do not support canvas, footer, or other new HTML5 tags, it is unsurprising to encounter certain errors and visual glitches.
Almost any text editor can be used when writing HTML – even Notepad can work, albeit you might have a slightly more difficult time. Notepad++, Visual Studio Code, and Brackets are some editors that provide a better experience when handling HTML as they provide various templates and IntelliSense. Brackets even provide a live preview of your HTML document as you edit the code.
Creating Your First HTML Document
Let us look at this HTML code below.
We can see in the above code snippet that an HTML5 document starts with a DOCTYPE declaration. Appending a DOCTYPE to the HTML5 document essentially identifies which version of HTML is being used. If the HTML document forgets to mention a DOCTYPE within it, browsers will automatically work in Compatibility mode or Quirk mode. It means that there are some HTML features that won’t be available.
HTML is written in the form of HTML elements. We call it markup tags – the fundamental characteristic and basic structure of HTML. Each markup tag is a command represented by a keyword and placed between angle brackets such as <html>, <title>, <head>, <body>, <p>, and so on. Each markup tag always comes in pairs and they look like these: <html> and </html>. These are what we call an opening tag and a closing tag. The only difference is that for closing tags, there’s a slash (/) before the keyword after the angle bracket.
Explanation of HTML Tags
Theelement contains tags about the document such as the title and metadata. This is also the recommended section to import style sheets and scripts.
- The
<head>element contains tags about the document such as the title and metadata. This is also the recommended section to import style sheets and scripts. - The
<title>tag is used to define the document title which shows up at the browser tab of the webpage. - The
<body>element contains the document’s actual content that is rendered by the browser and can be seen by the user. - The
<header>element contains the document’s introductory content such as header tags or links. One HTML document can contain several<header>elements. However, the<header>cannot be placed within<footer>, another<header>, or<address>element. - The
<h1>to<h6>tags are used for defining and classifying HTML headings:<h1>usually pertains to headings with the highest importance and it has the largest text size and weight;<h6>, however, pertains to headings with the least importance and it will have the smallest text size and weight. - The
<nav>tag is used to define a set of navigation links. The<nav>element is specifically used for major block of navigation links. You don’t have to include all links of a document within a<nav>element. For example, top navigation bars used to navigate from one webpage to another can be placed inside a<nav>element while list of links within the<footer>element don’t necessarily have to be contained in a<nav>element. - The
<ul>tags are used to define an unordered or bulleted list. It should be used with the<li>which pertains to the individual list items. Alternatively, you can use<ol>tag which pertains to an ordered list. This displays a numbered or a lettered list instead of bullets. - The
<main>tag describes the main content of the document. The content inside the<main>tag should be unique to the document. It should not contain any content that is repeated across documents or webpages such as sidebars, navigation links, footer information, etc. - The
<article>tag represents content that is self-contained and independent. On its own, it should give enough details of what it refers to so that it won’t be difficult to distribute it as standalone content from the rest of the site. - The
<p>tag is used to define a paragraph. Browsers automatically add a single blank line before and after each<p>element. - The
<a>tag is used to define a hyperlink, which is used to navigate to another page. Thehrefattribute is its most important attribute because it refers to the link’s destination. - The
<footer>is used to define a footer usually containing copyright or author information in the bottom of the html document or webpage.
Saving and Viewing your HTML Document
Taking the code snippet above, we can save the document with a “.html” extension and open it using a browser. Your browser should be able to render the html code and display the webpage seen below.
What’s Next?
This webpage we created might not seem much, but it contains the most used elements and structures that will help you get started in creating html web pages.
There are still numerous tags that have not been discussed – some that can enable you to create very powerful things such as display media where you format your content for a more visually appealing webpage.
As a next step, learning CSS and JavaScript can allow you to do wonderful things with HTML and allow you to take full control of your web page’s visual style and functionality for a more professional look.
Get the latest insights on developer best practices, technologies and solutions for businesses here. Need help with application development or other development services? Schedule a free consultation with us.
