I wrote some custom HTML code in my Wikidot article - instead of the "original" Wikidot syntax, I have to use <a href="/page"> for links.
The content of my custom HTML block is like this:
<section class="intro">
<div class="container">
<h1>Headline-line text</h1>
</div>
</section>
<section class="timeline">
<ul>
<li>
<div>
<time>Time value </time> Text. Link here.
</div>
</li>
</ul>
</section>
The problem is that it loads the entire content of the HTML into that carefully selected small portion of the original site.
I can only assume that it has something to do with <div>s, as I've already seen this issue on other sites. Hence my assumption is that there must be a general source of this issue, and this is why I'm asking.
What's the reason of this problem and how can I avoid it?
Related
After reading What are the implications of using custom tags in HTML? I have decided to not use custom tags the way I was planning to use them so that I follow standards, and bots may read my code properly. Although, I wanted to know if rather than using custom tags for divs, if incasing these divs within custom tags would still cause any negative effect to my source.
I wouldn't be using: <SomeDiv> rather than <div class="SomeDiv">
Something more along the lines of:
<header>
<nav>
<div class="navWrap">
<div class="navGutz">
NAVBAR
</div>
</div>
</nav>
<logo>
<div class="logo">
LOGO
</div>
</logo>
</header>
<content>
<left>
<div class="myContent">
<topContent>
Main content and more divs
</topContent>
</div>
</left>
<right>
<div class="sidebar">
<news>
News
</news>
</div>
</right>
</content>
<footer>
<div class="social">
Social Links
</div>
<div class="copyright">
Copyright
</div>
</footer>
I ask because rather than using comments to label sections, I wanted to use tags. That way if for any reason I wanted to add style to the section in a whole, I would be able. Visually looking at it it seems a little redundant, but there would be more to it rather than what is just in the example.
So to restate the question, would incasing my content (that is up to standards) with custom tags cause any sort of negative effects against my site? Whether it be indexing, crawling, score, etc.
You should check this article on DEV. The article is about Custom HTML tags, Web Components, the Custom Elements spec and the few js libs.
I'm trying to reuse HTML from a previous page and write new content on a new page while still retaining the home button and footer for a portfolio. I copied over the HTML containing my home button and footer and used the same stylesheet. But upon opening up a new page with (mostly) the same content sans the hero and work section, the elements on my page look shifted over slightly to the right.
When I add the content from the landing page onto the new page, this problem goes away and the elements are flushed to the left like I want them. However, when I put in any content that does not contain the hero and work section from the landing page, the problem persists.
I've tried looking into not using margin and instead using positioning but am confused if this is the right direction I should go. I'll add the codepens to compare the two. Hopefully the difference is visible, as I really want to work on the actual content of my portfolio. I appreciate any advice.
My landing page:
<div class="container">
<header>
<h1 class="logo">Ryan M</h1>
</header>
<section class="hero">
<p>Hi, I'm Ryan!</p>
<p>
I'm a recent graduate from UC San Diego, where I received a B.S. in
Human-Computer Interaction. I am currently looking for work so feel
free to send me an email!!
</p>
<p class="social">
<a href="#"
>Resume</a
>
—
<a href="#"
>LinkedIn</a
>
—
<a href="
#">Github</a>
</p>
</section>
<section class="work">
<h2>Work ↓</h2>
<article>
<h3 class="title">KOTX website design</h3>
<h4 class="meta">Jan-Mar 2019</h4>
</article>
</section>
</div>
My new page I'm trying to make
I'm trying to write a semantic HTML and also trying to use class names based on BEM methodology.
Before I start the project with completely wrong structure, I just wanted to double check with you if this is right, what I'm doing:
<main>
<article class="card card--light">
<section class="card__wrapper">
<div class="card__image">
an image
</div>
<div class="card__name">
a name
</div>
<div class="card__button">
<button>Click Me</button>
</div>
</section>
</article>
</main>
Is it ok that all sections go inside an article?
Am I doing maybe too many divs?
It's often a good choice to use an <article> tag for card.
There is one error, the HTML5 tag <article> is already creating a section of the page. So there is no meaning of having a <section> as only child. This <section> means "I'm a section of the article", but that's not really the case here. So you should use a simple <div> instead of a <section>.
Globally, be careful with too much HTML5 semantic elements. Using an extra <div> has no bad consequences, this is not true for "sectioning content" tags (<article>, <section>, <nav> and <aside>). For example screen reader will notifiy the visitor for each new section.
I have two divs that act as links (<a>). One in one paragraph, the other in the second paragraph. The second link works: on mouseover (in Chrome) the bottom left of the window displays the link address. The top one does not do the same. What is wrong? I'm talking about the links in the paragraph tags, not the menu links.
<body ontouchstart>
<div class="header">
<div class="logo">Q<sup>3</sup></div>
<div class="desc">Quito's Qustom Qode</div>
</div>
<div class="row">
<div class="sidenav col2">
<a id="about" class="link-active">about</a>
<a id="pricing">pricing</a>
<a id="projects">projects</a>
<a id="legal">legal</a>
</div>
</div><!-- /row -->
<div class="row">
<div id="content" class="col10">
<div class="info">
<div class="about">
<div class="profile-back">
<div class="profile"></div>
</div>
<div class="about-me">
<p>Kevin (Quito [Key'-tow]) Williams is an aspiring front-end web designer. He has 5 years of experience in HTML, 4 years experience in CSS, and is currently studying jQuery. As a modern web designer, he is using his coding background to study the latest web technologies: HTML5, CSS3, RWD. In addition to his web technology languages, he is also familiar with: C<sup>++</sup>, Javascript, Java, Perl, Lua (Minecraft based), LISP, SQL. </p>
<p>Hello</p>
You've forgotten to add the actual link on your anchor tags through href.
Your current code:
<a id="about" class="link-active">about</a>
<a id="pricing">pricing</a>
<a id="projects">projects</a>
<a id="legal">legal</a>
Changes:
about
pricing
projects
legal
Can you be a bit more clear about what outcome you are expecting?
Edit: I think i understand now, "About" "Pricing" "Projects" should be hyperlinks?
you are missing the "href" attribute in the tags which should fix your problem.
If you don't want the link to direct to a different page, you can use href="#" to stop this.
Are you on about the following lines?
RWD.
<p>Hello</p>
If so, both are working fine in chrome and IE for me. I'm not sure what the issue is for you.
try this code,add target="_blank" in your a href
<p>Hello</p>
And the working fiddle link is here https://jsfiddle.net/p7mnsj3p/
newbie self learning web design. In theory, I've learned html and css. In practice I've hit a snag. Here is the barebones code so far.
<header>
<a id="site-logo" href="/"><img src="#" alt="Dot Design" /></a>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
<form id="search">
<input type="search" placeholder="Search" />
</form>
</header>
<div id="content>
<!-- content goes here -->
</div>
Here is the template I'm referencing for practice: http://min.us/i/braxZb11KQjfD
The problem is I'm not quite sure if:
everything in the red box should go in the header
only the jquery slider should go in the header
everything in the red box should not be in the header
or it doesn't matter and just a matter of preference
Since I have no experience, I'd like some feedback as to which method is correct? Or more generally accepted and preferred?
Thank you very much for your input.
Everything in the red box should not be in the header unless that content describes the page content. Which at this point it does't look like it does. It's just homepage content. Unless the intro is directly related to the slider there's no reason to combine the two.
<header></header>
<div id="content">
<figure class="hero"></figure>
<p class="lead"></p>
...
</div>
Would work fine as a setup. The HTML offers a way to group elements semantically (for instance the section and header) or to provide hooks for styling (#content and .hero etc).