One place for hosting & domains

      Elements

      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 Use Inline and Block Elements in HTML



      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.

      When arranging elements in an HTML document, it’s important to understand how these elements take up space on a webpage. Certain elements can take up much more space on the webpage than the content they contain. Understanding the behavior of different element types will help you anticipate how they affect the position of other elements on the page.

      In general, there are two different types of elements—inline-level elements and block-level elements—whose spacing defaults behave differently from one another. Below, we’ll describe how the default settings of these elements determine their position on the webpage and relative to the position of nearby elements.

      Inline-level Elements

      Inline elements are elements whose horizontal width is determined by the width of the content they contain. The <strong> element and the <em> element we covered in the last tutorial are both examples of inline elements.

      We can use Firefox’s Web Developer Inspector to inspect the size of HTML elements on a webpage. (If you are using Chrome, you can use the Developer Inspect Elements tool instead but this tutorial will give instructions for Firefox’s Web Developer tool.)

      Return to the index.html file that you loaded in your browser. If you need to reload it and don’t remember how, refer to the instructions Loading an HTML File in your Browser from the last tutorial.

      Then navigate to the Tools menu item in the top menu bar and select “Web Developer/Inspector.” Selecting this menu item will open up the Inspector interface that allows you to inspect the HTML and CSS of a webpage. Next, hover your cursor over the text My strong text, which should highlight the text in light blue. This highlighting shows the full extent of the space occupied by the element that your cursor is hovering over. As you may have expected, the element’s occupied space is just large enough to contain its text content:

      This gif illustrates the process of using the Inspector tool as described in the paragraph above.

      Unlike block-level elements, which we’ll cover in the next section, inline elements do not take up their own line of horizontal space. Thus, inline elements will rest side by side on a webpage if you do not specify a break with an additional HTML element, such as the line break <br> element. This sizing default is often convenient, as you may want to mark up single words in a paragraph with an inline element such as <strong> or <em> without pushing subsequent text to the next line.

      Try adding the <br> tag in between your two lines of code in the index.html file. (You will need to return to your file in the text editor.) Note that the <br> element only requires an opening tag and does not wrap around any text:

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

      Save and reload the document in your browser to check your results. You should receive something like this:

      My strong text
      My emphasized text

      Your two phrases should now be on separate lines as they are now separated by the line break element <br>.

      If you use the Firefox Web Developer Inspector to check the size of the elements, you can confirm that the width of each of the text elements is still determined by the width of the text content:

      Inspect Element again

      Block-level Elements

      Block-level elements behave differently than inline-level elements in that they take up an entire line of horizontal space on a webpage. This means that they automatically start on a new line and that they automatically push subsequent elements onto a new line as well.

      For example, the HTML heading elements (<h1> through <h6>) are block-level elements that automatically place their content onto a new line and push any content that follows onto a new line. Each of these six heading elements represent a different heading size.

      Let’s study how this works in practice. At the bottom of your index.html file, try pasting in the highlighted code snippet:

      <strong>My strong text</strong>
      <br>
      <em>My emphasized text</em>
      
      <h1>Heading 1</h1>
      <h2>Heading 2</h2>
      <h3>Heading 3</h3>
      <h4>Heading 4</h4>
      <h5>Heading 5</h5>
      <h6>Heading 6</h6>
      

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

      HTML Headings

      Let’s now inspect the block-level heading elements to study how they differ from the inline-level text elements above. Open up the Firefox Web Developer Inspector and hover over each of the elements to inspect their occupied space as indicated by the blue highlighting. You should be able to confirm that the occupied horizontal space of each of the inline-level elements is determined by its text content, while the occupied horizontal space of each of the block-level elements stretches across the entire web page:

      This gif illustrates the process of using the Inspector tool as described in the paragraph above.

      Block-level elements will always push inline-level elements down to the next line, even if you write those HTML elements on the same line of the HTML document. To confirm this for yourself, try writing a block-level element and an inline-level element on the same line of your index.html file. Erase the existing content from your file and add the following code snippet:

      <strong>My strong text</strong><h1>My heading</h1><em>My emphasized text</a>
      

      Can you guess how this HTML code will render in the browser? Save your file and reload it in the browser. You should receive something like this:

      Inline and block level elements

      Notice that the heading element <h1> has started on a new line and pushed the subsequent text element to a new line even though the elements were written on the same line in the HTML document.

      You should now have an understanding of how inline-level and block-level elements are positioned and how they affect the position of nearby elements. Remembering their distinct behaviors can be useful when arranging HTML elements in the future.

      We’ll continue learning about new inline and block elements in the tutorials ahead.



      Source link

      How To Nest 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 elements can be nested, meaning that one element can be placed inside another element. Nesting allows you to apply multiple HTML tags to a single piece of content. For example, try pasting the following code snippet inside your index.html file:

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

      Save your file and reload it in the browser. (For instructions on creating an index.html file, please see our tutorial here or for loading the file in your browser, see our tutorial here.) You should receive something like this:

      My bold text and my bold and emphasized text

      Nesting Best Practices

      Note that it is recommended to always close nested tags in the reverse order that they were opened.

      For example, in the example below, the <em> tag closes first as it was the last tag to open. The <strong> tag closes last as it was the first to open.

      This sentence contains HTML elements that are <strong><em>nested according to best practices</em></strong>.
      

      As a counter example, the following HTML code contains tags that are not nested according to best practices, as the <strong> tag closes before the <em> tag:

      This sentence contains HTML elements that are <strong><em>not nested according to best practices</strong></em>.
      

      While not technically necessary for rendering your HTML in the browser, nesting your tags in the proper order can help improve the readability of your HTML code for you or other developers.



      Source link