HTML or Hyper Text Markup Language is used when writing and developing web pages. HTML is simply a mark-up language that is crucial in the processing, definition, and presentation of text (e.g. the font or color of a text).
Structure is an essential part of the HTML document; it includes the semantics (meaning) and structural markup of the document.
Presentation is the style of the document; i.e. how the document will look (or even sound if it includes multimedia elements).
Those two features must be kept separate when designing a web page. At the end of the design process, the author should have an HTML document (which contains the structure and the actual content) and a separate CSS (CASCADING STYLE SHEET) file. The CSS file will contain everything to control the actual presentation of the web page.
HTML consists of elements. These elements direct how the content will be displayed. An HTML element is defined by a start tag, followed by your content, and closed off by an end tag. It will look something like this: <tagname> content </tagname>.
Below are some commonly known HTML elements:
- Document Type Declaration <!DOCTYPE html>: The document type declaration <!DOCTYPE html> is required as the first line of an HTML document. The doctype declaration is an instruction to the browser about what type of document to expect and which version of HTML is being used.
- HTML Element <html>: The <html> element, the root of an HTML document, should be added after the !DOCTYPE declaration. All content/structure for an HTML document should be contained between the opening and closing <html> tags.
- Head Element <head>: The <head> element contains general information about an HTML page that isn’t displayed on the page itself. This information is called metadata and includes things like the title of the HTML document and links to stylesheets.
- Paragraph Element <p>: The paragraph element is used to display the enclosed text.
- List Element <li>: To create lists, the list element <li> has to go between the start and end tags of either one of the following:
- Ordered lists <ol> (i.e. numbered lists/lists with a specific order)
- Unordered lists <ul> (i.e. bulleted lists/lists without a particular order)
- Body Element <body>: The <body> element represents the content of an HTML document. Content inside <body> tags are rendered on the web browsers.
- Heading Elements <h1>-<h6>: there are six different levels of heading elements in HTML. The highest level would be <h1> meaning that the text enclosed between the start and end tag of <h1> will have the largest font among the six. Thus, <h6> will display the smallest font.
- Title Element <title>: The title element contains a text that will become the title of an HTML page or the word(s) displayed in the browser’s tab. This element must be contained inside a document’s <head> element.
- Line Break Element <br>: The Line Break Element does not require a closing tag. It will create a line break in text and is especially useful where you need a division in the text. In layman’s terms, it works the same way as the “enter” key on your keyboard.
- Adding Comments: In HTML, comments can be added between an opening tag <!– and a closing tag –>. Comments are usually used to serve as a reminder of what each line or group of code is for. This will make it clearer for programmers to go through the details of their HTML document. Moreover, the content inside of comments will not be rendered by browsers, so they won’t be seen on the published site.