Hypertext Markup Language is the standard markup language for documents displayed in a web browser. It’s how most websites are made! WordPress here is made using PHP, but that’s beside the point. Using a few common HTML elements, you can make an amazing document to display as a site! Here is a basic skeleton for you to get started on fleshing out!
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph!</p>
</body>
</html>
- The
<!DOCTYPE html>declaration defines this document to be HTML5. - The
<html>element is the root element of an HTML page. - The
<head>element contains meta information about the document. - The
<title>element specifies a title for the document. - The
<body>element contains the visible page content. - The
<h1>element defines a large heading. - The
<p>element defines a paragraph.
Notice the <?> tags? These tags define elements which then go on to define webpage content. This is the formatting with which HTML is written. These are basic however so here are ten commonly used elements:
- Links: <a href=”https://www.w3schools.com”>My source used</a>
The link’s destination is specified in thehrefattribute. Attributes are used as element parameters within tags to customize element use. - Images: <img src=”w3schools.jpg” alt=”W3Schools.com” width=”104″ height=”142″>
The source file (src), alternative text (alt),width, andheightare img attributes. - Buttons: <button>Click me!</button>
Creates a button for user interaction. Must be configured though! - Line Break: <br>
<br>is interesting because it’s an empty element, meaning it lacks a closing tag. - Bold/Strong: <b>Bold</b> <strong>Strong</strong>
Bold and Strong are interchangeable and both define text. - Small: <small>Small</small>
This emphasizes tagged text as a smaller size. There are many more text formatting elements such as<mark>to highlight,<del>to strikethrough,<ins>to underline, and so on. - Blockquote: <blockquote> [insert wall of text here] </blockquote>
A<blockquote>is most commonly used when inserting a snippet or even full paragraph of text from elsewhere into your webpage. Theciteattribute enables citation of the blockquote. There are more quotation elements in HTML such as<abbr>abbreviations and more! - Comment: <!– This is a comment! –>
While not exactly an element, comments are extremely useful for annotating, noting, and describing lines of HTML written as they are hidden from common view when the webpage is loaded. - Style: <style>Style</style>
Style uses numerous attributes to stylize its tagged content. See CSS for a wealth of information on how to give your webpages style and flair! - List: <ol><li>One</li> <li>Two</li><li>Three</li></ol>
There are two kinds of list elements: ordered and unordered. Ordered lists, which I have just used as demonstration, are numbered.
Have fun practicing HTML and remember that tags are not case-sensitive, but XHTML is if you plan to use that.
Omran Losinno 