One place for hosting & domains

      How To Use and Interpret HTML Elements



      Part of the Series:
      How To Build a Website With HTML

      This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.

      At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

      HTML documents are composed of HTML elements. Most HTML elements contain content (such as text or an image) along with HTML tags that tell the browser how to interpret the content (such as a heading or paragraph text). HTML elements can be used to add structure, semantics, and formatting to different parts of an HTML document. An HTML element is often created—but not always—by opening and closing HTML tags, which wrap around a piece of content.

      Below is an illustration that labels each of the parts of an HTML element:

      Diagram of an HTML element

      Let’s try exploring HTML in practice. Try pasting the following line into your “index.html” file that you created when Setting Up Your HTML Project:

      <strong>My strong text</strong>
      

      In this example, the <strong> tag adds strong formatting by enclosing the text with a pair of opening and closing <strong> tags. Note that closing tags are always denoted by a forward slash (/).

      Note: You may note that the <strong> tag acts very similar to adding bold styling to the text. You can achieve the same styling effect by using the bold <b> tag, however the <strong> tag adds bold styling and semantic meaning that indicates the text is of strong importance. If you are using the bold styling because you want to note the importance of the text, make sure to use the <strong> tag, which will enable screen readers to announce their importance to the user.

      Similarly, the emphasis tag <em> adds italic styling and semantic meaning that indicates the text is emphasized. The italics tag <i> only adds the italic styling to the text. If you are using the italic styling because you want to emphasize the text, make sure to use the <em> tag, which will enable screen readers to announce their emphasis to the user.

      To check the results of this HTML code, we can load the “index.html” file in our browser. Though your file is not online, the browser will still be able to interpret the HTML file as if it were a web page document. Make sure to save your index.html file before loading it in the browser as only saved updates will be rendered.

      Loading an HTML File

      You can load an offline HTML file in the browser in several ways:

      • Drag and drop the file into your browser
      • CTRL + Left Click (on Macs) or Right Click (on Windows) to open the file with a browser
      • Copy the full path of your file and paste the file in your browser bar

      If you are using the Visual Studio Code text editor, you can copy the file path using CTRL + Left Click (on Macs) or Right Click (on Windows) on the file index.html in the left hand panel and selecting “Copy Path.” Then paste the path in your web browser as illustrated in the gif below:

      Gif of how to copy a file path and load it in your browser

      Note: To load the file in the browser, it’s important that you copy the absolute path, (which refers to the file location relative to the root directory), rather than the relative path, (which refers to the file relative to the current working directory). In Visual Studio Code, “Copy Path” refers to the full file path. Be aware, however, that we will use relative paths of files in other parts of this tutorial.

      After loading the file in your browser, you should receive a page that contains the following:

      My bold text

      Let’s try experimenting with other HTML elements. On the next line of your “practice.html” file, try adding the <em> element, which adds emphasis.

      <strong>My bold text</strong>
      <em>My emphasized text</em>
      

      Save the file and reload the file in the browser. You should receive something like this:

      My bold text My emphasized text

      The first phrase should be styled with strong formatting and the second phrase should be styled with emphasis. However, you may be surprised by the side-by-side placement of the two phrases. If you added <em>My emphasized text</em> to the second line of the text editor, you may have expected “My emphasized text” to show up on the line below “My bold text” in the web browser. However, certain HTML elements, such as <strong> and <em>, require you to specify line breaks with additional HTML elements (if you desire lines breaks). We’ll explain why in the next tutorial.



      Source link

      How To View The Source Code of an HTML Document



      Part of the Series:
      How To Build a Website With HTML

      This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.

      At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

      HTML is used to mark up a document with instructions that tell a browser how to display and interpret the document’s content. For example, HTML can tell the browser which text content should be interpreted as a heading and which text content should be interpreted as paragraphs. HTML is also used to add images and assign links to text and images. These instructions are communicated through HTML tags, which are written like this: <tagname>. Many, though not all tags, use an opening tag and closing tag to wrap around the content that they are used to modify.

      To get a sense of how these tags are used, let’s inspect a snippet of HTML code. The HTML code below shows how HTML tags are used to structure text and add links and images. Don’t worry if you don’t understand the tags immediately- we’ll study those in the next tutorial.

      <h1>Sammy's Sample HTML</h1>
      
      <p>This code is an example of how HTML is written.</p>
      
      <p>It uses HTML tags to structure the text.</p>
      
      <p>It uses HTML to add a <a href="https://www.digitalocean.com/community/tutorials/digitalocean.com/community">link</a>.</p>
      
      <p>And it also uses HTML to add an image:</p>
      
      <img src="https://html.sammy-codes.com/images/small-profile.jpeg"/>
      

      This HTML code is rendered in the browser as follows:

      HTML Document

      Viewing the Source Code of a Webpage

      Nearly every webpage you come across uses HTML to structure and display HTML pages. You can inspect the source code of any webpage by using a web browser like Firefox or Chrome. On Firefox, navigate to the “Tools” menu item in the top menu and click on “Web Developer/Page Source” like so:

      Gif of how to inspect source code using Firefox

      On Firefox, you can also use the keyboard shortcut Command-U to view the source code of a webpage.

      On Chrome, the process is very similar. Navigate to the top menu item “View” and click on “Developer/View Source.” You can also use the keyboard shortcut Option-Command-U.

      Try inspecting the source code of the demo website that we will build in this tutorial series. You should receive a page with many more HTML tags than our example above. Don’t be alarmed if it seems overwhelming. By the end of this tutorial series, you should have a better understanding of how to interpret HTML source code and how to use HTML to build and customize your own websites.

      Note: As mentioned above, you can inspect the source code of any webpage using tools from the Firefox or Chrome web browser. Try inspecting the code of a few of your favorite websites to get a sense of the underlying code that structures web documents. Though the source code of these sites will likely contain more languages than HTML, learning HTML first will help prepare you to learn additional languages and frameworks for creating websites later on if you wish.

      You should now have a general understanding of the format of an HTML document and know how to inspect HTML source code using a browser tool. To better understand how HTML works, let’s inspect its key components. In the next tutorial, we will learn more about HTML elements, the building blocks that are used to create HTML documents.



      Source link

      How To Set Up Your HTML Project



      Part of the Series:
      How To Build a Website With HTML

      This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.

      At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

      To explore HTML in practice and begin building an HTML website, we’ll need to set up a new project using a text editor. This tutorial series uses Visual Studio Code, a free code editor available for Mac, Windows, or Linux, but you may use whichever code editor you prefer.

      After opening your preferred text editor, open up a new project folder and name it html-practice. We’ll use this folder to store all the files and folders we create in the course of this tutorial series.

      To create a new project folder in Visual Studio Code, navigate to the “File” menu item in the top menu and select “Add Folder to Workspace.” In the new window, click the “New Folder” button and create a new folder called html-practice as illustrated in the gif below:

      Gif of how to add a project folder in Visual Studio Code

      Next, create a new file called index.html inside the html-practice folder. We’ll use this file through the tutorial series to experiment with HTML. If you are using Visual Studio Code, you can create a new file by using Right Click(on Windows) or CTRL + Left Click (on Mac) on the html-practice folder, selecting “New File”, and creating the file index.html as illustrated in the gif below:

      Gif of how to add a file in Visual Studio Code

      You now have a project folder and file for exploring HTML. We’ll return to this file in the tutorials ahead.

      A Quick Note on Debugging HTML

      Before we get started with our HTML exercises, be aware that precision is important when writing HTML. Even an extra space or mistyped character can keep your code from working as expected.

      If your HTML code is not rendering in the browser as intended, make sure you have written the code exactly. To troubleshoot errors, check for extra or missing spaces, missing or misspelled tags, and missing or incorrect punctuation or characters. Each time you change your code, make sure to save your file before reloading it in the browser to check your results.



      Source link